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

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


くまはちです!

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

関連記事

なう

アメブロも応援と感謝

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

記事を読む

読者登録

アメブロ 読者登録

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

記事を読む

アメブロ

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

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

記事を読む

アメブロランキング

ブログランキング活用 検証してみました

くまはちです! SEO対策というよりは、 アクセスの集め方の方が ハマってる感じで

記事を読む

いいね エラー表示

アメブロ 時にはエラーが出ることも

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

記事を読む

ペタ

アメブロ ペタ機能について

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

記事を読む

Facebookページ

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

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

記事を読む

アメブロ

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

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

記事を読む

投稿一覧

ブログ記事が増えてきたら目次が必要

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

記事を読む

アメブロ

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

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

記事を読む

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

    本業に活かせるFacebook

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

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

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

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

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

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

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

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

→もっと見る

  • メルマガ登録

    E-Mail

    Name

    powered byメール配信CGI acmailer
     
  • Instagram
     

     

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