246blog

2nd Life from46

HTMLのコピペでグローバルメニューを設置する(はてなブログテーマ利用)

グローバルメニューとは

 ブログは記事を羅列した構成となっているので、少しづつ記事が蓄積されてくるとグローバルメニュー(基本的にはブログ記事の全ページで主にブログのタイトル下に表示されて、閲覧者を誘導する仕組み、はてなブログではナビゲーションメニューとも記載されている)を設置したくなってきます。

 また、これまでに「プライバシーポリシー」や「お問い合わせフォーム」を作成してきましたが、ブログの分かりやすい場所にリンク等が表示されていないと、記事に埋もれてしまい本来の目的が果たせなくなってしまいます。

はてなブログの「テーマ」に機能が組み込まれている

 筆者はブログテーマに「Naked」を利用していますが、このテーマの作者のブログにグローバルメニューの設置の仕方が掲載されていたので、やってみます。

Theme Naked Blog

 この”イケてる”テーマには、デフォルトでCSSが組まれていて、例示されているHTMLを自身のブログに合うように少しだけ修正したものをブログの設定画面に貼り付けるだけで簡単にグローバルメニューを設置することができます(一般的にグローバルメニューのようなプログラムをブログで動作させるには、HTMLとCSSの二つの命令文が必要とされています)。

 HTMLの修正箇所は、以下3点ぽっきり。

・メニューの表示名の変更:デフォルトでは「リンク1~5」とされています

・メニュータイトルに対応するURLをリンク:デフォルトでは「URL1~5」とされています

・表示するメニューの個数の変更:デフォルトでは5つでセットされています

 修正したHTMLはメモ帳等にコピペして保管しておくのが良いと思います。

修正したHTMLを管理画面で貼り付けて完成!

 管理画面の「デザイン」から「カスタマイズ」タブを選択し、「ヘッダー」の項目、「ブログタイトル下」欄に自身のブログ用にカスタマイズしたHTMLを貼り付けます。

「カスタマイズ」タブ「ヘッダー」項目

 筆者は、「プライバシーポリシー」と「お問い合わせフォーム」をメニューとしてブログに常時表示させておくこととしました。見事に完成!

グローバルメニューが表示されたトップ画面