金糸雀ブログ

webライター・シンガーソングライターのカナリヤ響子のブログ。ウェブライティング、音楽、横浜、写真、手芸、愛犬のことなどいろいろ書いちゃいます♪

はてなブログのメニューバーをカスタマイズについて考えてみた

こんばんは。本日はボイトレのレッスンに行ってたカナリヤです。

f:id:kyokocanarysan:20160226014555j:image

画像出典 : ブログタイトルの下にメニューバーを作る①:初心者でもできるブログカスタマイズ

 

ところで昨日は、このブログメニューバーカスタマイズして追加しました。パソコンから見ると、ブログのタイトル下に黄色いメニューバースマホから見るとタイル状のメニューバーがあります。

 

メニューバーの役割は?

ここのブログでのメニューバーの役割は、記事カテゴリーをわかりやすくすることにあります。何と言っても多方面に話題が広がる私ですから、カテゴリーを表示するメニューバーをカスタマイズして加えておかなければ、他の関連記事も読みたいと思ってもらえた時に同じカテゴリー(ジャンル)の記事が探しにくいのです。

 

単純に更新順で見ていくと、昨日は音楽の記事なのに今日はライティングの記事というのも当たり前にあるわけで。ですから、同じカテゴリーの記事を探したいときは、メニューバーから見ていただくことをおすすめします。

 

メニューバーは、パソコン表示とスマートフォン表示を別々にカスタマイズしました。はてなブログの先輩方の記事を参考にしながら♪ららら〜♪

 

スマートフォンの場合

スマホ表示のメニューバーカスタマイズは、ここのサイトを参考にさせていただきました。とってもわかりやすかったです。

 

カテゴリーやコンテンツ数が5個以下なら、自動でサイズを合わせてくれるメニューバーが良いかもしれません。しかし、私はカテゴリー数が5個以上なのでタイル状のメニューバーカスタマイズを参考にしました。

 

ここのブログは、はてなブログの中でも人気なのかもしれませんね。ブログデザインも素晴らしいですし、記事ネタも良すぎです。いいところ狙ってられますね。嫉妬するくらい狙いがよくて、勉強になりました。

 

 パソコンの場合

はてなブログのパソコンの方のメニューバーカスタマイズは、このブログの記事を参考にしました。というか、ここの記事でやっと問題点が解決したのです。

 

基本的には、ここの記事でも紹介してくださってるサイトの記事を参考にメニューバーカスタマイズするのですが・・・コンテンツ数によって横幅の区切りがおかしくなり、大きいボタンと小さなボタンが発生するのです。

 

それはなぜか?

 #menubar li{
 display: table-cell;
 width:20%; ←ここの部分に注目!
 padding:0;
 background-color: #000000; }
 
「width:20%;」のところは、メニュー項目が5つの時の設定なんです。

引用 : ホームページっぽいメニューバーが完成! はてなブログに「ナビゲーション」をつける方法をやってみた。 - pomeyama days

 
この通り、CSSの中の横幅のパーセンテージをコンテンツ数によって変えなければいけないのです。じゃないとバラバラの大きさになって気持ち悪い個性が醸し出されます笑。
 
さて、とりあえずメニューバーはできたので、次はタイトル画像のカスタマイズをしたいと思います。さぁどんなサイトを参考にしようかな(^∇^)