無題で行こう

気の向くままに書きたいことを書いていきます。とりあえず無題でいきましょう。毎日いろいろありますよね♪

MENU

はてなブログを簡単カスタマイズ!⑧グローバルメニュー編

f:id:kay72234:20151117210714j:plain

■はじめに

はてなブログは、スタイルシートを修正・追記することで、かなり自由にデザインのカスタマイズが可能です。筆者もいろいろなサイトの情報を参考にさせていただきながら、ちょくちょく実践してきました。実際に行ってきたカスタマイズは備忘メモを兼ねて、それぞれ記事として掲載しています。
最近ではグローバルメニューを付けてみましたので、今回はその方法を紹介いたします。すごくシンプルなメニューですが、そのぶんコードの分量も少なく、簡単に組み込むことができると思います。

■グローバルメニューとは?

グローバルメニューとは、サイト内の全ページで一貫して同じ位置に表示されるメニューのことを言います。グローバルナビゲーションと表現されることもありますが、同じものと考えて良いと思います。
ブログの場合は、ブログタイトルの下に表示することがほとんどです。グローバルメニューにカテゴリの分類を並べておくと、そのブログでどんなジャンル・テーマを扱っているのかが分かりやすくなるというメリットもあります。

なお、今回紹介する方法は、無料版のはてなブログでもOKです。またスマホについてはレスポンシブデザインを適用していれば、PC画面と同じように表示されます。

※レスポンシブデザインについてはこちらの記事をご覧ください。

■タイトル下HTML用のコード

では、サンプルコードの紹介です。次のコードをコピーしてください。

<div id="menubar">
    <ul>
        <li><a href="http://abc.ne.jp/def/001.html">リンク1</a></li>
        <li><a href="http://abc.ne.jp/def/002.html">リンク2</a></li>
        <li><a href="http://abc.ne.jp/def/003.html">リンク3</a></li>
        <li><a href="http://abc.ne.jp/def/004.html">リンク4</a></li>
    </ul>
</div>

コピーしたコードは、グローバルメニューを構成する部品になりますので、タイトル下に配置します。ダッシュボードから「デザイン」メニューを開くと、スパナのマークのアイコンがありますので、それをクリックしてください。さらに「ヘッダ」をクリックして展開表示された「タイトル下」に、HTMLの編集欄がありますので、そこに先ほどコピーしたコードを貼り付けてください。

f:id:kay72234:20151117214542j:plain

コードの修正が必要なので、まだ編集欄は閉じないでくださいね。

■コードを修正します

続いて、貼り付けたコードを修正します。
「リンク○」の箇所は、画面上のメニューとして表示する文字列になります。主要なカテゴリの名前にしてみてください。
「http://~」の箇所はリンク先のURLです。ブラウザで自分のブログから各カテゴリのページを開き、アドレスバーに表示されたURLをコピペしてください。

なお、サンプルのコードはメニューの数は4つですが、表示したいメニューの数に合わせて増やしてください。

ここまでで「変更を保存する」を行い、実際にブログを開いてみてみましょう。

f:id:kay72234:20151117235829j:plain

まだ何もスタイルの指定を行っていませんので、ただのリンクが縦に並んでいるだけですね。

■デザインCSS用のコード

次はスタイルシートを使って、先ほど追加したグローバルメニューの部品のデザインを指定します。では、また次のコードをコピーしてください。

#menubar{
    width:100%;
}

#menubar ul{
    display:table;
    width:100%;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
}

#menubar li{
    display: table-cell;
    width:25%;
    padding:0;
    background-color: #800000;
}

#menubar li a{
    display: block;
    margin:0 auto;
    padding:5px;
    border: 0px solid #FFFFFF;
    text-decoration: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 12px;
}

#menubar li a:hover{
    background-color: #808000;
}


再びデザインメニューのスパナアイコへンをクリックすると、一番下に「デザインCSS」があります。そこでスタイルシートの編集開いて、コピーしたコードを貼り付けてください。

f:id:kay72234:20151117213023j:plain

再度「編集を保存する」を行い、もう一度ブログを確認してみましょう。

f:id:kay72234:20151117235858j:plain

これで、すっかり「グローバルメニュー」らしくなりました。

スタイルシートの解説

では、先ほどのスタイルシートのコードを解説いたします。

#menubar{
    width:100%;
}

#menubar ul{
    display:table;
    width:100%;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
}

#menubar li{
    display: table-cell;
    width:25%;
    padding:0;
    background-color: #800000;
}

まずは前半部分ですが、ポイントは「#menubar li」の箇所です。
「width」に25%を指定していますね。HTMLのサンプルコードではメニューを4つにしていたので、25%でちょうど均等の幅になります。メニューを5つにしたら、ここは20%にする等の調整をしてください。
「background-color」は、メニューの背景色の指定です。

続いて後半部分です。

#menubar li a{
    display: block;
    margin:0 auto;
    padding:5px;
    border: 0px solid #FFFFFF;
    text-decoration: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 12px;
}

#menubar li a:hover{
    background-color: #808000;
}

「#menubar li a」は、メニューの文字列に関するスタイル指定です。文字の色や境界線の幅・色など、いろいろと変更しながら実際の見た目がどう変わるか、試してみてください。

「#menubar li a:hover」では、メニューにマウスを当てた時の色を指定することができます。

ちょっと乱暴な解説で申し訳ありませんが…スタイルの指定方法は、見出し等と大きく変わりはありませんので、こちらの記事も参考してみてください。


■さいごに

いかがでしょうか?ブログタイトルとカラーリングを合わせたグローバルメニューを付けてみると、デザイン性がアップした気がしますよね。レスポンシブデザインを使っていると、スマホから見たときにも、はてなブログっぽさが全くなくなります。基本はサンプルコードをコピペしてから少しコードを修正すれば意外に簡単にできますので、一度お試しいただければと思います。


スポンサーリンク