【カスタマイズ】タイトル画像をスマホ対応にする

タイトル画像のスマホ対応方法をご紹介！

今回公開した自作テンプレートで、タイトル画像をスマホ対応にする方法をご紹介します。

自作テンプレートはこちら▼ blog.hatena.ne.jp

その他カスタマイズ方法はこちら▼ michhecosume.hateblo.jp

タイトル画像をスマホ対応にする方法は、続きを読むからどうぞ。

タイトル画像を準備

タイトル画像のサイズは、はてなブログ推奨の1000px × 200pxで作成します。

1000px × 200pxの画像

画像をアップロード

デザイン設定→カスタマイズ→ヘッダ→タイトル画像→画像をアップロード

画像アップロードの手順

で、タイトル画像をアップロードします。

このままだとスマホで見たときに画像が見切れてしまうので、ここから以下のhtmlコードをデザインCSSに追加します。

htmlコード

以下のコードを丸っとコピーします。

/*タイトル画像スマホ対応*/
@media (max-width:480px) {
.header-image-only #blog-title {
height: 100px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: contain;
height: 100px;
}
}

注意点

タイトル画像のみの場合は上記コードでOKですが、画像とテキストを表示を選んだ場合は、.header-image-onlyを、.header-image-enableに変更してください。

また、heightの高さは好みに応じて調整してみてください。 (80pxくらいでもちょうどいいかもです。)

デザインCSSにペースト

デザイン設定→カスタマイズ→デザインCSSにペースト。

デザインCSSへペースト

注意点

以下のようなコード

/* <system section="theme" selected="26006613691040092"> */
@import url("https://blog.hatena.ne.jp/-/theme/26006613691040092.css");
/* </system> */

が既に入っていると思いますので、この下に追加する形でペーストしてください。
消さないように注意！

完成！

タイトル画像スマホ対応