1. TOP
  2. アメブロカスタマイズ
  3. ナビゲーションのアメブロカスタマイズ・横(5つのボタンを付ける)(新CSS編集デザイン)

ナビゲーションのアメブロカスタマイズ・横(5つのボタンを付ける)(新CSS編集デザイン)

お知らせ(2016年3月8日追記) 2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。 新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次

>>こちらもどうぞ

アメブロのトップに5つのナビゲーションをつけるアメブロカスタマイズ

今回はアメブロに5つのナビゲーションバーを付けるカスタマイズを解説します。ナビゲーションとは以下のイメージのようにアメブロトップにホームページのようなボタンを置く設定のことを言います。

image-11098306103-11634831378

ナビゲーションを置く理由

ブログナビゲーションを置くメリット。それはあなたが読者の方に見てもらいたいページをアピールすることができるということです。ナビゲーションを置くことで、読者目線のブログにつながります。

例えば飲食店ならば、「アクセス」「メニュー」「ご予約・お問合わせ」「こだわり」などのボタンを置けばあなたのブログの読者に、お店の基本情報を意図的にしってもらえるきっかけとなるわけです。

それでは設置方法を手順を追って解説します。

5つのナビゲーションの設置方法 手順は8段階♪

まず今回は、コピペを多用します。ソースコードをコピーして貼り付ける作業を手順にそって行えばナビゲーションバーを付けることができますので、ついてきてくださいね。ちなみに・・・4つのボタンの場合はこちらのコラムを参考にしてみてください

設定手順

では早速設定してみましょう。

1.マイページ(ブログの管理画面)の左上にある「クイックリンク」をクリック

 

2.メニューの中の「サイドバーの配置」をクリック

image-11098306103-11431799767

 

3.サイドバーの配置画面で、「フリースペース」という機能が「使用する機能」の中に含まれていることを確認する。

「使用しない機能」にある場合は、それを「使用する機能」の中にドラックして含める。

image-11098306103-11431799766

 4.そのまま上にある「フリースペースの編集」のボタンをクリック

image-11098306103-11431820674

5.フリースペースの編集画面に、以下のコードをコピーして貼り付けてください
<ul id="global_navi"><li id="navi1"><a href="http://ameblo.jp/あなたのブログID/" title="HOME">HOME</a></li><li id="navi2"><a href="http://profile.ameba.jp/あなたのブログID/" title="プロフィール">プロフィール</a></li><li id="navi3"><a href="http://blog.ameba.jp/reader.do?bnm=あなたのブログID" title="このブログの読者になる">このブログの読者になる</a></li><li id="navi4"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=あなたのブログID" title="メッセージ">メッセージ</a></li><li id="navi5"><a href="http://amember.ameba.jp/amemberRequest.do?oAid=あなたのブログID" title="アメンバーになる">アメンバーになる</a></li></ul>

上記のコードを見てわかるのは、navi1~5までがあることです。そして、それぞれにHOME,プロフィール,このブログの読者になる,メッセージ,アメンバーになるとあります。これがナビゲーションのボタンとなるものです。このナビゲーションタイトルを自分流に変えれば、オリジナルナビゲーションを作成することができます。

そしてもう一つ。

a href=に続く、http~のアドレスですが、ここにはあなたのサイトの訪問者がサイトに訪れた時の、リンク先URLを設定するものになります。上記例の場合は、アメブロのプロフィールやメッセージを設定しましたので、あなたのブログIDというところに、あなたのIDを挿入すればこのままのコードを使うことができます。とりあえず作ってみようという場合は、上記のIDを変更して試してみてください。

それと・・・重要なことですが、このコードは改行しないでください。改行が入ると、ブログのレイアウトに影響がでますので。コピーして貼り付けるコードは必ず、改行なしのものを使ってください。

実際に上記コードを貼り付けた画面は以下のようになります。(参考)

image-11098306103-11431886820

6.CSS編集用画面を開いて下さい。そして「(3-1) ボディ(全体)」の部分に以下のコードを追記してください(赤い文字が追記箇所)

/* (3-1) ボディ(全体)
--------------------------------------------*/

/* skinBody ボディ */
.skinBody{background-color:#FFFFCC;}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}

/* skinFrame ブログ全体を囲うエリア */
.skinFrame{} /* ヘッダーバナー含む */
.skinFrame2{
width:980px;margin:auto;position:relative;}/*ナビゲーションの基準点を置く*/

 

赤字で書いたコードはナビゲーションの位置座標を置くための基準点です。これは忘れずに記述してください。この基準点を設置しないとナビゲーションの配置がうまくいきません。

 

7.次にCSS編集画面のスタイルシートの中の「/* その他、拡張があれば記述 */」という部分に以下のコードをコピーペーストしてください。(スタイルシートの一番下です。)

/* その他、拡張があれば記述 */

/*ナビゲーション設定ここから↓*/
ul#global_navi{width:980px;
overflow:hidden;
position:absolute;
top:100px;/*①ナビゲーショの位置座標の設定箇所(縦方向)。数値を大きくすると下の下がる。ヘッダー画像があるときはその高さによって調整すること*/
left:00px;/*②ナビゲーションの位置座標の設定箇所(横方向)。数値を大きくすると右に移動*/
}

ul#global_navi li{float:left;
height:30px;
line-height:30px;
display:block;
border:solid 1px #cccccc;/*③ナビゲーションの枠線の色の設定箇所*/
text-align:center;
font-size:20px;/*④ナビゲーションの文字サイズ*/
font-weight:bold;
}

ul#global_navi li a{
display: block;
overflow: hidden;
height: 30px;
line-height:30px;
background-color:#ffffff;/*⑤ナビリンクの背景色の変更,#ffffffのカラーコードを変更して設定する*/
color:#cccccc;/*⑥ナビリンクの文字色の変更,#ccccccのカラーコードを変更して設定する*/
}

#navi1 a { width:194px; background-position:0 0;}
#navi2 a { width:194px; background-position:-196px 0;}
#navi3 a { width:194px; background-position:-392px 0;}
#navi4 a { width:194px; background-position:-588px 0;}
#navi5 a { width:194px; background-position:-784px 0;}

#navi1 a:hover { width:194px; background-position:0 -30px;}
#navi2 a:hover { width:194px; background-position:-196px -30px;}
#navi3 a:hover { width:194px; background-position:-392px -30px;}
#navi4 a:hover { width:194px; background-position:-588px -30px;}
#navi5 a:hover { width:194px; background-position:-784px -30px;}

#navi1 a:hover,#navi2 a:hover,#navi3 a:hover,#navi4 a:hover,#navi5 a:hover{
background-color:#CFCFCF;/*⑦ナビリンクのマウスを置いたときの背景色の変更,#CFCFCFのカラーコードを変更して設定する*/
color:#ffffff;}/*⑧ナビリンクのマウスを置いたときのリンク文字の変更,#ffffffのカラーコードを変更して設定する*/

/*ナビゲーション設定ここまで↑*/

 

設定時の注意点

赤字の①の部分を見てください。緑で100pxとありますね。

ここは、あなたがトップ(ヘッダー)の画像があってそれを使うのならば、その画像の高さで合わせてください。ちなみにこのブログで紹介したイメージ画像(チューリップの画像)では420pxと設定しました。画像なしで設定する場合はこのままで構いません。

ヘッダー画像を設定する方法は別コラムで解説していますのでそちらもご活用ください。

 

8.次は 「(3-2) ブログヘッダー」の部分に以下コードを追記してください(赤い文字が追記箇所)これが最終段階ですからね☆

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}

/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
padding-bottom:4px;
}

/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{}

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{

height:100px ;/*ヘッダーの高さの設定(ヘッダー画像がある場合はその高さにあわせること)*/
margin-bottom:50px;
}

 

設定時の注意点

緑の文字の部分「height:100px」を見てください。

ここもさきほど同様、あなたがトップ(ヘッダー)の画像があってそれを使うのならば、その画像の高さで合わせてください。画像を設定しない場合はこのままでも構いません。

これでナビゲーションの設定は終わりです。

最後に・・・
手順7のコードを修正してナビゲーションをさらにカスタマイズする方法

手順7でコピーペーストしたナビゲーションのコードにある赤字で記載した説明文にそって、緑の文字の部分を修正すれば、オリジナルのナビゲーションができます。

以下に上記コードの解説編を掲載していますのでこちらを参考にコードを変えてみてはいかがでしょうか?

お疲れさまでした。

こちらを押してアメブロカスタマイズガイドを見てみる

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ