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

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


くまはちです!

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講師とブログ開設サポート しているくまはちで

記事を読む

ペタ

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

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

記事を読む

アメブロ

ブログのアクセスアップ とその前に・・・

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

記事を読む

no image

アメブロ設定 その3 外部連携

くまはち流アメブロ設定のその3 外部連携は、Twitterだけ自動投稿できるよ

記事を読む

アメブロ

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

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

記事を読む

IEのアイコン表示

WEBページのアイコン変更してみる

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

記事を読む

アメブロ

アメブロ アクセス解析でわかったこと・・・

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

記事を読む

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

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

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

記事を読む

Simplog

Simplogからアメブロへの投稿について その2

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

記事を読む

中古パソコン
中古パソコンの価格ってスペックに比例しない?

こんにちは くまはちです。 時に中古パソコンを販売してたり

FBページ
FBページのページプラグインが表示されない

おはようございます。 皆さんのブログやホムペにページプラ

なぜ、以前の投稿にいいね???

おはようございます。 くまはちです! 最近特にFacebo

パスワード
パスワード破られないためには?

最近また、いろんなSNSで乗っ取りされる方が増えましたね。 そん

イベント画面
Facebookイベント作成画面の違い

Facebookでイベントを作成する Facebookでイベ

→もっと見る

  • メルマガ登録

    E-Mail

    Name

    powered byメール配信CGI acmailer
     
  • Instagram
     

     

     
    Pinterest
     
    pixiv
     
  • 2017年9月
    « 8月    
     123
    45678910
    11121314151617
    18192021222324
    252627282930  
PAGE TOP ↑