アメブロ既存デザインにヘッダー画像を設置してみた♪

アメブロの既存のデザインにヘッダー画像を設置する方法

こんにちワ。ワンタンです。

この上の画像は、アメブロさんが提供してくれているブログデザインのものに、ヘッダー画像を設置してみたものです。
「CSS編集用デザイン」では無いです。

既存のデザインが気に入ってるけど、「ヘッダー画像」だけは、独自のものを設置したいと思ってらっしゃる方も居るのではと思います。

その方法を御案内してみます。

アメブロの既存のデザインにヘッダー画像を設置する方法

まず、最初にヘッダー画像として使いたい横幅985ピクセル、縦305ピクセル位の大きさの画像を用意して下さい。（※実際は、縦300ピクセルで表示されますが、端が少し切れてしまう事があるので、少しだけ大きめの画像を用意したほうがいいと思います。）

つぎに、ここがちょっと問題なんですが、用意した画像の「画像URL」を取得して下さい。
アメブロの場合、その画像フォルダーにアップすると、そのサイズの大きいものは、自動的に、横幅が840ピクセルに縮小されてしまいます。
ドロップボックスとかグーグルドライブ、あるいはフリッカー等にアップして、その画像の「画像URL」を取得して下さい。

つぎに、以下のコードの赤字の箇所に、その画像URLを差し換えて記述して下さい。

<!-- ブログヘッダー;03:04 -->
<style type="text/css">.skinHeaderArea{background-image:url(画像URL);background-repeat:no-repeat;height: 300px;}</style>

こんな感じです（↓）。

<!-- ブログヘッダー;03:04 -->
<style type="text/css">.skinHeaderArea{background-image:url(https://farm9.staticflickr.com/8615/16710137632_449d375c08_o.png);background-repeat:no-repeat;height: 300px;}</style>

あとは、上のコードを、アメブロのフリースペース編集に貼り付けて下さい。

（※行き順・・「マイページ」→「ブログを書く」→「設定・管理」→「フリースペース編集」）

※フリースペース編集は、コードにスペースが入ると、目には見えない余分な改行タグが入って、その仕様が反映されなくなってしまう事があります。コピペする時、ご注意下さい。

〇思うこと
アメブロをカスタマイズするのに、そのデザインを「CSS編集用デザイン」にしてやると、多種多様のカスタマイズが出来ます。
ただ、色んな細かい設定をしてやらないと、逆に非常に殺風景なデザインになってしまいます。

既存のおしゃれなデザインのものに、こんな一手間かけるだけで、独自の、よりオシャレなブログデザインのものが出来るのではと思います。

☆ブィブィ  ('-^*)/

ダンシング：ニャンコ^^;

ね！？

表示 - 継承 2.1