はてなブログにグローバルメニュー(カテゴリーリンク)を設置する方法
みなさん、こんばんは。
このブログではほとんどそうしたカスタマイズをして来なかったのでたまにはブログの見た目にも気を遣ってみようかなと思います。
今日はブログタイトル下にグローバルメニュー(カテゴリーリンク)を作っていきたいと思います。
グローバルメニューの設置方法
CSS-Generator
ネットで調べてみるといろいろカスタマイズできるようですが、おそらく一番簡単な設定方法はこちらのサイトを使っての設定かと思います。
上記サイトでは枠や余白、背景色に文字サイズなどなど様々な設定をプレビューで表示でき、その設定でのCSSが生成されます。
ヘッダーにHTMLをペースト(貼り付け)し、CSSをコピーして、はてなブログの設定画面のデザインCSSの欄にペーストすればOKという流れです。
やってみましょう。
CSSを貼り付ける
まずは上記サイトでグローバルメニューのデザインを決めます。
マウスで色や文字の大きさ、枠や背景色など自分のブログに合うようなデザインにします。
できたら【生成されたCSS】の下の部分にある【クリップボードにコピー】をクリック。
これでコピーされます。
そうしたらそのコピーされたものをはてなブログ設定画面の【デザインCSS】の欄に貼り付けます。
はてなブログの設定画面の左側にあるメニューから【デザイン】をクリック。
スパナマークの【カスタマイズ】をクリック。
一番下にある【デザインCSS】にコピーした【生成されたCSS】を貼り付けます。
貼り付けたら【変更を保存する】をクリック。
これでデザインの方は設定されました。
次は骨組みとなるHTMLのほうを見ていきます。
HTMLを貼り付ける
上記サイトの一番下にある【カテゴリボタンのHTML】をメモ帳などにコピペしてください。
<nav class="topCategory">
<a href="html://example.com">リンクA</a>
<a href="html://example.com">リンクB</a>
<a href="html://example.com">リンクC</a>
<a href="html://example.com">リンクD</a>
</nav>
コピペしたらこれを自分のブログに対応するように変更していきます。
<a href="html://example.com">リンクA</a>
文字列の一部分を抜き出してみました。
html://example.com は表示したいページのURL
リンクA の部分はボタンに表示される文字
例えば、トップページを表示するボタンを作りたいなら、
html://example.com の部分は https://○○○○○.hatenablog.com
リンクA の部分には Home もしくは Top とでも表記しておきましょう。
同様にして、リンクBには好きなカテゴリー名、html://example.com の部分にはそのカテゴリーのURLを入力していきます。
5つ以上ボタンを作りたい場合は、<a href="html://example.com">リンクA</a> をコピーして
<nav class="topCategory">
<a href="html://example.com">リンクA</a>
<a href="html://example.com">リンクB</a>
<a href="html://example.com">リンクC</a>
<a href="html://example.com">リンクD</a>
<a href="html://example.com">リンクA</a>
</nav>
以上のように追加して設定していけばボタンを増やせます。
できあがったら、ヘッダー下に貼り付けます。
はてなブログの設定画面の左側メニューの中の【デザイン】をクリック。
スパナマークの【カスタマイズ】をクリックし、【ヘッダ】をクリック。
メニューが開きます。その中から【タイトル下】の欄に編集したHTMLを貼り付けます。
貼り付けたら【変更を保存する】をクリック。
これでグローバルメニューがブログタイトル下に完成されます。
グローバルメニュー設置方法まとめ
長くて分かりづらいかもしれませんが、カテゴリーリンクをブログタイトル下に作る一番簡単なやり方だと思います。
グローバルメニューを作ってみたい設置してみたい方は、是非、参考にしてみてください。