5W1H

1.カスタムプラグインに下記コードを記述する。

下記コードを、【ブログ環境設定】－【カスタムプラグインの登録】に記述－【記事一覧の上部に表示】を選択－【確認】ボタンを押下すればメニューは設置されます。（ただし、このままではアイコンは表示されません。）

<table class="customMenu" border="1" style="width:100%;">
<tr>
<td class="cmhm"><a href="<%BlogUrl%>">ホーム</a></td>
<td class="cmsm"><a href="<%BlogUrl%>sitemap.html">サイトマップ</a></td>
<td class="cmtc"><a href="<%BlogUrl%>tag">タグクラウド</a></td>
<td class="cmal"><a href="<%BlogUrl%>album.html">アルバム</a></td>
<td class="cmmp"><a href="<%BlogUrl%>map.html">マップ</a></td>
</tr>
</table>

2.カスタマイズ画面でスタイルシートに下記コードを記述する。

下記コードを、【テンプレート】－【カスタマイズ】－【スタイルシート】の一番下に記述します。これでアイコンが表示されます。

/* ==== 記事上部メニュー ==== */

.customMenu {
 width: 100%;
 border-collapse: collapse;
 border: 2px solid #666666;
 }

.customMenu td a {
 display: block;
 font-size: 16px;
 font-weight: bold;
 }

.customMenu td.cmhm a {
 background: url(//img01.hamazo.tv/usr/shigexworks/icon_home.jpg) no-repeat 4px center;
 padding: 4px 0 4px 22px;
 }

.customMenu td.cmsm a {
 background: url(//img01.hamazo.tv/usr/shigexworks/ico_sitemap.png) no-repeat 4px center;
 padding: 4px 0 4px 22px;
 }

.customMenu td.cmtc a {
 background: url(//img01.hamazo.tv/usr/shigexworks/ico_tag.png) no-repeat 4px center;
 padding: 4px 0 4px 22px;
 }

.customMenu td.cmal a {
 background: url(//img01.hamazo.tv/usr/shigexworks/ico_album.png) no-repeat 4px center;
 padding: 4px 0 4px 22px;
 }

.customMenu td.cmmp a {
 background: url(//img01.hamazo.tv/usr/shigexworks/ico_map.png) no-repeat 4px center;
 padding: 4px 0 4px 22px;
 }

.customMenu td a:hover {
 background-color: #ddFFFF;
 }

以上です。

備考

• カスタムプラグインに記述した<td>～</td>の行の順番を変えることでメニューの表示順が変わります。（コードの上→下＝メニューの左→右です。）

【記事上部にメニューを設置する方法】について分からないことがあれば、コメントにて問い合わせしてください。

また、その他のブログカスタマイズに関する質問、および、ブログカスタマイズの依頼は、サイドバーの【メッセージを送る】ボタンよりご連絡ください。