こんにちは。
『やさしいブログの作り方』の松田です。
先日、メニューバー作成サイトで作成したメニューバーのタグがプロフィールページにも適用できるようになりました。
そこでプロフィールページにもヘッダー画像を付けたい方もいらっしゃるようですので、その方法をご紹介したいと思います。
プロフィールページにヘッダー画像を設置するには、プロフィールページのフリースペースを使います。
プロフィールページのフリースペースは上記画像の矢印のところです。
フリースペースが開いたら以下のタグをコピペして下さい。
まず、自分のアメブロアドレスには、ご自身のアメブロアドレスを入れて下さい。私であれば、
https://ameblo.jp/amecafe2011/
です。
ヘッダー画像のURLアドレスには、CSSの編集画面に出てくるヘッダー画像のパスを入れて下さい。
3ヶ所ある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(ヘッダー画像の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/
です。
ヘッダー画像のURLアドレスには、CSSの編集画面に出てくるヘッダー画像のパスを入れて下さい。
3ヶ所ある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>
以上でプロフィールページにヘッダーが設置され、かつヘッダーをクリックするとブログトップへジャンプするようになります。
なお、こちらのメニューバー作成サイトで作成したメニューバーと併用可能です。^^
最後までお読みいただきありがとうございました。
無料メール講座配信中
やさしいブログ、書籍化!