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

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


テーマ:ブログカスタマイズ

最近アメブロのHTMLが大幅に変更になりました。

 

アメブロは、基本HTMLは変更できないので、
影響があるのか?って思ったらCSSに影響が・・・・

 

メニューバーの設置CSSも変更しないといけません!!

 

 

 

 

 

 

最近アメブロでは、大幅にいろいろなパーツがリニューアル
しましたよね?

 

 

最近アメブロでブログを作った方は、解らないかもしれませんが、
昔とずいぶん変わって、見やすくなったような・・・・
これもどうだかわかりませんが・・・・

 

 

 

HTMLもすごーく変化しました。

 

 

もともとアメブロは、HTMLをいじることができないので、
カスタマイズも、CSSのみ。
しかもCSS編集可能なテンプレート以外のものは、
CSSもいじれないので、「そのまま使って!!」という感じ。

 

 

ちょっとカスタマイズをしたい方にとっては、
使いずらいブログなんですよね。

 

 

で、プチカスタマイズの方法を記事にしていたわけですが、
一番読まれている
「ヘッダー下にメニューを設置する方法」

 

 

 

メニューがあればいいってもんではないのですが、
みんなつけてるし・・・・的に、ヘッダー下にメニューを設置したいという方に対して、CSSを紹介してきたんですが、
アメブロの規格変更によって、ちょっと影響がでてきたのかも?

 

 

私のサンプルブログでは、以前設置した方法で、
なんら問題はないのですが、新しく設置しようとすると、
なんかおかしくなるみたいです。

 

 

なので、下で解説していきますので、
メニューを設置したい方は、参考にしてくださいね。

 

 

 

CSS編集以外のテンプレートでメニューを設置する方法

以前お伝えしていたCSSを、新しくCSS編集可能以外の
テンプレートに貼ったらば、こんな感じになります。

 

 

 

 

メニューバーが下に

 

こんな風に、ブログの左上になって・・・・
良く見えない感じになっていますね。

 

 

 

HTMLがちょっと変わったので、ベースのCSSが変更になったのが、影響しているんですね。

 

 

 

なので、下記のコードをコピーしてフリースペースに貼ってみて!

 

 

 

 

 

フリースペースは、空白や改行があると表示されないので、
よく確認してくださいね。

 

 

 

どう?

 

メニューバー完成

 

 

 

 

 

ちゃんと設置できましたね?
実際のブログで確認してください。
 

 

 

 

CSSの解説をちょっとだけ。

今回CSSが変わった点は、ブログのレイアウト部分がだいぶ変わったんですよね。

 

 

なので、いままでヘッダーとコンテンツ本文との間に、
ヘッダーが入るスペースを入れていたんですが、ベースCSSが
変わったことで、ずれてしまうということが解りました。

 

 

 

そこで・・・・

 

.skinContentsArea {position:relative;padding-top:40px;}#headerMenu{position:absolute;top:-20px; left:0px;margin:0;}

 

 

ヘッダーメニューの位置の数字をマイナスにすることによって、
きっちり上に配置できるようになったわけ。

※意味が解らない方は、スルーしてください。

 

 

 

skinContentsArea の上からの空加減は、

padding-top の数字を変更すると、広くもなり、
狭くもなりますので、調整してください。

 

 

またヘッダー部分のカラーも今ピンクですが、
この部分・・・・

#headerMenu{display:block;width:980px;height:35px;padding:0px;background:#ffe5e5;list-style:none;}

 

背景色をテンプレートに合わせて変更してください。

 

 

メニューの数も5個ですが、変更も可能です。

 

以前の記事で、メニュー数の変更などは、
まとめてありますので、参考に読んでみて下さいね。

⇒ アメブロ カスタマイズメニューバーの設置方法

 

 

 

 

好きなテンプレートで、カスタマイズをしていくのって、
勉強にもなりますし、いいことだと思います。

 

 

CSSをいじっていくことで、CSSの勉強をしていくと、
例えHTMLが変更してベースのCSSが変わったとしても、
基本は一緒なので、応用できるようになりますよ^^

 

 

参考にしてくださいね。

 

 

 

早くブログを設置して、記事を更新したい方は、
デザインテンプレートを1つ持っていると、
カスタマイズをしないで、ブログを始めることができますよ^^
私も使っているおすすめアメブロテンプレート
⇒ アメブロビズ3(AmebloBiz3)レビューと特典のご案内
 
ちえぞうの「稼ブロ」育ち中!!
アフィリエイトに興味がある人は、こちらのサイトから!!
メルマガも始めました♪
⇒ 稼ぐブログ★アフィリエイトレシピ

 
 
 
 

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

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