アメブロ CSS 編集用デザインで アメブロを遊ぼう!③ヘッダーに好きな画像を挿入する

 

アメブロのヘッダーには好きな画像を挿入する事ができます。

 

CSS編集じゃなくてもヘッダーに好きな画像を挿入する事はできますが、
CSS編集だとある程度ヘッダー画像のサイズや画像ファイルの種類に広がりを持たせることが出来るので、

CSS編集をしてヘッダーを挿入した方が実は楽ですし、自身のアピールがしやすいです♪

ヘッダー画像を準備しよう!

アメブロでオシャレなブログを作りたいなら、
まずはオシャレなヘッダー画像を用意しなければなりません!

アメブロでキャッチーなブログを作りたいなら、
キャッチーな画像や文字を使用したヘッダーを用意しなければなりません!

アメブロでシンプルなブログを作りたいなら、
シンプルなヘッダー画像を用意しなければなりません!

アメブロでカラフルなブログを作りたいなら、
カラフルなヘッダーを用意しなければなりません!

アメブロで紳士的なブログを作りたいなら、
紳士的なヘッダーを用意しなければなりません!

アメブロで幼児的なブログを作りたいなら、
幼児的なヘッダーを用意しなければなりません!

アメブロでアーティスト応援ブログを作りたいなら、
アーティストを応援している風のヘッダーを用意しなければなりません!

 

絶対ではありませんが、
アメブロで自分が書いているブログを見てもらいたいなら、やっぱり自分のメッセージが込められているヘッダーを用意するのはちょっとした礼儀ですよね。

 

ヘッダーはブログの顔です。

ブログの顔であるヘッダーを用意するするというこうとは、身嗜みをしっかりと整えるという事ですよ♪

 

例えばこの記事は「WordPress」というもので書いているんですが、
このワードプレスで使用している画像をそのままアメブロでも使用しています。

アメブロではこのサイトの宣伝をしているので、
アメブロ側で見た人がこのサイトに誘導されたときに違和感がないように工夫した結果ですね
(*´∀`*)

 

もしあなたがオフィシャルサイトを持っているのなら、

オフィシャルサイトのヘッダーをアメブロでそのまま使うか、
オフィシャルサイトのヘッダーに似たヘッダーを作ることをオススメします。

 

せっかく自分のブログに訪問してくれた方々に違和感を持たせるのは申し訳ないですものね
(*´∀`*)

 

ヘッダーを用意したらアメブロのCSS編集画面に移動する

ヘッダーが用意できたらブログデザインのCSSの編集画面に移動しましょう!!

早速CSSの編集を選んで自分好みのデザインを作りましょう

ブログデザインのCSSの編集画面を開くとすぐに
ファイルをアップロードする事が出来るようになっています。

CSSの編集画面の一番上にはファイルアップロード項目が

ここで「ファイルを選択」をクリックして、先ほど作ったヘッダー画像を選びましょう。

選んだら「アップロード」をクリックします。

 

すると、

画像をアップロードするとアップロードした画像と画像のURLが表示されます

アップロードした画像と画像のパス(URL)が表示されます。

 

CSSを記入してブログにヘッダーを表示させよう

これを入力すると好みのヘッダーがブログに表示されますよ

リンクを動かしたりリンク画像に変化をつけたりするときと同様に、

 

CSS編集タグを
/* その他、拡張があれば記述 */
の下に以下を記述します。

 


/* 好きなヘッダー画像を挿入しよう */
.skinHeaderArea{
height:330px;
background-image:url(▲▲画像のパス(URL)をここに入力▲▲);
background-repeat:no-repeat;
background-position:center top;
}


 

 

▲▲画像のパス(URL)をここに入力▲▲を削除して、
削除した部分に先ほどアップロードした画像URLをコピペしてしまいましょう!

 

実際にヘッダーを変更するとこうなります

アメブロのヘッダーを変更しました

↑これがアメブロのヘッダー画像です。

ね?このサイトとヘッダー画像が同じでしょ?

ヘッダー画像を変更しただけでは不十分

ヘッダー画像に文字を入れていない場合は何も問題ないのですが、

ヘッダー画像に文字を入れた場合、タイトルの文字が邪魔になってしまうことがあるので、
それを解消するにはタイトルの文字を消すためのCSS編集が必要になってきます!!


アメーバキング2について