人気ブログランキングの応援
をして頂けると励みになります。
以前、アメブロのヘッダーメニューの設置について
記事を投稿しましたが、設置方法を
具体的に教えて欲しいという
問い合わせが何件かありました。
そこで、今回は、その設置の仕方を
具体的に解説していこうと思います。
方法は、幾通りもありますが、
その一つを取り上げます。
ヘッダーメニュー画像の作成画像編集ソフトgimpを使って、
下図のように、ヘッダーメニュー用画像
を作成します。
任意の画像用フォルダに保存しておきます。
アメブロに上記の画像をアップロード通常の記事を書く欄で上記の画像をアップロードし、
画像のURLをメモ帳にコピーしておきましょう。
例えば、次のような感じです。
CSSの追加CSSの編集画面を表示し、
次のように、CSSを追加します。
ul#gnavi {
position :absolute;
top :259px; /* ヘッダー画像の高さ */
width :760px; /* ヘッダーメニューの幅 */
}
ul#gnavi li {
float :left;
text-align :center; /* メニュー文字揃え */
}
ul#gnavi li a {
display :block;
height :53px; /* ヘッダーメニューの高さ */
width :152px; /* ヘッダーメニューの１つの幅 */
background :url(上記（２）で保存したヘッダーメニューのURL) no-repeat;
}
ul#gnavi li a span {
display :block;
padding-top :7px;
text-indent :-9999px; /* テキストの非表示*/
}
/* ヘッダーメニュー1 */
ul#gnavi li.menu1 a {
background-position:0 0;
}
ul#gnavi li.menu1 a:hover {
background-position:0 -53px;
}
/* ヘッダーメニュー2 */
ul#gnavi li.menu2 a {
background-position:-152px 0;
}
ul#gnavi li.menu2 a:hover {
background-position:-152px -53px;
}
/* ヘッダーメニュー3 */
ul#gnavi li.menu3 a {
background-position:-304px 0;
}
ul#gnavi li.menu3 a:hover {
background-position:-304px -53px;
}
/* ヘッダーメニュー4 */
ul#gnavi li.menu4 a {
background-position:-456px 0;
}
ul#gnavi li.menu4 a:hover {
background-position:-456px -53px;
}
/* ヘッダーメニュー5 */
ul#gnavi li.menu5 a {
background-position:-608px 0;
}
ul#gnavi li.menu5 a:hover {
background-position:-608px -53px;
}
フリースペースにヘッダーメニュー用のHTMLを入力下記のHTMLをサイドバーのフリースペースに入力します。
<ul id="gnavi"><li class="menu1"><a href="リンクURL"><span>トップ</span></a></li><li class="menu2"><a href="リンクURL"><span>ﾌﾟﾛﾌｨｰﾙ</span></a></li><li class="menu3"><a href="リンクURL"><span>記事一覧</span></a></li><li class="menu4"><a href="リンクURL"><span>読者登録</span></a></li><li class="menu5"><a href="リンクURL"><span>お問合せ</span></a></li></ul>
上記の４つの手順で、簡単にヘッダーメニュー
（グローバルメニューともいいます）を
設置することができます。
自分でするのが難しいけど
メニューを設置したい方は、
人数限定で無料で設置致しますので、
こちらまでお申し込みください。
↓↓↓
申し訳ございませんが、只今、申込者数が３名を超えましたので、
「無料お申込み」は、終了させて戴いております。
尚、ヘッダーメニュー作成をご希望のお方は、
１件に付き、三千円にて
作成させて戴きますので、よろしくお願い致します。
こちらから、お申込みください。
↓↓↓
今回は、以上です。
最後まで読んでいただき、
ありがとうございました。
少しでもお役に立ちましたら、
応援お願いします!!
