【自作テンプレートカスタム】ヘッダに画像を設置する方法
コメントで当サイトのテンプレートのヘッダに画像を載せるのが上手く行かないという指摘を貰ったので、これを解決する方法を紹介したいと思います。
概要
Bloggerではガジェットの機能を使ってヘッダに画像を設置することができます。ですが、当サイトで配布中のテンプレートの場合、デフォルトの機能を使って画像を配置すると上手く行かない設定になってしまいました。
これについてはCSSを使った画像の設置方法で解決することができるので、今回はその方法を紹介したいと思います。なお、デフォルト機能を使った場合に関する説明については下記の「解説」にて後述します。
ちなみにサイトの画像を使う場合は、読み込みを軽くするために圧縮するのがオススメです。以下のサイトなんかで簡単に画像を圧縮することができます。
・I♥IMG：https://www.iloveimg.com/ja
ヘッダタイトルを画像にする方法
1．画像を用意する
ヘッダタイトルに変わる画像を準備して下さい。元画像のサイズはCSSで調整するので、PCモニタで見た時にボケずにキレイに見える程度の画像サイズがあれば十分だと思います（今回は幅800px程度の画像を使用）。
2．画像をアップロードする
管理画面で適当なページを作成して、そこに用意した画像をアップロードして下さい。そして元画像のURLを取得します。URL取得の方法は以下の通りです。
・作成ビュー：画像を右クリックして「画像アドレスをコピー」をクリック（Chromeの場合）
・HTMLビュー：<a>タグ内にある画像アドレス（～.jpgや～.pngで終わるもの）
・HTMLビュー：<a>タグ内にある画像アドレス（～.jpgや～.pngで終わるもの）
3．HTML部分に画像を設置するタグを書き込む
・管理画面 → テーマ を選択してテンプレートのバックアップを取得する
・そのまま HTMLを編集 を選択してテンプレートエディタを開く
・Ctrl＋Fで「<b:includable id='title'>」を検索
・「<b:includable id='title'>」の直下を以下のように書き換える
変更前
<h1>
<a expr:href='data:blog.homepageUrl'>
<data:title/>
</a>
</h1>
<a expr:href='data:blog.homepageUrl'>
<data:title/>
</a>
</h1>
変更後
<a expr:href='data:blog.homepageUrl'>
<img alt='自分のブログタイトル' src='タイトル画像のURL' title='自分のブログタイトル'/>
<h1>
<data:title/>
</h1>
</a>
<img alt='自分のブログタイトル' src='タイトル画像のURL' title='自分のブログタイトル'/>
<h1>
<data:title/>
</h1>
</a>
※alt・title属性は付けても付けなくても設置に問題ありません
※<h1>タグは変更後に元に戻す場合に必要になるので敢えて残しています
4．CSSを調整する
・Ctrl＋Fで「#Header1 a {」を検索
・以下のCSSを変更前から変更後に書き換える
変更前
/* ブログタイトル */
#Header1 a {
color: #fff;
font-size: 40px;
padding: 5px 0;
margin: 3px auto;
text-decoration: none;
cursor: pointer;
}
#Header1 a {
color: #fff;
font-size: 40px;
padding: 5px 0;
margin: 3px auto;
text-decoration: none;
cursor: pointer;
}
変更後
/* ブログタイトル */
#Header1 h1 {
visibility: hidden;
font-size: 0;
height: 0;
width: 0;
margin: 0;
}
/* ヘッダーイメージ */
#Header1 img {
width: 20vw;
height: auto;
max-width: 80%;
}
#Header1 h1 {
visibility: hidden;
font-size: 0;
height: 0;
width: 0;
margin: 0;
}
/* ヘッダーイメージ */
#Header1 img {
width: 20vw;
height: auto;
max-width: 80%;
}
※元々のブログタイトルであった<h1>部分は非表示にしています
※widthの20vwは画面サイズの2割分ということです（タイトルのサイズに合わせて変更してください）
5．レスポンシブデザインのCSSを記述する
・上記の下部にある「/* レスポンシブデザイン（スマホ用） */」を変更前から変更後に書き換える
変更前
/* レスポンシブデザイン（スマホ用） */
@media (max-width: 768px) {
#Header1 {
text-align: center;
}
.header-inner {
width: 90%;
margin: 0 auto;
}
#Header1 a {
font-size: 28px;
}
#Header1 p {
font-size: 12px;
margin: 6px 0;
}
}
@media (max-width: 768px) {
#Header1 {
text-align: center;
}
.header-inner {
width: 90%;
margin: 0 auto;
}
#Header1 a {
font-size: 28px;
}
#Header1 p {
font-size: 12px;
margin: 6px 0;
}
}
変更後
/* レスポンシブデザイン（スマホ用） */
@media (max-width: 768px) {
#Header1 {
background-size: auto 100%;
}
#Header1 img {
width: 80vw;
}
.header-inner {
width: 90%;
margin: 0 auto;
}
#Header1 h1 {
padding: 0;
margin: -10px 0 -10px;
}
#Header1 a {
font-size: 3rem;
text-shadow: 3px 2px 0 #000;
}
#Header1 p {
display: none;
}
}
@media (max-width: 768px) {
#Header1 {
background-size: auto 100%;
}
#Header1 img {
width: 80vw;
}
.header-inner {
width: 90%;
margin: 0 auto;
}
#Header1 h1 {
padding: 0;
margin: -10px 0 -10px;
}
#Header1 a {
font-size: 3rem;
text-shadow: 3px 2px 0 #000;
}
#Header1 p {
display: none;
}
}
※widthの80vwは画面サイズの8割分ということです（タイトルのサイズに合わせて変更してください）
補足：タイトルを中央寄せにする
「#Header1 {}」の「text-align: left;」を「text-align: center;」に変更すれば中央寄せにできます。
その他の細かい微調整は「ヘッダー」内にあるCSSを調整して下さい。
ヘッダ背景を画像にする方法
1．画像を用意する
ヘッダ背景に変わる画像を準備して下さい。元画像のサイズはCSSで調整するので、PCモニタで見た時にボケずにキレイに見える程度の画像サイズがあれば十分だと思います（今回は幅1000px程度の画像を使用）。
2．画像をアップロードする
管理画面で適当なページを作成して、そこに用意した画像をアップロードして下さい。そして元画像のURLを取得します。URL取得の方法は以下の通りです。
・作成ビュー：画像を右クリックして「画像アドレスをコピー」をクリック（Chromeの場合）
・HTMLビュー：<a>タグ内にある画像アドレス（～.jpgや～.pngで終わるもの）
・HTMLビュー：<a>タグ内にある画像アドレス（～.jpgや～.pngで終わるもの）
3．CSSで背景画像を設定する
・管理画面 → テーマ を選択してテンプレートのバックアップを取得する
・そのまま HTMLを編集 を選択してテンプレートエディタを開く
・Ctrl＋Fで「#Header1 {」を検索
・「#Header1 {}」内に以下の記述を書き加える（「}」の直上あたりに記述する）
background-image: url("背景の画像のURL");
background-size: 100% 100%;
background-size: 100% 100%;
※「background-size: 100% auto;」にすると縦サイズを保持したまで画像を設置できます（ただし途中で切れる）
※レスポンシブデザインの設定は特に必要ないと思われます（問題があればコメントでお知らせください）
補足：ヘッダの縦サイズを変更する
「#Header1 {}」内に「height:サイズ（px,%,vhなど）;」を記述することで縦サイズを設定することができます。また、ブログタイトルのサイズや余白を調整することでも変更することが出来ます。
ヘッダ背景をパターン画像にする方法
1．画像を用意する
ヘッダ背景になるパターン画像を準備して下さい。元画像のサイズは100x100程度で大丈夫です。
2．画像をアップロードする
管理画面で適当なページを作成して、そこに用意した画像をアップロードして下さい。そして元画像のURLを取得します。URL取得の方法は以下の通りです。
・作成ビュー：画像を右クリックして「画像アドレスをコピー」をクリック（Chromeの場合）
・HTMLビュー：<a>タグ内にある画像アドレス（～.jpgや～.pngで終わるもの）
・HTMLビュー：<a>タグ内にある画像アドレス（～.jpgや～.pngで終わるもの）
3．CSSで背景画像を設定する
・管理画面 → テーマ を選択してテンプレートのバックアップを取得する
・そのまま HTMLを編集 を選択してテンプレートエディタを開く
・Ctrl＋Fで「#Header1 {」を検索
・「#Header1 {}」内に以下の記述を書き加える（「}」の直上あたりに記述する）
background-image: url("背景の画像のURL");
background-clip:border-box;
background-clip:border-box;
解説
HTMLとCSSを直接変更して画像を設置する理由
そもそもBloggerでは標準の仕様でヘッダに画像を配置することができますが、これに付随するCSSの設定が分かりづらいので、初心者にとっては逆に設定しづらいものになっています。
ですので、当サイトで配布中のテンプレートでは、これを使用しない前提で設定していました。これについては今まで解説することを忘れていましたので、頭を悩ませた方々にはお詫び申し上げます。
とりあえず、上記の方法でヘッダに画像を挿入することが可能です。これはその他のテンプレートでも応用できると思われますので、Chromeのデベロッパーツールなどを使って試してみると良いかと思われます。
Bloggerの標準の仕様について
Bloggerではレイアウト画面からヘッダに画像を設定できる機能が標準で付いています。これをSmartで設定すると以下のような状態になってしまいます。
これをコントロールするには、Bloggerのガジェットに付随する<style>タグ内のCSSを変更する必要が出てきます。これに関しては公式ヘルプにも説明が無いので、ユーザーが自分で見つけて書き換えるしか無いのですが、これは「.header-widget{}」や「a img{}」というセレクタであったりするので、初心者には変更が難しくなっています。
今回説明したヘッダ画像の設定方法は一見難しく見えるかも知れませんが、公式の不自由な仕様をそのまま使うよりは、独自に設けたCSSで変更する方法を覚えておいた方が有意義だと思われます。
画像の作成方法について
画像の作成方法自体は当記事で説明することではありませんが、画像を編集するに当たって以下の無料ツールが軽くて使いやすいと思うので、以下にリンクを貼っておきます。
・Inkscape（インクスケープ）：AdobeIllustratorに似た機能を持つ無料ツールでpng出力が可能
・PhotoScape X（フォトスケープエックス）：簡単に使える多機能な画像編集ツール
スポンサーリンク
スポンサーリンク
コメント
0 件のコメント :
コメントを投稿