FOCUS

はてなブログテーマ"Focus"のカスタマイズやあれこれ

Focusでヘッダ部分を画像と置き換える方法

メインブログのヘッダ部分をテキストベースから画像に変更しましたのでその方法を紹介します。

ワクワクして働くための生産性↗向上Hacks

⇊こんな感じ⇊

f:id:ganapati55:20180111175206j:plain

画像への変更手順

以下のステップで画像へ変更可能です。

①画像を表示幅に合わせて2種類以上用意

最低でもPCとスマホ(縦表示)用の画像を用意しましょう。出来れば3種類あるのが良いです。PC・タブレット・スマホに合わせる感じですね。

※極端にシンプルなものでしたら1種類でも構わないかもしれません。

もしカラム数の変化に合わせたいときは以下のブレークポイントに合わせた画像を用意すると良いです。

3カラム(幅1400px以上)

2カラム(幅768~1399px)

スマホ表示(幅767px以下)

ちなみに画像の幅や高さはこの時点ではお好みで作成し、後から調整しましょう。迷ったら1800、1200、800pxくらいの幅で作成すれば調整しやすいです。

なお、作成した画像の背景を透過させたいときは以下のようなサイトを使うと便利です。

www.peko-step.com

②画像のURLを取得

画像を作成したら次は画像をはてなフォトライフ経由もしくはブログの写真を投稿するところにアップします。

アップロードしたら画像のURLを取得してください。URLの取得がわからない人は一度ブログ記事に落とし込んで表示させておいて、画像を右クリックして「画像のURLをコピー」を選択すれば取得できるはずです(Windows)。

③コードをデザインCSSに挿入

画像のURLを取得したら後はデザインCSSに落とし込むだけです。

ちなみに以下は私の事例です。画像のURLを入れ替えればそのまま使えます。

/* タイトル画像 */
#blog-title {
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/g/ganapati55/20171225/20171225135512.png"); /* PC用タイトル背景画像のURL */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    text-align: center;/* 中央寄せ */
    height: 225px;/* 表示したい画像の高さをここで調整できます。幅は自動的に調整されます。*/
    margin: 0;
    padding: 0;
    top: 0;
    overflow-x: hidden;
}
   
@media screen and (max-width: 1024px) {
/* 1024pxまでの幅のサイズ 。タブレット・スマホのための画像*/
      #blog-title {
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/g/ganapati55/20171225/20171225135517.png"); /* スマホ用タイトル背景画像 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    text-align: center;/* 中央寄せ */
    height: 150px;/* スマホなどで表示したい画像の高さ */
    margin: 0;
    padding: 0;
    top: 0;
    overflow-x: hidden;
          
    }
}
#title,#title a {
    display:none;
}
#blog-description {
 display:none;
}

私の場合、取り急ぎで作ったので2つしか画像を用意しませんでした・・・。ブレークポイントも結構微妙なラインで設定しています。

④実際の表示でチェック

デザインCSSを設定したら、後はPCとスマホで表示をチェックしておきましょう。

おそらく調整のポイントとなるのは

  • ブレークポイント幅の設定
  • 画像の表示の高さの設定
  • 画像が粗かったり細かかったりして見にくくないか

だと思います。

変更時のポイント

最後に変更時のポイントについてコメントしておきます。

必ずスマホでも確かめる

表示の確認はPCではブラウザの幅を変更しながら確認しましょう。

スマホ表示に関してもブラウザのデベロッパーモードではなく実際にスマホで表示させて確認しましょう。

ブレークポイントを考える

3カラムの人は特にブレークポイントの設定で難航しやすいです。

画像の中のレイアウトともかかわってきます。

時間をかけて調整するしかないです。

ヘッダ画像の高さに合わせる

ヘッダ画像の高さを早い段階で決めておきましょう。高さによって画像の表示幅が自動で変わるためです。

参考になれば幸いです。