オリジナルメニューバーの作り方【基本編】

Bloggerのパーツも揃ってきました。 Ardor(@ArdorOnline)です。今回はブログ上部にタブメニューを配置する方法をご紹介します。

タブメニューは、1から作成すると手間がかかります。リストをCSSで横に並べたり動きをつけたりと、カスタマイズし出すと結構なコードになります。 Bloggerではテンプレートに既に定義があるので、作るのはとても簡単です。

CSS定義の確認

まずはテンプレートに定義が用意されているか確認してみます。
ページ設定画面からタブメニューを表示できます。

ページ設定画面

「ページ表示形式」で「上部のタブ」を選択するとタブメニューが表示されます。ただし、表示されるのはホームとページへのリンクだけです。

CSSの確認

Google Chromeなら「F12」を使うと設定されているCSSが確認できます。
スタイルは「menu」で指定されるのがわかります。

オリジナルメニューには、「HTML/JavaScript」ガジェットを追加して記述します。追加場所は、「Header」の下です。

追加する内容は、HTMLタグでリストです。 <ul>タグと<li>タグで作成します。

記述は次の通りです。

<ul id="menu">
<li><a href="URL">Home</a></li>
<li><a href="XXXXX">XXXX</a></li>
<li><a href="XXXXX/p/sitemap.html">SiteMap</a></li>
</ul>

ポイントは、<ul>タグにstyleの設定です。
先ほど調べたときの「menu」を指定します。

このようにオリジナルメニューを作成すれば、ページ以外のリンクも作成できるので、便利です。

いかがでしたか？
メニューを自作すれば、見せたいページへの誘導や記事一覧を配置するのも自由です。オリジナルメニューを作成して、ブログをより使いやすくカスタマイズしてみては如何でしょうか？

最後までお読み頂きありがとうございます。