アメブロテンプレ改造 メニューバーを設置する方法とは?

アメブロテンプレ改造

アメブロを自分の自由にカスタマイズ。
テンプレ改造、すすんでいますか?

今回は、
メニューバーを設置する方法を
ご紹介します。

 

アメブロのデザインテンプレート改造です。
CSS編集ができるデザインスキンを使うと、
自由にカスタマイズができますよね。

 

ただ、CSSがちょっと解らん!!という方もいらっしゃると思います。

私も最初は、全然解りませんでした。

 

 

書籍や、ほかのブログをいろいろと参考にしながら、勉強しているんです。

 

目的があるブログだと、やっぱり読者さんの誘導にも、気を配りたいもの!!

一番読者さんの誘導を促すものって、
やっぱりヘッダーのメニューバーです。

 

メニューバーがヘッダーにあるとこにより、
見てほしい記事やサイトへの誘導が簡単になりますし、
読者さんを迷わせない工夫としては、ぜひ設置したいです。

 

ですが、アメブロのスキンデザインばかりでなく、
他の無料ブログのテンプレートもメニューバーがついているものって、
少ないですよね。

ならば、つけましょう。

今回は、CSS編集が可能なデザインスキンで設定していますが、
これを参考にすれば、普通のデザインスキンでも、
設置が可能になります。

ぜひチャレンジしてみてくださいね。

メニューバーは、自分で背景画像を作るもよしなんですが、
今回は、横にリストを並べてみるというシンプルな方法をとりました。

それだけでは、ちょっとさびしいので、
リストアイコン(ミニアイコン)を項目の前につけています。

出来上がりは、こんな感じです。

メニューを付けたサンプルブログ

いいでしょう。

では、一緒にやってみましょう。

設置方法

フリースペースに、メニューバーに表示される項目(リンク先)を
設置します。

下記コードをそのままフリースペースに貼りつけてくださいね。

<div id="headerMenu"><ul class="menu"><li><a href="ここにリンク先のURL" target="_blank">トップページ</a></li><li><a href="ここにリンク先のURL" target="_blank">メニュー2</a></li><li><a href="ここにリンク先のURL" target="_blank">メニュー3</a></li></ul></div>

headerMenu と ul class に使っている menuは、
自分でつけたい名前にしても大丈夫です。

ただ、解りやすいのでheaderMenuとmenuにしました。

 

フリースペースに、コードを貼りつけるときは、
改行を除いてつけてくださいね。
そうしないと、うまく表示されませんので。

 

リンク先と、メニューの名前は、あとからでも、変更が可能です。

 

リンク先が、他の外部のサイトに誘導したい場合は、
URLの後に必ず、 target=”_blank” をつけましょう。
※target=”_blank” をつけることにより、別窓でサイトが開きます。

 

貼りつけたら、保存します。

そうすると、サイドバーにメニューが並ぶ形になります。

 

これを、ヘッダーの下にメニューを配置するための、CSSを追加
していきます。

 

デザイン変更 → CSS編集をクリック。

 

CSSコードが記載されている部分の一番下に、
下記のコードを追加してくださいね。

 

/*  */ この印で囲んである部分は、
コメントアウトといって、コードの説明に使っています。

 

/* ヘッダーメニュー */
#wrap,.skinContentsArea{
padding-top:50px; /*ヘッダーから記事コンテンツのスペースを空けています。  */
}

#headerMenu{
position:absolute; /* ← ヘッダーの設置場所の設定 */
margin:0;
padding:0;
}

#headerMenu ul.menu{
margin:0;
padding:0 10px;
list-style: none;
}
#headerMenu ul.menu li{
display:inline;
}
#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}

#headerMenu{
width:980px; /* ← ヘッダーの幅を指定しています。 */
height:35px; /* ← ヘッダーの高さを指定しています。 */
top:0px;
left:0px;
background:#ffc993; /* ← ヘッダーの背景の色を指定しています。 */
}

#headerMenu ul.menu li {
line-height:35px;
font-size:12px;/* ← フォントの大きさを指定しています。 */
font-weight:bold;
font-family: "メイリオ","Meiryo" ; /* ← フォントの種類を指定しています。 */
}

#headerMenu ul.menu li a{
float:left;
color:#ffffff;
background:url(アップロードしたミニアイコン画像) no-repeat 0 8px; /* ← ミニアイコンの設置の位置を指定しています。 */
padding:0 25px; /* ← ミニアイコンと文字の距離を指定しています。 */
}

#headerMenu ul.menu li a:hover{
font-weight:bold;
text-decoration:none;
color:#fffacd; /* ← クリックされた時の文字の色を指定しています。 */
background-color:#ffc993; /* ← メニューの背景と同色にしています。 */
}

貼り終えたら、保存してブログを確認してみてください。

出来上がりはこんな感じになったらOKです。

http://ameblo.jp/test-site1/

 

 

 

※画面をクリックすると、サイトへ飛びます。

 

CSSは、ブログのスタイルです。
コメントアウトで、説明している部分を、ご自分の好きなように変更すると、
自分だけのカスタマイズが完成です!!

 

今回は、メニュー幅を統一せず、ただ、横並びにしました。

 

趣味ブログなど、メニュー項目がそんなにいらないなー・・・
という方には、この方がきれいに見えますよね。

 

自分でメニューボタンなどを、ご用意している方は、

#headerMenu{ のbackgroundを
下記のコードに変更すれば、自分の、メニューボタンとなります。

 

background:url(ここにアップロードした画像)no-repeat;

 

ただ、注意する点は、ヘッダー幅とメニュー幅を同じにしているので、
ヘッダーの幅をメニューで割った数が、1つの幅になるように
画像を作成しないと、バランスがとれません。

 

ちょっと面倒くさいかもしれませんが、
練習だと思って、やってみてくださいね。

 

自分でカスタマイズすると、本当に楽しくなってきますよね。

そのポイントとして、テンプレートのコードを、
いろいろ研究するって、大切です。

 

自力でカスタマイズする癖をつけると、
できるようになりますよ。

 

また、好きなテンプレートなどを、
ちょこちょこいじりながら、慣れていくのもいいかもです。

 

私がおすすめするアメブロビズ2(AmebloBiz2)は、
メニューバーにも、こだわりのデザインが施されています。

アメブロのテンプレートをお探しの方は、
これで決まりです。

 

テンプレートを変えると、
気分も記事内容も変わっていきます。

 

テンプレートも賢く選びましょうね。

2 Responses to “アメブロテンプレ改造 メニューバーを設置する方法とは?”

  1. […] は、 以前の記事でも書いているように、 アメブロの大きな広告の移動方法や、 メニューバーの設置方法などでが人気の記事です。 → 【アメブロテンプレ改造 メニューバーを設置する】 […]

  2. […] 役割を果たします。 カスタマイズも、ちょっと難しいですが、 記事で解説している方法で、メニューバーの設置が、 整います。 → 【アメブロ テンプレ改造 メニューバーを設置する】 […]

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ