ブログサイトの顔とも呼べるヘッダー部分。
オリジナル画像で華やかにアピールしたい場合も多いと思います。
ファンブログでは、オリジナル画像に対応したスマホ用テンプレートはあるのですが、ＰＣ用のオリジナル画像対応テンプレートは今のところありません。
その為、ＰＣ用テンプレートでオリジナル画像を使用するためには、ＰＣ用テンプレートの「ＣＳＳの編集」でカスタマイズを行う必要があります。
今回は、ファンブログのＰＣ用テンプレート「カスタム向け」をオリジナルヘッダー画像にカスタマイズする方法をまとめてみました！
ファンブログのオリジナルヘッダー画像について。
ファンブログ内のＦＡＱ等にオリジナルヘッダー画像の設定方法についての案内がいくつかあります。→ ファンブログでタイトルをオシャレに変えよう
→ ヘッダー画像を変えてみよう
また、当ブログにおいても、過去記事にて、オリジナルヘッダー画像の設定方法についてまとめた記事があります。オリジナルヘッダー画像に関する案内文の記述場所とポイントとなる写真の大きさ等を中心にまとめた記事です。
→ ファンブログにおけるオリジナルヘッダー画像の設定方法。設定のポイントとは？
これらを参考にオリジナルヘッダーを設定することは可能ですが、記事作成当時のテンプレートやＣＳＳの記述の違いから、「設定できない！」という声も聞かれるようになってきました。
そこで、今回は「２０１９年版」として、最新のＣＳＳの記述サンプルも記載しました。
上記記事を読んでもうまく設定できなかった場合は、本記事を合わせて読んで頂くと効果的です。
今回の記事を参考に設定するとどうなるの？
「カスタム向け」のテンプレートを使用している場合のノーマルのヘッダー画像はつぎのようになっていると思います。
 |
| デフォルトのヘッダー |
 |
| オリジナルのヘッダー |
１．オリジナル画像の挿入
２．ブログタイトルの文字の大きさと位置の変更
２．ブログタイトルの文字の大きさと位置の変更
３．ブログ説明文の文字の大きさと位置の変更
オリジナルヘッダー画像にカスタマイズしてみよう！
さっそくカスタマイズしてみましょう！
１．オリジナル画像の準備
オリジナル画像を挿入する為には、まずは、画像（写真など）を準備する必要があります。お気に入りの画像を準備しましょう。
（１）オリジナル画像のサイズ変更
画像はヘッダーのサイズに合わせて事前に加工しておくと必要があります。ペイントなどで、写真を読み込み、サイズを１０００ｐｘ程度に変更してオリジナル画像用として保存して下さい。
 |
| 「ペイント」でのサイズ変更方法 |
上記では、写真を１０００ｐｘ × １５０ｐｘ にサイズ変更しています。
（２）オリジナル画像をファンブログへアップロードする！
サイズ変更したオリジナル画像をファンブログにアップロードします。
■ファンブログ→「画像管理」→アップロード
 |
| ファンブログの画像管理 |
（３）アップロードした画像のＵＲＬを確認する！
アップロードした画像のＵＲＬを確認、コピーして、「メモ帳」などに貼っておきます。
①「画像管理」の「ファイル一覧」で、アップロードした画像の「タイトル」をクリックします。
 |
| オリジナル画像のタイトルをクリック |
②続けて、「元ファイル」のＵＲＬをクリックします。
 |
| 「元ファイル」のＵＲＬをクリック |
③表示されたページのＵＲＬをコピーします。
 |
| 画像ＵＲＬのコピー |
④コピーしたＵＲＬをメモ帳などに貼り付けておきます。
（コピーする部分は、ｈｔｔｐｓ：／／から ．ｊｐｇのところまでです。）
 |
| ＵＲＬをメモ帳などに貼り付ける |
２．ＰＣ用テンプレートのカスタマイズ（ＣＳＳの編集）
画像の準備ができたら、いよいよカスタマイズです。手順を参照して進めて下さい。
なお、ＣＳＳを編集する前にバックアップすることをお勧め致します。
過去に本テーマで運用し、ＣＳＳ編集を行ったことがある場合は、事前にバックアップを取りましょう。バックアップはＣＳＳを全選択コピーし、メモ帳などに貼り付けて保存しておきます。修正後、動作や表示がおかしかったら、バックアップからコピーして戻します。（ＣＳＳの変更を特にしていないのであれば、「初期値に戻す」で戻してもＯＫです）
（１）ＰＣ用テンプレートの「ＣＳＳの編集」を開きます。
■「デザイン」→「デザイン設定」→「ＰＣ」→「ＣＳＳの編集」
（２）「ヘッダー」の記載がある箇所を探します。
（３）下記、サンプルを参考にＣＳＳの編集を行います。編集する場所は注釈文を入れている箇所です。「プレビュー」して成功していたら、「保存」して完了です。
■下記にコピペ用のＣＳＳを添付しておきます。
数字を変えると表示結果が変わります。お好みで調整してみて下さい。
例：padding:0 0 0 100px; /* ←タイトルの位置 (左からの位置） */
↓
padding:0 0 0 200px; /* ←タイトルの位置 (左からの位置） */
■注釈文を参考に一行ずつ追加または、修正することをお勧め致します。
【コピペ用】
/* ヘッダー */
div#header {
padding:40px 0; /* ←ヘッダーの高さ調整 */
background-color:#ffffff;
background:url(オリジナル画像のＵＲＬ)left top no-repeat ;
/* ←オリジナルヘッダー画像 */
display:block;
}
#header h1 a {
padding:0 0 0 100px; /* ←タイトルの位置 (左からの位置） */
color:#ffffff; /* ←タイトルの文字の色を白色に変更 */
font-size:40px; /* ←タイトルの文字サイズ */
ext-decoration:none;
}
#header h1 a:hover { color:#ffffff; text-decoration:underline;} #header .description{
padding:0 0 0 120px; /* ←説明文の位置 (左からの位置）*/
color:#ffffff; /* ←説明文の文字の色を白色に変更 */
font-size:20px; /* ←説明文の文字サイズ /*
}
■「デザイン」→「デザイン設定」→「ＰＣ」→「ＣＳＳの編集」
 |
| 「ＣＳＳの編集」を選択 |
（２）「ヘッダー」の記載がある箇所を探します。
 |
| 編集箇所 |
（３）下記、サンプルを参考にＣＳＳの編集を行います。編集する場所は注釈文を入れている箇所です。「プレビュー」して成功していたら、「保存」して完了です。
 |
| ＣＳＳ編集後 |
数字を変えると表示結果が変わります。お好みで調整してみて下さい。
例：padding:0 0 0 100px; /* ←タイトルの位置 (左からの位置） */
↓
padding:0 0 0 200px; /* ←タイトルの位置 (左からの位置） */
■注釈文を参考に一行ずつ追加または、修正することをお勧め致します。
【コピペ用】
/* ヘッダー */
div#header {
padding:40px 0; /* ←ヘッダーの高さ調整 */
background-color:#ffffff;
background:url(オリジナル画像のＵＲＬ)left top no-repeat ;
/* ←オリジナルヘッダー画像 */
display:block;
}
#header h1 a {
padding:0 0 0 100px; /* ←タイトルの位置 (左からの位置） */
color:#ffffff; /* ←タイトルの文字の色を白色に変更 */
font-size:40px; /* ←タイトルの文字サイズ */
ext-decoration:none;
}
#header h1 a:hover { color:#ffffff; text-decoration:underline;} #header .description{
padding:0 0 0 120px; /* ←説明文の位置 (左からの位置）*/
color:#ffffff; /* ←説明文の文字の色を白色に変更 */
font-size:20px; /* ←説明文の文字サイズ /*
}
まとめ
ファンブログのＰＣ用テンプレートに、オリジナルヘッダー画像を設定すると雰囲気が大きく変わります。是非チャレンジしてみて下さい！
■ＣＳＳの編集を行う時は、バックアップを取ってから行うことをお勧めします。
■オリジナルヘッダー画像は、１０００ｐｘ。
■コピペ用ＣＳＳは、プレビューで確認しながら少しずつ修正と追加を繰り返すと分かりやすい。
