はじめに
このブログにも設置してありますが、過去記事や読みたい内容をすぐ解るように、読者様のことを考えて目次的なメニューで利便性を向上させましょう！普通のグローバルメニューやグローバルナビ、横メニューと呼ばれる物も便利ですが、読者様のことを考えれば、一覧として目次のように見て解るので絶対便利だと思います。
目次メニューついて
イメージ
このブログの様にタブは付いていない分、簡単に設置できるようになっています。
縦スクロールが付いているので多くのテーマ分けや記事を紹介できます。
※ここで紹介する目次メニューは、このブログで紹介している「アメブロテンプレート（改良β版） 」に合わせてありますので、他のテンプレで利用する場合はCSSやHTMLを変更する必要があります。
目次メニュー設置
この目次メニューには「メッセージボード」と「CSS編集」で行います。①メッセージボードにHTMLを下記からコピペ。※フリースペースではないです。
②CSS編集画面に下記CSSを最下部にコピペ。
の２手順で簡単です。
①メッセージボードにコピペ
※改行するとデザインが崩れるので「
<!--この間-->」で改行して下さい。<div style="width: 250px; float: left;"><!--
--><h3 style="padding-top: 3px; padding-left: 12px;"><a href="テーマのURL">テーマタイトルなど</a></h3><!--
--><ul><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li></ul><!--
--><h3 style="padding-top: 3px; padding-left: 12px;"><a href="テーマのURL">テーマタイトルなど</a></h3><!--
--><ul><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li></ul><!--
--><h3 style="padding-top: 3px; padding-left: 12px;"><a href="テーマのURL">テーマタイトルなど</a></h3><ul><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li></ul></div><!--
--><div style="width: 250px; float: left; padding-left: 10px;"><h3 style="padding-top: 3px; padding-left: 12px;"><a href="テーマのURL">テーマタイトルなど</a></h3><!--
--><ul><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li></ul><!--
--><h3 style="padding-top: 3px; padding-left: 12px;"><a href="テーマのURL">テーマタイトルなど</a></h3><!--
--><ul><li><a href="記事のURL">記事のタイトル記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li></ul><!--
--><h3 style="padding-top: 3px; padding-left: 12px;"><a href="テーマのURL">テーマタイトルなど</a></h3><!--
--><ul><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li><!--
--><li><a href="記事のURL">記事のタイトル</a></li></ul></div>②CSS編集画面で最下部にコピペ
/* ▼▼メッセージボードメニュー目次ここから▼▼*/
.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border:1px solid #dddddd;/*メッセージボード枠のライン*/
height:350px;/*メッセージボード枠の縦幅*/
overflow:auto;
box-shadow:inset 0 0 10px rgba(0,0,0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.3);/*ボックス影*/
}
.skinMessageBoard a{
font-size:12px;/*リンク文字サイズ*/
line-height: 1.5;/*リンクの間隔*/
}
.skinMessageBoard2{}
.skinMessageBoard3{
padding:16px 0px 16px 11px;/*メッセージボード内枠余白*/
}
/* ▲▲メッセージボードメニュー目次ここまで▲▲*/