Random Life Blog

日々のあれこれ

はてなブログにグローバルメニュー(カテゴリーリンク)を設置する方法

スポンサーリンク

グローバルメニューを設置する方法

グローバルメニューを設置する方法

みなさん、こんばんは。

はてなブログではHTMLやCSSをいじれる項目があります。

このブログではほとんどそうしたカスタマイズをして来なかったのでたまにはブログの見た目にも気を遣ってみようかなと思います。

今日はブログタイトル下にグローバルメニュー(カテゴリーリンク)を作っていきたいと思います。

 

グローバルメニューの設置方法

CSS-Generator

ネットで調べてみるといろいろカスタマイズできるようですが、おそらく一番簡単な設定方法はこちらのサイトを使っての設定かと思います。

CSS-Generator

上記サイトでは枠や余白、背景色に文字サイズなどなど様々な設定をプレビューで表示でき、その設定でのCSSが生成されます。

ヘッダーにHTMLをペースト(貼り付け)し、CSSをコピーして、はてなブログの設定画面のデザインCSSの欄にペーストすればOKという流れです。

やってみましょう。

 

CSSを貼り付ける

まずは上記サイトでグローバルメニューのデザインを決めます。

マウスで色や文字の大きさ、枠や背景色など自分のブログに合うようなデザインにします。

できたら【生成されたCSS】の下の部分にある【クリップボードにコピー】をクリック。

これでコピーされます。

そうしたらそのコピーされたものをはてなブログ設定画面の【デザインCSS】の欄に貼り付けます。

 

f:id:samada:20190508201603p:plain

はてなブログの設定画面の左側にあるメニューから【デザイン】をクリック。

 

f:id:samada:20190508201625p:plain

パナマークの【カスタマイズ】をクリック。

 

f:id:samada:20190508201649p:plain

一番下にある【デザインCSS】にコピーした【生成されたCSS】を貼り付けます。

 

f:id:samada:20190508201706p:plain

貼り付けたら【変更を保存する】をクリック。

これでデザインの方は設定されました。

次は骨組みとなる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>

 

以上のように追加して設定していけばボタンを増やせます。

 

できあがったら、ヘッダー下に貼り付けます。

 

f:id:samada:20190508201917p:plain

はてなブログの設定画面の左側メニューの中の【デザイン】をクリック。

 

f:id:samada:20190508201625p:plain

 

パナマークの【カスタマイズ】をクリックし、【ヘッダ】をクリック。

 

f:id:samada:20190508202016p:plain

メニューが開きます。その中から【タイトル下】の欄に編集したHTMLを貼り付けます。

 

f:id:samada:20190508202033p:plain

貼り付けたら【変更を保存する】をクリック。

これでグローバルメニューがブログタイトル下に完成されます。

 

グローバルメニュー設置方法まとめ

長くて分かりづらいかもしれませんが、カテゴリーリンクをブログタイトル下に作る一番簡単なやり方だと思います。

グローバルメニューを作ってみたい設置してみたい方は、是非、参考にしてみてください。

 

randamlife.hatenablog.com