ブログのちょこっとリニューアルにお役立ち記事の続き、
書いていきます
きのうの記事↓
ブログをちょっとリニューアル。
で、ヘッダー画像（タイトルの画像ね）を押すと、
トップに戻るようにする方法をご紹介しました
今日はそのヘッダー画像の下にある、
これ。
ヘッダー下で、メニューみたいになってるやつですね
これがあるだけで、ブログなのに一気にホームページっぽくなります
検索などでトップ以外の記事から読まれる方にも、
おすすめ記事やSNSをお知らせができるので
とっても便利ですよー
さて、ではやり方でっす。
sodateru.あみものやブログでは、ボタン画像を自分で作って、
背景に使っていますが、
画像を使わない簡単な方法もあります^^
①画像を使わない場合
下のコードを、CSS（スタイルシート）の一番下にコピペします。
（わざめーばさんのブログからお借りしてます）
/***************************************
ヘッダーメニューを設置する(V4)
by わざめーば http://ameblo.jp/wazameba/
***************************************/
/* ▼ 通常は変更不要 (ここから) ▼ */
.skinContentsArea {
position: relative;
}
#headerMenu, #headerMenu ul,
#headerMenu li, #headerMenu a {
margin: 0;
padding: 0;
background-color: transparent;
}
#headerMenu {
position: absolute;
line-height: 1.0;
overflow: visible;
}
#headerMenu ul.menu {
list-style: none;
overflow: visible;
}
#headerMenu ul.menu:after {
display: block;
clear: both;
content: ".";
height: 0px;
overflow: hidden;
visibility: hidden;
}
#headerMenu ul.menu li {
position: relative;
display: block;
float: left;
overflow: visible;
}
#headerMenu ul.menu>li {
border-style: none none none solid;
}
#headerMenu ul.menu>li:first-child {
border: 0 none;
}
#headerMenu ul.menu li a {
display: block;
width: auto;
white-space: nowrap;
overflow: hidden;
text-align: center;
background-repeat: repeat;
background-position: center center;
}
/* ▲ 通常は変更不要 (ここまで) ▲ */
/* ▼ メニューカスタマイズ (ここから) ▼ */
.skinContentsArea {
padding-top: 55px; /* ■設置スペース確保 */
}
#headerMenu {
top: 0px; /* ■上下位置調整 */
left: 0px; /* ■左右位置調整 */
}
#headerMenu ul.menu li {
font-size: 14px; /* ■文字サイズ */
height: 50px; /* ■ボタンの高さ(上下枠線を含む) */
line-height: 50px; /* ■ボタンの高さ(上下枠線の内側) */
}
#headerMenu ul.menu li {
width: 195px; /* ■ボタンの幅(第一ボタン以外) */
}
#headerMenu ul.menu>li:first-child {
width: 196px; /* ■ボタンの幅(第一ボタン) */
}
#headerMenu ul.menu>li {
border-width: 1px; /* ■区切り線の太さ */
border-color: #ffffff; /* ■区切り線の色 */
}
#headerMenu ul.menu li a {
color: #ffffff; /* ■文字色[白](通常時) */
font-weight: normal; /* ■太字[なし](通常時) */
text-decoration: none; /* ■下線[なし](通常時) */
background-color: #0044cc; /* ■背景色[濃い青](通常時) */
}
#headerMenu ul.menu li a:hover {
color: #ffffff; /* ■文字色[白](オンマウス時) */
font-weight: normal; /* ■太字[なし](オンマウス時) */
text-decoration: underline; /* ■下線[あり](オンマウス時) */
background-color: #66aaff; /* ■背景色[薄い青](オンマウス時) */
}
/*▲ メニューカスタマイズ (ここまで) ▲ */
色や線種などはあとで考えるとして、とりあえず保存しましょう
次に、フリースペースの編集を開きま～す。
ブログ管理のトップから、設定・管理メニューへ。
その中の左下、「フリースペースの編集」です
フリースペースに、以下のコードを貼り付けます。
<div id=\"headerMenu\"><!--
--><ul class=\"menu\"><!--
--><li><a href=\"#\" target=\"_blank\">メニュー１</a></li><!--
--><li><a href=\"#\" target=\"_blank\">メニュー２</a></li><!--
--><li><a href=\"#\" target=\"_blank\">メニュー３</a></li><!--
--><li><a href=\"#\" target=\"_blank\">メニュー４</a></li><!--
--><li><a href=\"#\" target=\"_blank\">メニュー５</a></li><!--
--></ul><!--
--></div>
フリースペースに何か書いてる方は、その下にコピペしてね
メニュー１～５を、それぞれ表示させたい名前に書き換えてください
例えばこのブログだと、
<div id=\"headerMenu\"><!--
--><ul class=\"menu\"><!--
--><li><a href=\"#\" target=\"_blank\"><font color=\"#FF1493\">amimonoya</font></a></li><!--
--><li><a href=\"#\" target=\"_blank\"><font color=\"#FF1493\">KNIT CAFE</font></a></li><!--
--><li><a href=\"#\" target=\"_blank\"><font color=\"#FF1493\">minne</font></a></li><!--
--><li><a href=\"#\" target=\"_blank\"><font color=\"#FF1493\">facebook</font></a></li><!--
--><li><a href=\"#\" target=\"_blank\"><font color=\"#FF1493\">christmas</font></a></li><!--
-->
</ul><!--
--></div>
となるわけです。
さてさて、こんな感じで入力を終えると、
メニューがくっつきました～
こちらはsodateruニットカフェのブログです
ブログをホームページとして使う！をテーマに、
色々と試しながらちょっとずつ作ってますので、
ぜひ参考にしてみてね
さて、このメニューだと、ボタンの色変えたいしー、
ヘッダー画像から左側が飛び出しちゃってカッコ悪いしー、
ヘッダー画像からちょっと離したいしー、
と、気になる箇所がいくつか出てきますね～
と、いうわけで変更したのがこちら。
/* ▼ メニューカスタマイズ (ここから) ▼ */
.skinContentsArea {
padding-top: 55px; /* ■設置スペース確保 */
}
#headerMenu {
top: 10px; /* ■上下位置調整 */
left: 0px; /* ■左右位置調整 */
}
#headerMenu ul.menu li {
font-size: 14px; /* ■文字サイズ */
height: 50px; /* ■ボタンの高さ(上下枠線を含む) */
line-height: 50px; /* ■ボタンの高さ(上下枠線の内側) */
}
#headerMenu ul.menu li {
width: 179px; /* ■ボタンの幅(第一ボタン以外) */
}
#headerMenu ul.menu>li:first-child {
width: 180px; /* ■ボタンの幅(第一ボタン) */
}
#headerMenu ul.menu>li {
border-width: 1px; /* ■区切り線の太さ */
border-color: #ffffff; /* ■区切り線の色 */
}
#headerMenu ul.menu li a {
color: #ffffff; /* ■文字色[白](通常時) */
font-weight: normal; /* ■太字[なし](通常時) */
text-decoration: none; /* ■下線[なし](通常時) */
background-color: #ff69b4; /* ■背景色[hotpink](通常時) */
}
#headerMenu ul.menu li a:hover {
color: #ffffff; /* ■文字色[白](オンマウス時) */
font-weight: normal; /* ■太字[なし](オンマウス時) */
text-decoration: underline; /* ■下線[あり](オンマウス時) */
background-color: #66aaff; /* ■背景色[薄い青](オンマウス時) */
}
/*▲ メニューカスタマイズ (ここまで) ▲ */
変更したのは、青字の部分です。
ボタンの幅は、計算するのが面倒なのでプレビューを見ながら、
適当に減らして合わせました
色はHTML色見本とかで検索すると、いっぱい出てきます。
これが見やすいかな～
原色大辞典
というわけで、ひとまずシンプルなメニューが完成～
結構面倒な作業もあるけど、
基本はコピペなので挑戦してみてください
あと、CSSが改造したけど何にも変わってないよー！！っていう方。
ブラウザの、「更新」ボタンを押してみてね♡
では、続きはまたあした