ブログ運営について

ブログの使い方などのメモ

ファンブログ ヘッダー画像を変えてみよう

スポンサーリンク

HTMLやCSSのわかる方や、チャレンジしたい方は、デザインをカスタマイズして自分だけのオリジナルブログを作成してみましょう!

 

【1】デザインテンプレートの中に、CSS編集用の「カスタム向け」というのがありますので、そちらを設定しておきましょう。

f:id:yumeji773:20161209180855p:plain

 

【2】「デザイン」の中の「CSS編集」を表示します。

f:id:yumeji773:20161209180935p:plain

 

【3】ヘッダーのスタイルが書かれている箇所をさがします。カスタム向けテンプレートのdiv#headerです。

f:id:yumeji773:20161209181013p:plain

【4】全体のwidth(幅)が1000pxとなっていますので、合わせて画像を作成しましょう。

f:id:yumeji773:20161209181047p:plain

【5】今回はこのような画像を作成しました。

f:id:yumeji773:20161209181122p:plain

画像を差し替える

CSSを編集してヘッダー部分の記述を、差し替える画像のURLに書き換えましょう。

 

【1】今回ヘッダーを差し替えるブログの「画像管理」を選択します。

f:id:yumeji773:20161209181334p:plain

【2】ヘッダー画像をアップロードしてファイル一覧に追加されたことを確認してください。

f:id:yumeji773:20161209181433p:plain

 

【3】画像のタイトルをクリックすると立ち上がる画面の「元ファイル」のURLをコピーします。

※リンクの上で、右クリックしてリンクアドレスをコピー(ブラウザによって言い方が違います)でURLをコピーできます。

f:id:yumeji773:20161209181530p:plain

【4】CSS編集画面に戻って、ヘッダー画像のURLを、先ほどコピーした画像のURLに書き換えます。

f:id:yumeji773:20161209181604p:plain

【5】保存する前に、まずプレビューでヘッダーを確認しましょう。その後保存してブログを確認しましょう。

f:id:yumeji773:20161209181635p:plain

【6】ヘッダーがオリジナルの画像になりました。

f:id:yumeji773:20161209181720p:plain

 

background:url(画像のURL) left top no-repeat;

backgroundという背景をまとめて設定するプロパティに、画像のURLを入れます。(すでに設定されている背景色の指定を背景画像の指定に書き換えます)

※その他paddingやmarignで見た目のデザインを調整しましょう。

 

慣れてきたら、その他のテンプレートでもできるのでチャレンジしてみてくださいね!
(注意)CSSの編集を行う際は、事前にバックアップを取るようにしましょう。 

CSSについては、ステップアップテクニックを見てみましょう。

【A8.net】一歩先行くブログ・サイト作りに!ステップ アップ テクニック