アメブロ プロフィール改造の仕上げはメニューバーを設置すること。

プロフィール改造の仕上げは、メニューバーアメブロのプロフィール(旧ルーム)の
改造編です。

最後にブログ同様、メニューバーを付けてみましょう。

 

 

 

 

アメブロは、ブログのカスタマイズが難しいとよく聞きますが、
それはどういうことかというと、CSSの変更のみでしか
カスタマイズできないということです。

 

CSSというのは、ブログにたとえて言うと、
装飾のことです。
文字の色やフォントを変えたり、サイドバーの枠を変えたりと、
細かく、装飾したい方にとっては、CSSのソース(文字ね)を変更するのは、
楽しいことでもあり、ちょっと難しいかも???ということもあります。

 

以前の記事でも書いたように、
アメブロでは、プロフィールに訪問する方も多いですし、
アクセスアップにもつながります。
そのためにも、初心者でもできるカスタマイズをしていった方が、
プロフィールページも、美しくなりますよ。
【アメブロ プロフィール改造 初心者でもできる方法とは?】

 

そうやって、カスタマイズしていくと、もっとたくさんいじりたくなってくる。
それが、人の常っていうもの。

 

私的には、最後の仕上げとして、
メニューバーを追加しました。
こんな感じね。

http://profile.ameba.jp/affilly-chiezou/

 

 

 

 

※画像をクリックすると、サイトへ行きます。

 

基本この私のブログは、アメブロビズ2(AmebloBiz2)で作成した、
テンプレートなんです。
なので、ブログとお揃い(ワードプレスもお揃い)のプロフィールページを、作ってしまいました。

お揃いもどうかと思う方もいらっしゃると思いますが、
ブログと同じということは、テーマが統一されるので、
訪問してくださる方も、解りやすい。

 

しかも、オリジナルな印象も与えることができますね・

 

最後の仕上げは、メニューバーの追加です。

 

メニューを付ける当たっては、いろいろ考えました。

 

アメブロのプロフィールの部分には、ちゃんと【ナビメニュー】がついているので、
それでもいいかなぁ~とか、でも【読者登録】とかもつけたいかな・・・とかね。

 

そもそもメニューバーが必要なわけとは?
メニューバーは、訪問者からすると、一番解りやすいですよね。
どこに行けば、どんな情報が得られるか?
それを誘導するためのものなのです。

 

だから、訪問者にとってはとっても親切!!って言うことになるわけ。

 

目的を持ったブログを作成している場合は、
メニューバーを付けたほうが、訪問者の方を読んでもらいたい場所へ、
誘導してあげることができるので、いいです。

 

ちょっと難しいですが、CSSのソースを書いていますので、
やってみてくださいね。

 

まずプロフィールのHTML構造です。
こんな感じね。

プロフィール構造

 

構造をちょっと把握しておいての・・・・
メニューリストを作成します。

<ul id=”Menu”>
<li>プロフィール</li>
<li><a href=”http://ameblo.jp/affilly-chiezou/>ブログ<a></a></li>
<li><a href=”http://now.ameba.jp/affilly-chiezou/”>なう</a></li>
<li><a href=”http://blog.ameba.jp/reader.do?bnm=affilly-chiezou” target=”_blank”>読者登録</a></li>
<li><a href=”http://pigg.ameba.jp/?targetAmebaId=affilly-chiezou target=”_blank”>アメーバピグの部屋</a></li>
</ul>

今回は、あらかじめヘッダーに合ったリストに、読者登録を追加したものです。

ヘッダーリストというのは、この部分ね。

ヘッダーナビリスト

 

上記のソースを、プロフィールのフリースペースに貼ってください。

02_org_p
この時、改行をすべて削除して貼りつけてくださいね。
そうしないと、表示されません。

 

このリストでいいなと思った方は、このままです。
ただし、私のIDをご自分のIDに変更してくださいね。
(黄色のハイライトの部分が、IDです。)

 

これだけでは、実はメニューとしては、表示できません。

 

私のブログを例にすると、設定が大変なので、
単純に、コンテンツエリアの上にメニューバーを追加しますね。
こんな感じね。

2012y09m17d_113424930

 

まず、設定されているナビリストと、自分の名前
(これがプロフィールですという表示なんです。)
を、見えなくしちゃいます。

<style type=”text/css”>#navList{display:none;} #header h1{display:none;}</style>

このまま改行をせずに、プロフィールのフリースペースの部分にはってくださいね。

それから、メニューの配置をします。

02_pnk_p

 

メニューの位置を、どこに設置するかということです。
広告の下から、どれくらい離れればいいか?

コンテンツ(上の図を参照してみて)とメニューの幅をどれくらいにしようかとか、
メニューの文字などを変更するソースを作成します。

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

<style type=”text/css”>#navList{display:none;} #header h1{display:none;}</style>
<style type=”text/css”>#contentsArea {position:relative;padding-top:50px !important;}#freeSpace ul#Menu{position: absolute; margin-bottom:30px; display: block; background:#ffffcc; width:800px;left:0px;top:0px;}#freeSpace ul#Menu li {display:block; float:left; border-right:1px solid #fff; width:159px; height:45px; font-size:14px;font-weight:bold; text-align:center; line-height:45px; color:#ff9999;}#freeSpace ul#Menu li a {color:#ff9900 !important;} </style>

 

ちょっとだけ、解説。

#contentsArea {position:relative;padding-top:50px

ここのpaddingでは、トップの広告とメニューの余白を設定します。

 

次の、#freeSpace ul#Menu{position: absolute; margin-bottom:30px;

margin-bottom で、メニューとコンテンツの余白を設定します。

 

もっと、余白をとろうかしら?と思っている方は、
この数字をかえると、違ってきますよ。
確認しながら、変更してくださいね。

その他に、変更する部分としては、このメニューの背景色と、
メニューの数ですかね。

 

ブログのトップページではないので、あまりメニューの数が多くても
バランスが良くないと思いますよ。

4個、5個くらいがちょうどいいです。

#freeSpace ul#Menu li の部分で、
width:159px; height:45px とありますので、ここで、メニューの幅と高さを調整します。

(widthが、幅のことです。 heightが高さです。)

 

全体の幅が、初期値では、900pxなので、5個で割ると160pxですよね。
でも、1つの項目と項目の間に、白線をいれているので、
159pxということになります。
高さは、自分のお好みで・・・・。

 

できあがると、こんな感じです。
もう一度見てみて!!

2012y09m17d_113424930

 

普通にいい感じでしょう。

 

背景やヘッダーを付けると、数値も変わりますので、
変更しながら、調整するといいですよ。

 

また、こんなのって、以外に面倒でしょう。

 

今回、アメブロビズ2(AmebloBiz2)の特典として、
アメブロのプロフィールカスタマイズCSSをプレゼントしています。

変更する部分は、2か所だけ。

  • メニューを他の項目にしたい方は、その項目の変更。
  • ヘッダー画像の変更

これだけです。

 

プレゼントをする、CSSをプロフィールのフリースペースに貼るだけに
するように、作成しています。

 

まずは、ブログを作成してそれから、プロフィールの設置に取り掛かりましょう。

 

きれいなブログとプロフィールで、
訪問者の心をぐぐっとつかんでくださいね。

 

美しいいテンプレートをお探しの方は、こちらから!!

アメブロビズ2(AmebloBiz2) レビューと特典

 

テンプレートや、カスタマイズについての、
ご質問・ご相談など、メールでお気軽にお問い合わせくださいね。

 
 
 

One Response to “アメブロ プロフィール改造の仕上げはメニューバーを設置すること。”

  1. […] 紹介しますね。 こちらから ⇒ 【アメブロプロフィール改造 仕上げはメニューバーの設置】 […]

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



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

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

line

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



Fc2ランキングへ



お問い合わせ

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

pen

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

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

このページの先頭へ