FC2ブログのヘッダー画像変更(KAETEN)

ヘッダー画像変更

問合せが多いものは、記事にしていきたいと思っているのですが、質問の内容が多岐にわたる為、優先順位が難しいです。

 

思いっきり言い訳していますが、私の努力不足ですね(笑)

 

ということで、今日は、FC2ブログのヘッダー画像変更について書いていきたいと思います。

 

しかも、折角ですので、KAETENの場合を説明していきます。

 

KAETENは、ヘッダーの内側は、 横幅980px、縦幅150pxになっているようなので、そのサイズで画像を用意しておいてください。
※Photo Scapeで作成できます。

参考サイト
http://tesshi.net/category/convenient/photo-scape/

 

それでは、最初にFC2ブログの管理画面に入ります。

 

左サイドバーの「ホーム」⇒「ファイルアップロード」をクリックします。

 

次に「ファイルの選択」で画像を選択し、「アップロード」をクリックします。ファイルをドロップでもOKです。

FC2ブログのヘッダー画像変更

ファイルをアップロードしたら、ファイル情報の画像のURLをコピーし、メモ帳に保存しておきます。

FC2ブログのヘッダー画像変更2

 

FC2ブログのヘッダー画像変更手順

管理画面の左サイドバーから「設定」⇒「テンプレートの設定」をクリックします。

 

画面をスクロールして、「スタイルシート編集」を変更します。

/*ヘッダーの画像・背景色・罫線*/
div#header-in {
background: url() no-repeat;
background-position: 0px 0px;
}

上記の背景色黄色の部分を探します。下図の赤下線の()内に先ほど保存しておいた画像のURLをコピペします。

FC2ブログのヘッダー画像変更3

下図の赤下線部分が先ほどの画像のURLです。その下の黄下線部分の画像は要らなくなるのでURLを削除します。あとは、更新ボタンをクリックして、ブログを確認して下さい。

FC2ブログのヘッダー画像変更4

 

画像の下部分が切れてしまい全部表示されない場合があります、その時は、

div#header-in {
background: url(あなたがアップされた画像のURL) no-repeat;
background-position: 0px 0px;
height: 150px;
}

と、div#header-inのところに、height: 150px;を追加してください。

 

また、画像に合わせて、ヘッダーの文字の色を変えたい場合は、

/*ヘッダーの文字色*/
div#header-in .blog_title a,div#header-in .blog_introduction {
color: #ffffff;
}

上記の例ですと、color: #ffffff; で白をしていますのでもし黒に替えるなら、color: #000000; に変更してください。(参考)カラーコード表 http://www.colordic.org/

 

やってみると簡単ですね。

 

コメントを残す

CAPTCHA


サブコンテンツ

管理人について

tesshi180
 
テッシです。
 
現在南の島でのんびりと、
アフィリエイトをしながら暮らしています。
 
今まで色々な人に、迷惑をかけてきたので、アフィリエイトで稼ぎたいと思っている人たちを、応援できればと思っています。
 
詳しいプロフィール
 

無料メルマガ配信中

現在実践中のノウハウと実践手順を示したメルマガを始めました。
 
新しい無料メルマガを体験したい方は下記から
 
現実的な
アフィリエイト講座

 

お問い合わせフォーム

質問や相談はいつでもお気軽にご連絡ください。
 
必ず返信させて頂きます。

 
お問い合わせ
 

このページの先頭へ