アメブロdeアクセスアップ

アメブロ カスタマイズメニューバーの設置方法 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:プチカスタマイズ

アメブロのカスタマイズです。

だんだんカスタマイズも上達してくると、
難易度が、ちょっと高いものへの挑戦!!

 

ということで、ヘッダー下にメニューバーを設置してみましょう。

 

 

 

 

 

 

 

アメブロのデザインスキンでは、
メニューバーなどは、ついていせんよね。

 

 

メニューバーって必要なのか?どうなのか?

 

 

 

それは、ブログのテーマによっても違います。

 

 

 

ビジネス用のブログならば、読者さんを誘導するのに
メニューバーは必要です。

 

 

日記ブログなどは、必要ないかもしれません。

 

 

 

メニューバーの項目も、あまり多いと読者さんにとっては、
かえって、迷わせてしまうこともありますので、
だいたい5個~7個くらいがいいですね。

 

 

今回は、CSS変更が不可能なテンプレートでも実験してみました。

 

 

CSS編集可能なスキンデザインの設置方法は、
こちらで詳しく書いていますので、参考にしてくださいね。
メニューを均等に設置する方法

 

 

 

以前ちょっと実験で、
均等幅のメニュー項目表示ではなく、
メニューの表示をさせるように、作ってみました。
こんな感じね。

 

リストメニュー

 

 

メニュー項目が少ない場合は、こんな感じでも充分だと思いますし、かえってこの方が、バランス的には美しい・・・・
と思っています。

 

 

 

メニュー項目が多くても、この方がいいかもしれませんが、
均等に、他のブログでもやっている感じ(?)にしたいという方も、いらっしゃると思うので、メニュー項目幅を均等にしたのが、
こんな感じね。

 

リストメニュー変更後

 

 

いいでしょう?

 

さぁ~挑戦!!

 

 

hana2 メニューバーの設置方法

 

 

今回使うテンプレートは、CSS編集ができないテンプレートです。

 

 

この場合は、フリースペースを使います。

 

 

【マイページ】から、【デザインの変更】をクリック。

 

サイドバーから【フリースペース編集】を選びます。

 

 

下記のソースをそのままコピーして、フリースペースに貼ってくださいね。

 

 

 

フリースペースに、何も記載がない場合は、
そのままソース(コード)を貼りつけます。

 

 

 

何か記載がある場合は、その下に貼りつけましょう。

 

 

checkフリースペースは、改行や空白があると、
うまく表示されない場合があります。

 

 

 

なので、ソース(コード)を貼りつける場合は、
改行・空白を削除してくださいね。

 

 

そして、リンク先などの変更をする場合は、
フリースペースに貼ってから、ソース(コード)を変更する方が、うまくいきますよ。

 

 

いったんプレビューを見てみましょう。

 

 

メニュバーが表示していたら成功なんですが、
表示されない場合は、保存をしてからブログを開いてください。
(ブログを見るということです。)

 
 

そして、F5キーを押下して一度更新してくださいね。

 

こんな感じになりますよね。

http://ameblo.jp/test-site1
 
※画像をクリックしてね。

 

 

 

 

 
 
 

 
チェック!!ソースの説明

 

 

 

.skinContentsArea {
position:relative; ← メニューバーの設置位置を相対配置にするという意味。
padding-top:40px !important; ← メニューバーの場所を確保するために余白をとっています。
}

 

このデザインは、ヘッダーの幅が980px何ですが、
この幅と同じ幅でメニューバーを作成しています。

 

 

 

メニュー項目を5個にしているんですが、
均等にするために、計算します。(980÷5)
なので、1つのメニュー項目の幅は、196pxということになりますね。

 

 

 

#headerMenu{ ←IDの名前 これは、自分で解りやすいものに変更しても可。
display:block;
width:980px; ← メニューの全体の幅のことです。
height:35px; ← メニューの高さのことです。
padding:0px; ← 上下左右の余白のことです。
background:#ffe5e5; ←メニューバー全体に背景色を付けています。
list-style:none; ← リストスタイルにしないという意味です。
}

メニューの高さは文字の大きさにも関係しています。

 

文字を大きくしたい場合は、height:35px; の数字を変更してくださいね。
色などは、変更可能ですので、好きな色に変更してくださいね。

 

 

 

#headerMenu ul.menu li {
display: block; ← ブロックレベルにします。
line-height:35px; ← 行間を設定しています。
font-size:14px; ← メニューのフォントのサイズです。
font-weight:bold; ← フォントを太字にしています。
font-family:”メイリオ”,”Meiryo”; ← フォントの種類を変更しています。
text-shadow: 1px 1px 1px #ffffff; ← フォントに影を付けています。
text-align:center; ← 項目を中央揃えにしています。
background:#ffb6c1; ← フォントの色です。
display:inline; ← インラインにします。
}

 

#headerMenu ul.menu li a{
display:block;
width:196px; ← メニュー項目の幅です。
float:left; ← 回り込みの指定をしています。
color:#ff69b4; ← メニューの色を指定しています
background:url(画像のアップロード先URL) no-repeat 25px 8px; ←文字の前につけている画像を指定しています。
}

 

 

 

#headerMenu ul.menu li a:hover{ ← マウスを合わせた時の設定
font-weight:bold; ← 文字を太字にしています。
width:196px; ← メニューの1つの幅を指定します。
text-decoration:none;
color:#ff69b4; ← 文字の色をしています。
background:#ffccdd; ← メニュー項目の色を指定しています。
}

 

 

いろんな設定がありますが、
一応どんな設定がしてあるかを記載しているので、
メニューの幅や、色などの変更は、上記を参考にしてくださいね。

 

 

 

また、リンク先URLの後ろに、target=”_blank” とついていますが、
このコードを付けることによって、別窓で開くという意味です。

 

 

 

違うサイトへ誘導するときなどは、
このtarget=”_blank” をURLの後ろに半角を空けて付けてくださいね。

その方が読者さんにとっては、優しいですよ。

 

 

 

メニューバーは、特にいらないという場合は
つけなくてもいいと思いますが、
ビジネスや集客・メルマガ登録などをしていただくときには、メニューバーがあったほうが、読者さんには親切です。

 

 

これも、カスタマイズの一つなので、
ぜひチャレンジしてみてくださいね。

 

 

 

※アメブロのHTMLが変更になりました。
メニューの表示がおかしかったら、こちらを参照してくださいね。
⇒ アメブロヘッダー下にメニュバー設置HTMLが変わったので!

 
 
 

メニューバーも、デザインの一つです。
新しくなったアメブロテンプレートアメブロビズ3
デザイン数も増えて、あなたのイメージに合うテンプレートが見るかるはず!!
そんなテンプレートが人の心を掴みます。

 

 

 

カスタマイズに煮詰まったら、質問してくださいね。
お問い合わせはこちらから

 

 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.