第4回：タイトルにオリジナルの画像を設定してみよう

自分で作った「カスタムテンプレート」のタイトル部分にオリジナルの画像を適用する方法です。

事前準備：タイトル用の画像を準備する

タイトル用の画像を準備します。

※画像の大きさについては下の 「point」のところで説明しています。

ご自分で作った（撮った）画像でもいいですし、素材サイトからお借りする方法もあります。
但し、素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。

※特に「切り取り」、「サイズ変更」、「文字入れ」など加工を考えている場合は加工を許可しているかどうか充分確認して下さい。

「自作で！」と思っていらっしゃる方ははっさくさんの下記の記事が参考になると思います。
■『はっさくノート』 様内 「タイトルバナーをオリジナルの画像で　　カスタマイズ・２方法」

準備した画像はPC内の判りやすい場所に保存しておきます。

画像をバナーに適用する

1. 「管理ページトップ」→「ブログ」タブ→「デザインの編集」→「テーマを変更」
   ※現在使っているテンプレートとは別のテンプレートを使う場合は、「テンプレートの管理」画面で該当のテンプレートを選択、 適用してから 「テーマを変更」に進んで下さい。
2. 「タイトルバナー」の「編集」ボタンを押し、編集画面を開く。
3. 「オプション設定」の「タイトルバナーに画像を使用する」と「アップロードした画像は、タイトルの背景として使用する」 にチェックを入れて、「参照」ボタンを押す。
   準備した画像を選択し、「開く」ボタンを押す。
4. 「変更を保存」ボタンを押す。
5. 一つ前の編集画面に戻るので、もう一度「変更を保存」ボタンを押す。
6. 「デザイン」画面に戻るので画面下方の「反映」ボタンを押す。
7. 「反映」画面が別窓で開くので、反映するファイルの範囲を選択して「反映」ボタンを押す
8. 「すべてのファイルを反映しました。」の画面に切り替わったら終了。
9. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか？

• 画像の大きさは、
  幅が「カスタムデザイン」の「ページ全般の設定」 で指定した 「記事部分」＋「サイドバー」 の幅を足した長さ
  （例えばここの場合、「記事部分：400px」＋「サイドバー：200px」×2で計「800px」となります）
  高さは150～180pxくらいが適当です。
  （高さはもっと大きくても大丈夫ですが、その分記事部分が下に下がります）
• 「アップロードした画像は、タイトルの背景として使用する」について
  準備した画像に既にブログ名が画像として入力されている場合は、この項目のチェックを外して下さい。
  ※入れたままだとテキストのブログ名も表示されてしまいます。
• この部分の設定については設定後反映する前に「デザイン（テーマ）」画面の「確認」ボタンで確認した場合、 画像が表示されない場合があるようです。
  「反映」してブログ画面を確認すればタイトル画像が表示されますので、事前に確認したい場合は「メインページ」のみに反映して確認する、 などの手段で確認してみて下さい。

タイトルの文字位置が上がりすぎてしまう場合の対応

上記の処理をしたところ、タイトル文字の位置が上がりすぎて上3分の1くらい切れてしまったので、下記の方法で調整しました。

「デザイン」→「カスタムCSSの編集」
CSSの入力欄に

#banner{padding-top: ●px;}
●部分に任意の数値を入力。（私は10に設定しました）

「変更を保存」→前の画面に戻るのでここで「バックナンバーに反映」
反映するファイルの範囲を選択して「反映」ボタンを押す。
「すべてのファイルを反映しました。」の画面に切り替わったら終了。
イメージ通りに出来ているかどうか確認する。

これでタイトルの文字位置が下に下がります。

「#banner」はタイトルバナー部分を指定するセレクタ、「padding」 はボックスの中の余白を指定するためのプロパティです。
つまり「バナー部分」の「上（top）の余白」を「●px」に設定する、というタグになります。

paddingの詳細な説明はこちらのページなど参考にして下さい。
■「TAG index」さん内「ボックスのパディング（内側の余白）を指定する」
※HTMLやCSSのタグが設定サンプル付きで説明されていて判りやすいサイトです。

---

■タイトル画像は素材サイト「ミントblue」さんから頂きました。

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。

---

*この記事にコメントを書く*

---