タイトル画像の設定とサイズの調整

Blogger で作成したブログでデフォルトではタイトルに画像が設定されていないテーマであってもあとから画像を設定することができます。ここではタイトル画像を設定する方法、および画像のサイズを調整する方法について解説します。

タイトルの背後に画像を設定する

Blogger で用意されているテーマではデフォルトでタイトルやタイトルの背後に画像を設定しているものはありません。「Contempo」や「Soho」などの新しいテーマや「画像ウィンドウ」ではブログの背景に画像を設定し、タイトルの背景は透明か半透明に設定されています。

今回はタイトルが表示されているところに画像を設定する方法について解説します。タイトルに画像を設定するには「ページヘッダー」ガジェットの設定で行います。「ページヘッダー」ガジェットはほとんどのテーマででデフォルトで追加されています。 Blogger の管理画面左側に表示されている「レイアウト」をクリックしてください。

「レイアウト」画面が表示されます。

「ヘッダー」のところに「ページヘッダー」ガジェットが追加されていますので「編集」をクリックしてください。

「ページヘッダー」ガジェットの設定画面が表示されます。

今回は十分大きい画像を用意したので最初に「ページに合わせてサイズを調整」にチェックを入れてください。画像をアップロードしたあとではチェックできません。その後で「ファイルを選択」をクリックして使用する画像ファイルを選択してください。画像のアップロードが行われます。

画像のアップロードが完了したらプレースメントとして「タイトルと説明の背後」を選択してください。その後で「保存」をクリックしてください。

タイトル画像の設定が完了しました。

それではブログへアクセスしてみます。するとタイトルの背後にアップロードした画像が表示されました。

画像サイズの調整

「ページに合わせてサイズを調整」にチェックをしているので、画像の縦と横の比率をそのままに画像が横幅にぴったり収まるように画像が縮小されています。ただそれでも画像の高さはもともとタイトルが表示されていた部分よりも大きいため、画像の高さに合わせてタイトルを表示する部分が大きくなっています。

もちろんタイトルの部分の高さが大きくなっても問題なければこのままでいいですが、タイトルの部分の高さは変更したくない場合は CSS を追加して調整します。「シンプル」テーマでプレースメントとして「タイトルと説明の背後」を選択している場合、実際の HTML 文では次のように記述されていました(一部抜粋です)。

※ テーマが異なると全然違う構成になっている場合がありますのでご了承ください

画像の高さを親要素の高さに合わせるために次のような CSS を追加で記述することにします。

ブログに独自の CSS を追加するには、 Blogger の管理画面左側に表示されている「テーマ」をクリックしてください。

「テーマ」画面が表示されます。「ブログで使用中」の下に表示されている「カスタマイズ」をクリックしてください。

テーマのカスタマイズを行う画面が表示されます。

左上に表示されている「上級者向け」をクリックしてください。

すぐ右側にサブメニューが表示されます。一番下に表示されている「CSSを追加」をクリックしてください。

カスタム CSS を記述するテキストエリアが表示されます。

テキストエリアに先ほどの CSS を記述してください。(記述すると画面下部に表示されているプレビューにすぐに反映されます)。

CSS の入力が終わりましたら画面右上の「ブログに適用」をクリックしてください。

これでテーマにカスタム CSS が反映されました。なおこの画面から Blogger の管理画面に戻るには、画面右上に表示されている「Bloggerに戻る」をクリックしてください。

それではブログにあらためてアクセスしてみると、タイトルの下に表示されていた画像の高さが元々のタイトルが表示されていてエリアのサイズにあうように変更されているのが確認できます。

タイトルの代わりに画像を設定する

先ほどは「ページヘッダー」ガジェットの設定画面でプレースメントとして「タイトルと説明の背後」を選択しました。この設定の場合は、タイトルや説明は今まで通り <h1> タグの要素として残し、その背後に画像を設定することになります。

今度はプレースメントとして「タイトルと説明の代わり」を選択してみます。この設定の場合は、テキストでのタイトルや説明なくなり設定した画像が <h1> タグの要素として設定されます。

それでは先ほどと同じように「ページヘッダー」ガジェットの設定画面を開き、「ページに合わせてサイズを調整」にチェックをつけてからプレースメントとして「タイトルと説明の代わり」を選択し、その後で「ファイルを選択」をクリックして画像ファイルを選択します。今回は画像だけなのでタイトルが含まれる画像を用意して選択しました。

画像のアップロードが終わりましたら「保存」をクリックしてください。

タイトル画像の設定が完了しました。

それではブログへアクセスしてみます。するとタイトルの代わりにアップロードした画像が表示されました。

-- --

今回も画像の高さに合わせてタイトルが表示されていた部分の高さが高くなっています。タイトル部分の高さはもう少し低くしたい場合は CSS を追加して調整します。「シンプル」テーマでプレースメントとして「タイトルと説明の代わり」を選択している場合、実際の HTML 文では次のように記述されていました(一部抜粋です)。

※ テーマが異なると全然違う構成になっている場合がありますのでご了承ください

画像の高さを指定の高さに設定し、画像の中央を表示するためには次のような CSS を追加で記述することにします。( 170px の値は任意の値を指定してください)。

それでは先ほどと同じ手順でカスタム CSS を設定する画面を表示し、上記の CSS を記述してください。

CSS の入力が終わりましたら画面右上の「ブログに適用」をクリックしてください。

これでテーマにカスタム CSS が反映されました。

それではブログにあらためてアクセスしてみると、タイトルがあった位置に表示されていた画像の高さが指定した高さに変更されているのが確認できます。

-- --

タイトル画像を設定する方法、および画像のサイズを調整する方法について解説しました。