こんにちはデザイナーズです。

アフィリエイターさんの中にはファンブログを使って活動してる人も多いですよね。
記事を投稿するのに慣れてきたらブログのデザインを自分流にカスタマイズしてみてはいかがでしょうか？
オリジナルのデザインにすると更新する気もアップ

今までもヘッダーやサイドバーの変更の方法を紹介しているので参考にしてみてください！

ファンブログでオリジナルブログを作ろう！～前編～
ファンブログのサイドバーの見出しを変更しよう

そして、今回はご要望の多いブログにメニューバーを追加する方法を紹介します！


↑こちらのようなメニューを追加します。
htmlソースを編集するので、作業前には必ずバックアップをとってくださいね

今回の例ではテンプレートの「レモン」を使用しました！

ＣＳＳを追加する

まず、CSSを追加します。
ファンブログの「デザイン」からテンプレートタイトルか、CSSの編集をクリックして編集画面へ行きます。


そして、ソースの一番下に↓のソースを入れ込みます。

/*  メニュー  */
ul#globalMenu {
	width:100%;
	display:table;
	table-layout:fixed;
	margin:10px 0 20px 0; /*メニューの上下の隙間*/
	background:#fcc712; /*メニューの背景*/
}

ul#globalMenu li{
	display:table-cell;
	text-align:center;
	font-weight:bold; /*メニュー文字の太さ*/
	border-left:2px dotted #fde90c; /*メニューの境界線*/
}

ul#globalMenu li a{
	display:block;
	padding:10px; /*メニューの幅*/
	color:#690d0d; /*メニュー文字色*/
	background:#fcc712; /*メニュー背景*/
}
ul#globalMenu li a:hover{background:#fc9112; /*カーソルを当てたときの背景*/}
ul#globalMenu li:first-child{border:none;}

色や背景など自分のブログに合うカスタマイズにしてみてください。

CSSの知識が必要になりますが、注釈部分を自分好みのものに変更していろいろ試してみてくださいね！

これで保存してCSSは完了！！

htmlを編集する

次にhtmlにソースを入れ込みます。
今度は「デザイン」から「HTMLの編集」へ行き、「HTMLの追加」をクリックして編集画面へ飛びます。



場所は
<div id="header">
<% content_header %>
</div>
のすぐ下に入れるとヘッダーの下に表示されます。

<ul id="globalMenu">
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>

「メニュー」に好きなテキスト、「#」にリンクをいれてください。

そして保存をするとメニューが出現します！！

結構簡単ですよね
今回は画像を一切使わないデザインでしたが、背景に画像を引いたりいろいろ工夫できます！

ブログだけでなく、サイトにも応用できるソースなのでぜひ活用してみてくださいね！

他にも基本的なCSSの使用方法はこちらで説明してますので初心者の方はこちらからがオススメです


カスタマイズして素敵なアフィリエイトサイトに育てて行ってくださいね

エーハチレビュー部では毎月レビューコンテストを行っています。
良い記事が書けたらこちらで腕試ししてみましょう！