FC2ブログのヘッダー画像を変更する方法

ブログのPC画面のヘッダーにみかんの画像を載せること。

それは僕がブログをやり始める上で絶対にやらねばならない、妻からの至上命令でした。

「ナオミさんのブログみたいに、みかんの画像をトップページに載せてー」と。(ナオミさんのうさぎブログ「うさぎと暮らすということ」のPC画面のヘッダーにはかわいいうさぎさん「まおちゃん」の画像があります)

妻はみかんの画像がPC用画面のヘッダーに載ったらそれでもう満足したようですが、僕は面白くなってほかにもカスタマイズし始めました(スマホのフッターにも画像を挿入したりとか)。

今回は、僕のFC2ブログカスタマイズのはじめの一歩となった、ヘッダー画像を変更する方法について記載します。

【概要】

1.PC用の画面のヘッダー画像を変更する方法

PC用のテンプテート追加画面で
  • 画像に合うテンプレートを探す

  • PC用テンプレートのスタイルシート編集画面で

  • 画像のアドレスを変更する

  • 画像のサイズ指定を変更する

  • タイトル・説明の文字色を変更する

2.スマートフォン用の画面にヘッダー画像を挿入する方法

スマホ用テンプレートのHTML編集画面で
  • 画像のアドレスを挿入する



以下に詳細を記載します。



1.PC用の画面のヘッダー画像を変更する方法


① 管理画面を開き、「設定」→「環境設定」をクリックします。
ad_del_01.png

② 「テンプレートの設定」→「PC用」→「公式テンプレート追加」または「テンプレートの設定」→「PC用」→「共有テンプレート追加」をクリックし、テンプレート追加画面で、自分の画像に合うテンプレートを探します。
pc_header_pic_chg_01.png

本ブログでは、公式テンプレートの「dhw_herbkitchen」を利用しています(2016年5月1日現在)。
以降、「dhw_herbkitchen」テンプレートを例に説明します。

※ 共有テンプレートであれば「027-SimpleCasual」が大きい画像の挿入に適しています。

③ 何かあったらすぐ戻せるように、テンプレートのバックアップを取っておきましょう。テンプレート名の右側の「複製」をクリックして作業前の状態を取っておきます。
pc_header_pic_chg_02.png

④ スタイルシート編集画面で画像のアドレス(http://〜.jpg とか http://〜.png とか)を探します。

「dhw_herbkitchen」テンプレートでは、

/* Layout
------------- */

#header {

background: url(http://templates.blog.fc2.com/template/dhw_herbkitchen/herbkitchen_c2_header.jpg) no-repeat left top #ffffff;

}


と記述されている箇所があります。
括弧内の赤字部分がヘッダー画像のアドレスです。

⑤ 続いて、画像のサイズを確認します。
上記④の画像をダウンロードして画像のサイズを確認します。

または、上記④のヘッダー画像のアドレスのすぐ下に、

width: 100%;
height: 290px;


と記述されている箇所があり、すぐ上に

#container {
background: url(〜) 〜;
width: 800px;


と記述されていることから、画像の横幅が800pxであることが分かります。

⑥ 画像の横幅(width: 〜px)が同じサイズの画像をアップロードします。
file_upload.png

※ 横幅(width: 〜px)は調整が難しい(サイトのバランスが崩れる)ため、今回は横幅は変更せず、縦幅(height: 〜px)のみ調整する方法を記載します。

⑦ 再びスタイルシート編集画面に戻り、スタイルシートを直接編集します。上記④のヘッダー画像のアドレスを、上記⑥でアップロードした画像のアドレスに変更します。

⑧ 画像の縦幅 height を調整します。本サイトでは、290px→300pxに拡張しています。

※ height を削除すれば width に合わせて相対的にサイズ調整されますが、明示的に指定しておいた方が表示が幾分速くなるようです(未検証)。

⑨ 「プレビュー」ボタンをクリックし、ヘッダー画像が変更されていることを確認します。

pc_header_pic_chg_03.png

⑩ ヘッダー画像が変更されたことで、ブログのタイトルと説明文が見えにくくなっている場合、文字色を変更します(文字が見えやすければ、この作業はやらなくてもよいです)。
「dhw_herbkitchen」テンプレートでは、

/* Layout
------------------ */

/* Header
------------------ */
#header h1 {

}

#header h1 a {
color: #254004;
}

#header p {

color: #254004;
}


と記述されているので、color: #rrggbb; の部分を変更します。

色は、Googleで「rgb」を検索すれば、コード変換のページが何かしらヒットするので、そちらでカラーコードを確認し、#rrggbb を変更します。

本サイトでは、#254004→#f5f5f5に変更しています。
pc_header_pic_chg_04.png

⑪ 「プレビュー」ボタンをクリックし、問題ないようであれば「更新」ボタンをクリックします。



【Before】
pc_header_pic_before.png





【After】
pc_header_pic_after.png



以上でPC用の説明終了。



2.スマートフォン用の画面にヘッダー画像を挿入する方法


① 横幅が 320px の画像をFC2のファイルアップロード機能でアップロードします。
file_upload.png

スマホのバナーサイズは 320×50 が良いとされていますが、縦幅50pxは狭すぎるので、本ブログでは横幅のみ合わせた 320×97 のヘッダー画像をアップロードしています(2016年5月1日現在)。


この画像→


mikan_sp_header.jpg



② 管理画面を開き、「設定」→「テンプレートの設定」をクリックします。
ad_del_11.png

③「テンプレートの設定」→「スマートフォン用」→「テンプレート管理」をクリックします。
ad_del_12.png

④ 何かあったらすぐ戻せるように、バックアップを取っておきましょう。テンプレート名の右側の「複製」をクリックして作業前の状態を取っておきます。
ad_del_13.png

※ 本ブログでは、公式テンプレート「new_basic_white_ap」をカスタマイズしています(2016年5月1日現在)。
以降、「new_basic_white_ap」テンプレートを例に記載します。

⑤ HTML編集の画面で直接編集します。
「new_basic_white_ap」テンプレートでは、上の方の

<body>
<header>
<div id="header">

</div>


の記述の下に、

<div id="ad_header" class="ad_header"><%ad></div>


という広告の行があるので、その上の行に、以下の記述をコピー&ペーストします(前回の記事FC2ブログの広告を削除する方法<%ad> を移動している場合は、元々 <%ad> が記述されていた場所に、以下の記述をコピー&ペーストします)。

<!-- スマホ用ヘッダー画像挿入 ここから -->
<div align="center">
<img src="ここに画像URLを入力" width="320" alt="ここにテキスト文字を入力" border="0" >
</div>
<!-- スマホ用ヘッダー画像挿入 ここまで -->


ここに画像URLを入力 のところに上記①でアップロードした画像のアドレスを入力します。

ここにテキスト文字を入力 のところに画像の代わりに表示される文字列を入力します(面倒ならば alt="" としても構いません)。

sp_header_pic_insert.png

⑥「プレビュー」ボタンをクリックし、ヘッダー画像が挿入されていることを確認します。問題ないようであれば「更新」ボタンをクリックします。



【Before】
sp_header_pic_before.jpg






【After】
sp_header_pic_after.jpg



以上でスマホ用の説明終了。



(おまけ)
テンプレートのカスタマイズがうまくいかなかった場合は上記PC用説明③またはスマホ用説明④で取っておいたバックアップに戻します。修正前のテンプレートにチェックを入れて「適用」ボタンを押せば元に戻せます。
ad_del_18.png


(最後に注意事項)
  • 本記事は、個人的な備忘録です。
  • カスタマイズは自己責任で行ってください。
  • 本ブログの情報によって生じたいかなる損害についても、当方は一切の責任を負いません。

関連記事

A Horse's Prayer
馬の祈り
プロフィール

(↑クリックすると口取り写真)

Author:やたん
妻とうさぎとの3人暮らし。
馬、うさぎ、お得(ポイント貯めたりとか)が好きです。
紹介ポイントを稼いで
引退馬のために使うことを目論んでいます(笑)。

(↑クリックすると拡大します)
うさぎ:みかん
性格:甘えん坊、好奇心旺盛、食わず嫌い
種類:ネザーランドドワーフ
性別:女の子
色:オレンジ
体重:1キロ未満
好きなもの:おやつ
趣味:登山(常に高みを目指しています)

最新記事
最新コメント
カテゴリ
リンク
RSSリンクの表示
書籍紹介
馬の命を守れ!~引退馬協会活動記録~
馬の命を守れ!
~引退馬協会活動記録~
認定NPO法人 引退馬協会
税・送料込
¥1,800

自費出版・書店取扱なし
認定NPO法人引退馬協会2017年フォスターホースカレンダー
2017年
フォスターホース
カレンダー
認定NPO法人 引退馬協会
税込
¥800
送料
¥100

好評発売中!
フォスターホースの
生き生きした表情を
捉えました。















ポイントサイト紹介
愛馬出走予定
現役愛馬一覧はこちら
  • モノドラマ
6/25(日)12:15 発走
東京 5R 2歳新馬 芝1,800m
丸田恭介
カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
月別アーカイブ
検索フォーム
QRコード
QR