ハミングバードの背景画像を変更する方法を紹介します。
背景画像を用意する
無料素材サイトから背景画像に使う画像をダウンロードします。
個人的には、ハミングバードにも使用されている「Subtle Patterns」がおすすめです。
Subtle Patterns
気に入った画像があれば、「PREVIEW」で確認して「DOWNLOAD」からダウンロードして下さい。
画像をダウンロード
ZIPファイルを解凍して画像を取り出したら準備は完了です（必要なのは画像ファイルだけ）。
背景画像の変更
ダッシュボードの外観「カスタマイズ」をクリックします（ログインした状態で画面上のツールバー「カスタマイズ」をクリックでも可）。
カスタマイズをクリック
メニューから「背景画像」をクリックします。
背景画像をクリック
背景画像「画像の変更」をクリックします。
画像の変更をクリック
ドラッグ＆ドロップで画像をアップロードし、「画像を選択」をクリックします。
画像をアップロードして選択
背景画像が変更されたことを確認し、「公開」をクリックして設定完了です。
公開をクリック
プリセットや画像の位置等、細かい調整もできますが、初期設定から変更する必要はありません（綺麗に繰り返し表示されない時のみ調整して下さい）。
白背景にする
白背景にする方法は2種類あります。
- コンテンツのみを白背景にする
- サイト全体を白背景にする
コンテンツのみを白背景にする方法は、ハミングバードでコンテンツ背景を白色に変更するCSSカスタマイズ | OPENCAGEを参考にして下さい。但し、メインカラムの横幅が狭くなるのであまりお勧めはしません。コンテンツのみを白背景にしたい方はストークの購入をお勧めします。
サイト全体を白背景にしたい時は、「背景画像を削除して背景色を指定」します。
カスタマイズ画面「背景画像」の「削除」をクリックします（デフォルトの画像が削除される訳ではないので、いつでもデフォルト画像に戻すことができます）。
背景画像を削除
カスタマイズ画面「サイトカラー設定」の「背景色」を「#ffffff」に変更し、「公開」をクリックすれば設定完了です（デフォルトの背景色は「#f7f7f7」になっています）。
サイトカラー設定
これでサイト全体が白背景になります。
最後に
デフォルトの背景画像から変更したい方は今回紹介した方法を試してみて下さい。
ちなみに、僕は目が疲れにくいのでセピア系の背景色が気に入っています。
最近のコメント