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;
}