こんにちは、パソコンワンポイントレッスン！
PCインストラクターの川上です。
※2018年4月18月より、アメブロのプロフィールページが仕様変更になったため、この記事の通りはできなくなりました。
そして、新しいプロフィールページについての記事はこちらになります↓
『【要確認！】アメブロのプロフィールページが変更になりました！』
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
もう2013年（平成25年）も最後の月になりましたね^^
今日は、
かねてからご質問・リクエストのありました「プロフィールページにヘッダー画像とメニューバーを追加する方法」をお伝えします。
それって、なんのこと？
と思われた方は、私のプロフィールページをご覧になってみてください。
プロフィールページにも、ブログトップと同じようにヘッダー画像とメニューバーを設置することができるのです。
普通は、こんな感じになっていたりしますね↓↓↓
では、どのように設置するのか？
［マイページ］内の「プロフィール」の「フリースペース」を利用します。
ブログのフリースペース編集とは違いますので、間違わないでください！
［マイページ］の右上の歯車の隣の三本線のボタンをクリックして、「プロフィール」内の「フリースペース」をクリックします。
すると、フリースペース欄が表示されます。
次の3つをそれぞれ1行にして、最後の方に付け加えます。
２．<div id="profilemenu"> ･･･ </div>→メニューバーのHTMLタグ
３．<style type="text/css"> ･･･ </style>→CSSソース
「ブログトップのURL」と「ヘッダー画像のURL」をご自分のに変更して、コピー＆ペーストします。（1行にするのをお忘れなく）
<div id="profileheader"><a href="ブログトップのURL"><img src="ヘッダー画像のURL"></a></div>
「メニュー1のURL」「メニュー2のURL」「メニュー3のURL」「メニュー4のURL」「メニュー5のURL」と「メニュー1の言葉」「メニュー2の言葉」「メニュー3の言葉」「メニュー4の言葉」「メニュー5の言葉」をそれぞれご自分のに変更して、コピー＆ペーストします。（1行にするのをお忘れなく）
<div id="profilemenu"><ul><li><a href="メニュー1のURL">メニュー1の言葉</a></li><li><a href="メニュー2のURL">メニュー2の言葉</a></li><li><a href="メニュー3のURL">メニュー3の言葉</a></li><li><a href="メニュー4のURL">メニュー4の言葉</a></li><li><a href="メニュー5のURL">メニュー5の言葉</a></li></ul></div>
（注意！ちなみに、ブログの方で使ったのをそのまま使えませんので。）
ここでは、ヘッダー画像の横幅980pxに×高さ300pxで指定なっていますので、ご自分の幅に変更してください。
padding-top:305px の305pxはヘッダー画像の高さ＋5pxとします。
メニューバーの背景色を変更したい方は
background:#003399
のカラーコードを好きなのに変更してください。
（赤色ですと「#ff0000」になります。）
<style type="text/css">#profileheader{width:980px;position:absolute;top:0px;left:0px;}#header{visibility:hidden;height:0px;margin:0;padding:0;}h1 #cntNaviName{display:none;}#header ul#navList{display:none;}#wideContentsArea{background:#FFFFFFF;width:980px;margin:0 auto;top:0px;}#contentsArea{position:relative; padding-top:305px;width:980px;}#rightArea{width:660px!important;margin-top:40px}#leftArea{margin-top:40px}#profilemenu{position:absolute;top:300px;left:0px;width:980px;margin:0 auto;padding:0;height:40px;}#profilemenu ul {width:980px;margin:0;padding:0;}#profilemenu ul li {padding-left:0px;padding-top:0px;float:left;width:196px;height:40px; }#profilemenu ul li a{font-size:15px;font-weight:bold; color:#FFFFFF/*■文字色■*/!important; display:block;text-decoration:none;text-align:center;padding-top:10px;height:30px;background:#003399;/*■背景色■*/}#profilemenu ul li a:hover{color:#000000/*■マウスオーバー時文字色■*/!important;display:block;text-decoration:none;text-align:center;background:#FFFFFF;/*■マウスオーバー時背景色■*/ }</style>
3つ貼り付けると、
下の「プレビュー」に次のように表示されます。
一番下の「保存」を押して、完成になります。
要は･･･
プロフィールの「フリースペース」にタグを書き込む（コピペ）するだけですので！（すでにヘッダー画像をアップロードされている方は^^）
＜参照＞
→『プロフィールページで大切なこと』
→『プロフィールページでのメニューバーを５つから７つに増やすには』
以上、プロフィールページにヘッダー画像とメニューバーを追加する方法でした。
LIDS澄川・ライフデザインスクール
川上 雄大