スポンサーリンク
初心者ヘッポコブロガーtamayurakunがはてなブログタイトル画像からブログテーマを変える＆グローバルメニューをつける！！カスタマイズ！！
tamayurakunです。@tamayurakun
今日の記事は、ヘッポコブロガーであるtamayurakunのブログを見やすくするために悪戦苦闘する過程を書いていきたいと思います。
追記 2019年10月1日からWordpressに移行しました。
自分のように初心者で、はてなブログのブログのデザインで分からなかった人にも自分がやったことを書いて少しは参考になるかもしれません。
自分は無料のブログでブログを運営しています。
Proにはなっていません。
なぜデザインを変えようと思ったのかというと、友達にブログの画面にカテゴリーが表示されていないと言われたことがきっかけです。
自分はパソコンで記事を書いたりしているんですが、カテゴリーを一応つけていました。
しかし、スマホで見るとカテゴリーが表記されていませんでした。
なので、カテゴリーを表記するためにデザインからサイドメニューにいき、モジュールの追加のボタンのところからカテゴリーのメニューを追加しました。
これによりサイドバーにカテゴリーのモジュールが追加されました。
それに伴いブログの表示をスマホとパソコンの両方を連動して表記するレスポンシブ対応のテーマに変えることにしました。（今までのテーマはレスポンシブ対応のテーマではなかったことを知ります。）
まず、ブルックリンのテーマにしてみましたがテーマのカラーが白黒がベースでした。
自分のブログはテーマカラーをブルーに考えているので、前はDUDEというテーマを使っていました。
このテーマではレスポンシブ対応じゃないので、いろいろなブログを読んでレスポンシブ対応のテーマがいいと書かれていたので人気のブルックリンにしました。
しかし、ブルーの色を出すことができなかったので、
CONTENTSと呼ばれるテーマが青を基調にしたデザインでレスポンシブ対応のテーマだったので変えました。
ブログのタイトルが文字だけだったので、どうせならオリジナリティのあるタイトル画像にしてみたいと自作してみることに。
最初の画像が完成形で自分のブログのタイトル画像にしたんですが、それも試行錯誤しました。
Picky-Picsと呼ばれるサイトで無料で画像加工ができると書かれていたので、そのサイトで試行錯誤して画像を調節しました。
ブログのサイズに合わせてFacebookサイズで画像を作りました。（ブログのサイズ的にはそのサイズが一番近かったです。）
スマホで表記しても収まるように真ん中に寄せた画像です。
周りに木の画像を付けたんですが、シンプルなほうが観やすいかと変更しました。
で、自分の書いたキャラクターの絵を調節して文字ともバランスをとり
最終的には、
この画像に落ち着きました。
これをはてなブログのデザインから、ヘッダのところの画像から差し込みました。
あとは、スマホでもサイズが合うようにコードをコピペしてちゃんと表記されるようになりました。
あとスマホで表記したら記事が繋がって表示されるようになってしまったので記事一つ一つに続きを読むボタンをつけました。
自分のブログにホーム画面にメニューがないことに気が付いて使いづらいと感じてグローバルメニューを入れることに！！
いろいろ試行錯誤の上、CONTENTSのテーマを作られた方のブログのサイトからHTMLとデザインCSSのコードを自分なりに自分のブログ用にして完成。
DREAMARKさんのサイトを参考にしてコードを書きました。
そして、ブログをパソコン上はグローバルメニューで表示してスマホのサイズでは、トルグメニューになるようになりました。
SNSボタンも自由メモさんのブログからコピペをしてボタンを作りました。
いろいろ試行錯誤しましたが、今のところ出来る限りのデザインの変更をしました。
少しでも読者さんが見やすくてわかりやすくできるかがブログの快適性につながり、
Googleアナリティクスの数字の改善がみられると思います。（実際にメニューやタイトルを変えたら数字が改善しました😢）
これからも少しでも読者さんがついて愛されるブログになるように頑張っていきたいと思います。
では、今日の記事はこの辺で！
スポンサーリンク
