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

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


くまはちです!

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

関連記事

FBMasterくまはち

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

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

記事を読む

アメクリップ

アメブロユーザーは、アメクリップを・・・

くまはちです! 今日は、アメブロユーザー限定で・・・ アメクリップを紹介します。

記事を読む

アメブロ

アメブロに文字制限あるのご存知ですか?

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

記事を読む

ameba

アメブロで完結してはいけない

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

記事を読む

Android

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

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

記事を読む

アノテーション

アメブロに外部アノテーションから飛ばす方法

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

記事を読む

アメブロ

アメブロを活用する理由3つ

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

記事を読む

Facebookページ

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

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

記事を読む

アメブロ

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

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

記事を読む

インサイト

アメブロ 記事のタイトルは、アクセスされる最大の要因

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

記事を読む

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

    本業に活かせるFacebook

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

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

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

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

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

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

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

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

→もっと見る

  • メルマガ登録

    E-Mail

    Name

    powered byメール配信CGI acmailer
     
  • Instagram
     

     

     
    Pinterest
     
    pixiv
     
  • 2017年7月
    « 6月    
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31  
PAGE TOP ↑