プロフィールページにヘッダー画像を取りつける方法

こんにちは。
『やさしいブログの作り方』の松田です。

先日、メニューバー作成サイトで作成したメニューバーのタグがプロフィールページにも適用できるようになりました。

そこでプロフィールページにもヘッダー画像を付けたい方もいらっしゃるようですので、その方法をご紹介したいと思います。




プロフィールページにヘッダー画像を設置するには、プロフィールページのフリースペースを使います。

プロフィールページのフリースペースは上記画像の矢印のところです。


フリースペースが開いたら以下のタグをコピペして下さい。

<style>#contentsArea{position:relative;width:980px;}#contentsArea #rightArea{width:660px !important;}#header h1,#header ul{display:none;}#header{margin:10px auto 0;padding:0;width:980px;height:300px;background:url(ヘッダー画像のＵＲＬアドレス);}a#toplink{position:absolute;top:-300px;left:0;display:block;width:980px;height:300px;text-indent:-9999px;}</style><a id="toplink" href="自分のアメブロアドレス">toplink</a>

まず、自分のアメブロアドレスには、ご自身のアメブロアドレスを入れて下さい。私であれば、

https://ameblo.jp/amecafe2011/

です。




ヘッダー画像のＵＲＬアドレスには、ＣＳＳの編集画面に出てくるヘッダー画像のパスを入れて下さい。


３ヶ所ある300pxには、使用したいヘッダー画像の高さの値を入れます。

ただし、一箇所だけ

top:-300px

だけは頭にマイナスがつきますのでご注意ください。


出来上がりのタグはこんな感じになります。

<style>#contentsArea{position:relative;width:980px;}#contentsArea #rightArea{width:660px !important;}#header h1,#header ul{display:none;}#header{margin:10px auto 0;padding:0;width:980px;height:300px;background:url(//stat.blogskin.ameba.jp/blogskin_images/20130909/13/2a/3e/p/o08800300amecafe20111378700351968.png);}a#toplink{position:absolute;top:-300px;left:0;display:block;width:980px;height:300px;text-indent:-9999px;}</style><a id="toplink" href="https://ameblo.jp/amecafe2011/">toplink</a>

以上でプロフィールページにヘッダーが設置され、かつヘッダーをクリックするとブログトップへジャンプするようになります。

なお、こちらのメニューバー作成サイトで作成したメニューバーと併用可能です。＾＾


最後までお読みいただきありがとうございました。

無料メール講座配信中

これからブログを頑張っていきたい！ まずは基本から。
やさしいブログづくりのための、やさしいメール講座（全１０回）

やさしいブログ、書籍化！

ブログでビジネスを軌道に乗せるための行動術

「ブログを続けていてよかった」
そんな気持ちを一人でも多くの人と共有したいと思っています。＾＾

やさしいブログの仕事術

どんなビジネスも突き詰めれば人対人。
その良好な関係を築くのは、相手をおもんばかる気持ちと行動です。