アメブロ プロフィールにもカバー画像とメニューを・・・

アメブロ プロフィールにもカバー画像とメニューを・・・


くまはちです!

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

最後にちょっと宣伝

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

セミナー情報は、こちら

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

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

あなたにとどけたい

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

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

シェアする


  • このエントリーをはてなブックマークに追加
  •    
  • 0
    follow us in feedly

関連記事

ダイエットして身も心も美しく歳を重ねるために・・・

アメブロから集客できるには、理由があるんです!

アメブロで集客できます。 よく聞く言葉ですよね。 多くの方が同じことをしています

記事を読む

アクセス解析

アメブロのアクセス解析でチェックしたい5つの項目

くまはちです! Facebookページの FBMasterくまはちにいいねお願いします。

記事を読む

ノブ横地

アメブロ活用 どんな方をフォローするのか?

  本業に活かせるFacebook講師とブログ開設サポート しているくまはちです!

記事を読む

アメブロ

アメブロのアクセスが伸びている理由

本業に活かせるFacebook講師とブログ開設サポート しているくまはちです!

記事を読む

Facebookページ

アメブロプロデュースした結果...

  本業に活かせるFacebook講師とブログ開設サポート しているくまはちです!

記事を読む

FBMasterくまはち

Facebookページとアメブロの連携

本業に活かせるFacebook講師とブログ開設サポート しているくまはちです!

記事を読む

アメブロ

アメブロのHTMLタグにちょっとした工夫

  Facebook講師とブログ開設サポート しているくまはちです! F

記事を読む

Android

アメブロ PCとスマホでのソーシャルボタンの違い

  本業に活かせるFacebook講師とブログ開設サポート しているくまはちで

記事を読む

アメブロ

アメブロのデメリット・・・

  本業に活かせるFacebook講師とブログ開設サポート しているくまはちで

記事を読む

中古車オークション代行・車検代行のグローバル自販

アメブロ 仕事に活かすためのカスタマイズ

  本業に活かせるFacebook講師とブログ開設サポート しているくまはちです!

記事を読む

仕事に活かすためのブログシェア
予約投稿でソーシャルメディアに投稿する

    本業に活かせるFacebook

Facebook
SNSやブログを仕事に活かすための個別レッスン

本業に活かせるFacebook講師とブログ開設サポート して

アメブロ
くまはちが制作したアメブロは、アクセスが増えます!

くまはちが制作したアメブロは、アクセスが増えます! くま

ダイエットして身も心も美しく歳を重ねるために・・・
アメブロから集客できるには、理由があるんです!

アメブロで集客できます。 よく聞く言葉ですよね。

くまはち
繰り返し投稿すると・・・

  本業に活かせるFacebook講師とブログ開設サポート

→もっと見る

  • メルマガ登録

    E-Mail

    Name

    powered byメール配信CGI acmailer
     
  • Instagram
     

     

     
    Pinterest
     
    pixiv
     
  • 2017年2月
    « 6月    
     12345
    6789101112
    13141516171819
    20212223242526
    2728  
PAGE TOP ↑