ブログ(Blog)

くまはちです!

Facebookページ

FBMasterくまはちいいねお願いします。

くまはち

昨日のカバー画像表示できました?

表示できないときは、相談してくださいね。

今日は、プロフィールカバー画像

メニューバーを設置する方法です。

プロフィール

画像を拡大してください。

トップ画像メニューバーが設置されています。

これもコツさえわかれば簡単です。

何度も言いますが、コピペだけでできます。

パソコンが好きになるブログ

上記のブログを参考にさせていただきました。

まず、HTMLタグとスタイルシートの組み合わせで

1.カバー画像のHTMLタグ

2.メニューバーのHTMLタグ

3.スタイルシート

この3つをプロフィールフリースペース

貼り付けます。

プロフィール

画像参照 赤枠の中のフリースペースをクリック

 

タグ貼り付け

この部分に1~3までのタグとスタイルシート

貼り付けます。

すると下記のようなプレビューに

プレビュー

タグは、以下の通りです。

<div id="profileheader"><a href="ブログのアドレス"><img src="ヘッダー画像のアドレス"></a></div>

これが、1番

<div id="profilemenu"><ul><li><a href="メニュー1のアドレス">メニュー1</a></li><li><a href="メニュー2のアドレス">メニュー2</a></li><li><a href="メニュー3のアドレス">メニュー3</a></li><li><a href="メニュー4のアドレス">メニュー4</a></li><li><a href="メニュー5のアドレス">メニュー5</a></li></ul></div>

これが、2番

ここでは、ヘッダー画像の横幅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番
そして全て改行を変更せずコピペします。
絶対に改行を入れないことです。
タグ
上記のように改行が入ると
下記のようになりますよ。
改行
改行を入れただけで段々畑みたいになります。
ご注意くださいね。

最後にちょっと宣伝

神戸・大阪・明石でセミナーやってますよ。

セミナー情報は、こちら

ノブ横地さん・徳本 昌大さんの著書です。

くまはちがおすすめの本です。(^-^)

あなたにとどけたい

アメクリップ
つながる・広がる・アクセスアップ【アメクリップ】

ではでは、くまはちでした。(^-^)

シェアする