ルームのカスタマイズ:ヘッダー画像とメニューの設置 | アメブロをカスタマイズしよう!

アメブロをカスタマイズしよう!

最近、サイトの見栄えやSEO対策により、アクセスアップを図ろうとする傾向が顕著になってきました。そこで、その解決策の一つとして、アメブロのカスタマイズを研究してみようと思います。あなたのブログのご参考にしてくださいね。

ご訪問ありがとうございます。
人気ブログランキングの応援
をして頂けると励みになります。



以前からルームにヘッダー画像とメニューを設置
してみたかったのですが、

なぜか難しそうだなあと思い、
気になりながら避けていました。



しかし、今回いろいろ調べてみると、
これならできそうだなあと思い、
取り組んでみることにしました。



まず、ヘッダー画像は、これまで使っていたものを
そのまま使用したいと思います。



次に、ヘッダーメニューの画像は、
GIMPで次のように作成しました。



BlogTopへ

おすすめの本

読者登録

カスタマイズ

お問合せ



[プロフィール]→[プロフィールの編集]→[フリースペース]の順にクリックし、
HTML入力画面が表示されたら、


まず、次のHTMLを入力し、保存しました。

<div id="roomtop"><img src="http://stat.blogskin.ameba.jp/blogskin_images/20110516/13/2b/d2/g/o09500300kiyo-customize1305521105328.gif"><a
href="http://ameblo.jp/kiyo-customize/" title="ここをクリックするとトップページへ移動します。"><img
src="http://stat.ameba.jp/user_images/20110627/10/kiyo-customize/d5/35/g/o0190005011315473430.gif"></a><a
target="_blank" href="http://ameblo.jp/kiyo-customize/entry-10802605638.html"
title="カスタマイズについて詳しく書かれた本をご紹介します。"><img src="http://stat.ameba.jp/user_images/20110627/10/kiyo-customize/26/2e/g/o0190005011315477363.gif"></a><a
target="_blank" href="http://blog.ameba.jp/reader.do?bnm=kiyo-customize"
title="ここをクリックして、読者登録をしてくださいね。"><img src="http://stat.ameba.jp/user_images/20110627/10/kiyo-customize/f6/be/g/o0190005011315478870.gif"></a><a
target="_blank" href="http://ameblo.jp/kiyo-customize/entry-10906531355.html"
title="カスタマイズして欲しい方は、こちらです。"><img src="http://stat.ameba.jp/user_images/20110627/10/kiyo-customize/0c/cd/g/o0190005011315482093.gif"></a><a
target="_blank" href="http://runanet.jp/page5.html"
title="ご質問等何でもこちらでお問合せくださいね。"><img src="http://stat.ameba.jp/user_images/20110627/10/kiyo-customize/81/e5/g/o0190005011315484346.gif"></a></div>




次に、忘れないように下記のHTMLの入力も必要です。
入力場所は上記のフリースペースと同じで、続きに入力しました。

<style type="text/css">#wideContentsArea{width:950px;/*全体の横幅*/margin:0
auto;position:relative;}#header{visibility: hidden;height:400px;/*画像の高さ*/}#roomtop{width:950px;position:absolute;top:0px;/*上からの位置*/left:0px;/*左からの位置*/}</style>



なお、上記のHTMLは、私のブログの場合の仕様ですので、
ご注意ください。



出来上がったマイルームは、こちらです。
↓↓↓
http://profile.ameba.jp/kiyo-customize/



なお、今回参考にさせて戴いたブログはこちらです。
ありがとうございました。
↓↓↓
アメブロルームカスタマイズ ボタンの設置方法



今回は、以上です。



最後まで読んでいただき、
ありがとうございました。

少しでもお役に立ちましたら、
応援お願いします!!

人気ブログランキングへ