当サイトで利用しているBloggerは、とても優れたブログサービスです。
Googleアカウントを持っていれば、
- 無料で広告なしのブログを開設できる
- 自動でモバイルフレンドリーの表示になってくれる
- ブログ名.blogspot.comというURLなのである程度ブランディング性を出せる
- そこそこレイアウトを選べる
- テンプレートがわりかし豊富である
- テンプレートのHTML/CSSを（ある程度）カスタマイズできる
と、他のブログサービスにはない優位性があります。不安要素としては、Googleのことなので突然のサービス終了を切られてしまうか、ぐらいでしょうか。
さて今回は、テンプレートで用意された背景画像を、自分で用意した画像に差し替えて、さらにスクロールしても画像が固定されたまま、というカスタム方法を紹介します。
DTMとはなんの関連もありませんのであしからず。
背景画像を用意する
画像ファイルがBlogger上に存在しなければならないので、まず背景画像用のページを作成します。「＋新しいページ」から画像だけを貼り付けたページを作成しましょう。公開不要なので「下書き」のままで構いません。
その際、貼った画像をChromeなら右クリックして「画像アドレスをコピー」で、Blogger上の画像のURLを取得しておきます。メモ帳かなにかに貼り付けておくと良いでしょう。
HTML/CSSをカスタマイズする
「テーマ」から「カスタマイズ」ボタンの▼を押し、プルダウンから「HTMLを編集」を選びます。するとテンプレートのHTMLエディタが表示されるので、WindowsならCtrl+Fで「/* Content」を検索しましょう。
おそらく180行前後に、
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
このようなCSS指定があるので、下記のようにカスタムします。
body {
font: $(body.font);
color: $(body.text.color);
/* background: $(body.background); */
background: url("予め取得しておいた画像URL") center center / cover no-repeat fixed;
}
/* ～ */はコメントアウトしただけなので、上書きしても構いません。
これで完了です！
スマートフォン用の表示を調整する
これはスマートフォン表示をカスタムしたテンプレートを選択している場合に必要な作業です。
カスタム表示は、先程のHTMLエディタに入ったときの「HTML編集」の次にある「モバイルの設定」から選択できます。
「モバイルのテーマを選択」の右側のプルダウンから「カスタム」を選ぶと、PC表示用のカスタムテンプレートと同じ背景画像を表示できますが、スマートフォン用にCSSの指定を追加しなければなりません。
というのも同じ画像を表示するのに、横幅がスマートフォン端末の画面に収まってしまって、結果的に中央にだけ小さく表示される、という状態になるからです。
それを解消するには、2箇所のカスタムが必要です。
まずHTMLエディタを開いてすぐ4行目に<head>タグがありますが、次の行に、
<meta content='width=device-width,initial-scale=1' name='viewport'/>
を書き加えます。これの詳細は他のサイトを参照してください。一種のおまじないです。
次に「html body.mobile {」を検索すると、おそらく520行目ぐらいに
html body.mobile {
height: auto;
}
html body.mobile {
min-height: 480px;
}
このようなCSS指定が見つかると思います。これを、
html body.mobile {
height: auto;
}
html body.mobile {
min-height: 480px;
background-size: auto;
background-color: rgba(255, 255, 255, 0.8);
background-blend-mode: lighten;
}
background-color:とbackground-blend-mode:は、言わば色調補正のようなもので、この指定では背景画像に白を80%を重ねる（＝薄くする）という表示を指定しています。薄くすることで黒のテキストを読みやすくするのが狙いです。
例えば「0, 0, 0, 0.5」だと、黒を50%重ねます。つまり左から「R, G, B, T（透過性）」です。
これで完了です！
以上、Bloggerで好みの背景画像を固定する方法でした。
0 件のコメント:
コメントを投稿