吾輩はぬこ将軍である。はてなブログのカスタマイズもちょこちょこやっているのである。
はてなブログを始めて2週間、最初の状態と比べたら新しく導入したものもあり、見やすさが改善されたと思う。
はてなブログを始めて10日目では、『記事内の目次』や『記事内の見出し』など記事を見やすくするための工夫を試みた。
詳しくは以下の記事で⇓
しかし1つの記事よりもこのブログ内の他の記事にも興味を持ってもらいたいし、読んで欲しいと思っている。
そこではてなブログ開設2週間を記念して、今度は『ブログデザインをより見やすく』をモットーにした3つのカスタマイズについて書いていこうと思う。
「ブログの見た目を変えたいけど、どうすれば良いか分からない！」という超初心者は良かったら読んでみて欲しい。
はてなブログのサイドバーを見やすくカスタマイズ！
サイドバーというのはココである⇓
上の画像では当然のようにあるが、実ははてなブログの初期状態では『カテゴリー』はない！
そのブログにどんなことが書かれているかを知る手掛かりとなるカテゴリーがないのである。
これではどんな記事が有るのか分からない、謎のブログになってしまう。謎という言葉で人気が出そうだが、人は訳の分からないものにはそう易々と近寄らない。
ではカテゴリーをサイドバーに表示させるにはどうすれば良いか？
まずは以下の画像を参考にダッシュボードから『デザイン』を選択する。
選択後は『カスタマイズ』⇒『サイドバー』と移動していけば良い。
下の方にある『モジュール追加』をクリックし、そこからカテゴリーを追加できる。
このようにすればカテゴリー以外のモジュールも追加できるし、表示名を変更できるのも面白い。
初期状態から大きく進化し、自分だけのはてなブログを作っていこう！
はてなブログにグローバルメニューとトグルメニューをつくる！
グローバルメニューの追加
『グローバルメニュー』というのは上の画像のように、PC画面で見ている時にヘッダーの下にあるメニューである。
ブログを訪問した人が最初に目につくのは多くの場合ヘッダー画像で、その近くに気になるメニューがあればより興味がそそられる。
グローバルメニューはサイドバーよりも目立つし、自分がアピールしたいコンテンツのリンクを載せるのに適している。
個人的には、グローバルメニューが見れるブログはお洒落でかっこいいとすら思うのである。
そんなグローバルメニューを自分のはてなブログに導入するには、HTMLとCSSコードを入力すればいい。
「しーえすえす？えいちてぃーえむえる？なんじゃいそりゃ？」と思った方も安心してほしい。
『ブログをカスタマイズしたい時に使うもの』くらいの認識で問題ない。
幸いにも親切な方々がコードを公開してくれているので、それを決まった場所にコピーすればすぐに実装可能である。
以下のサイトを参照しながら導入することを推奨する。
上のサイトでは他のカスタマイズも説明されているが、とりあえず『グローバルメニューの横幅を均等にする』だけやっておけば見栄えは問題ないと思う。
トグルメニューを追加する
『トグルメニュー』とは、スマホでブログを見ている場合にグローバルメニューの代わりに表示されるものである。
グローバルメニューの表示数が多い場合、スマホではトグルメニューを利用した方が画面が見やすい。
先ほど吾輩が貼った記事リンクCSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Lifeを読んで頂けた人は気付いたと思うが、トグルメニューもコードをコピーするだけですぐに導入可能である。
なので早速吾輩もトグルメニューを導入してみた！がしかし、スマホで押してみても反応がない！
何度タップしようが、何も起こらない。このボタンはただのしかばねか？
「トグルメニューが動作しない、反応しない・・・」という同じ悩みを経験した人を探しみて対処法が分かった。
トグルメニューが動作しない時の対処法は、ダッシュボードの『設定』から『詳細設定』に移動し、下の方にある『headに要素を追加』の欄に以下のサイトから得られるコードをコピーすればいい。
⇓
developers.google.com
『jQuery』という見出しにあるコード(下記の画像参照)をコピーすれば解決する。
このお陰で、吾輩のトグルメニューも息を吹き返した！
それでもやっぱり、はてなブログではカスタマイズよりも記事を書こう！
今回の記事では『サイドバー』、『グローバルメニュー』、『トグルメニュー』のカスタマイズについて書いてきた。
しかし、一気にやる必要は無い。
まずは自分の書きたいことを書きまくって、手が空いた時にカスタマイズの方を少しずつ進めていけば良いと思う。
見た目にこだわり抜いて満足してしまい、肝心の記事が疎かになっては台無しである。
それは、ブランド品で外見はばっちり決めたけど中身は空っぽな人間と同じである。
それでも何かしらカスタマイズしたい人は、まずは『記事の見やすさ』を改善してみてはどうだろうか？
