mitopi はてなブログ版

肩こりのお悩み中心にアラサー女子の興味あることまとめます。

はてなブログにドロップダウン付グローバルメニューを設置したい

はてなブログにグローバルメニューを設置したい

徐々にこのブログの記事数も増えてきたため、

 

そろそろはてなブログにグローバルメニューを設置することで

訪問者にとって記事を選びやすい仕様に改良したい(カスタマイズしたい)

と考えまして調べたところ、

 

「スキマモノート」というブログに大変便利なコードが掲載されているのを発見しました。

そこから参照させていただきました。

www.sukinamonote.com

 

グローバルメニューを設置した手順

⓵現在のカテゴリを整理する

先にグローバルメニューにはどういったカテゴリを設置したいのか整理します。

 

[ダッシュボード]→[カテゴリ]で現在設定しているカテゴリの一覧とカテゴリ内の記事数が()内に表示されていることが確認できます。

 

そのカテゴリ一覧をTerapadなどに貼り付けて

それぞれ「親」カテゴリにしたいのか「子」カテゴリにしたいのか整理します。

※親テーマを5つ以上にすると勝手に改行されてしまうので、親カテゴリは4個以下にする必要があります。

 

各カテゴリのURLをブログから拾ってきて(その方法は後日追記します)カテゴリの右側にリストアップしておきます。

 

②コードを自分のブログのカテゴリ名&URLに書き換える

スキマモノートに掲載のHTMLコードを直接、所定の場所(タイトル下)に貼り付けるとブログ上の表記も「メニュー1」「メニュー2」となってしまうので、これを自分のブログのカテゴリ名に置き換える必要があります。

 

まず、スキマモノート中のコードをTerapad(メモ帳では改行が崩れます)に貼り付け、「メニュー1」「メニュー2」となっているところに⓵でリストアップした「親」カテゴリ名を記載、「#」の欄にジャンプ先URLを記載します。

 

子カテゴリも同じようにカテゴリ名を<ul></ul>内の部分に記載します。

(数が足りなければ<li></li>を付け足すと増えます)

 

 

ここまでで自分のブログに合ったコードが完成します。

 

③タイトル下HTMLを編集する方法

②で編集したHTMLコードをはてなブログのHTMLに反映させます。

[ダッシュボード]→[デザイン][カスタマイズ]

を開いて「ヘッダ」をクリックすると「タイトル下」という項目があります。

ここを変更することで上部のヘッダ部分の表示に反映されたことがわかります。

f:id:EnjoyFreeApp:20170709083213p:plain

 

④デザインCSSを編集する方法

次にCSSですが、[ダッシュボード]→[デザイン][カスタマイズ]

を開いて下の方にある「デザインCSS」という項目を選択し、一番下にコードを貼り付けることでデザインが下のように変わります。

f:id:EnjoyFreeApp:20170709083216p:plain

⑤「変更を保存する」ボタンをクリックする

さいごに「変更を保存する」ボタンを押すのを忘れずに!

 

私は以上の手順でグローバルメニューを設置することに成功しました。