【初期設定②】ヘッダー画像と背景の設定

top-image-setting-thumbnail

基本管理画面の設定に引き続き、
今回はヘッダー画像と背景の設定をおこないます。

基本管理画面の設定がまだの方はこちらからお願いします。

initial-setting-thumbnail
Healerでサイト制作をするための初期設定方法を解説していきます。 Healerはどなたでも簡単に使えるような設計にしていますが、

ヘッダー画像と背景の設定

WordPressにログインして、サイト上部の管理バーの カスタマイズ

管理バーの[カスタマイズ]をクリックします

管理バーの[カスタマイズ]をクリックします

または、管理画面から、 外観 > カスタマイズと進みます。

WordPress管理画面から[外観] > [カスタマイズ]と進みます

WordPress管理画面から[外観] > [カスタマイズ]と進みます

カスタマイズメニューが表示されますので、
「サイト基本情報」「色」「ヘッダー画像」「背景画像」の4つを変更します。

テーマカスタマイザーから「サイト基本情報」「色」「ヘッダー画像」「背景画像」を変更します

テーマカスタマイザーから「サイト基本情報」「色」「ヘッダー画像」「背景画像」を変更します

サイト基本情報

前回「サイトのタイトル」と「キャッチフレーズ」は入力済みですので、
その下のサイトアイコン画像を設定してください。

サイトアイコンは、PCブラウザのサイト名の左に小さく表示されるアイコンで「ファビコン」とも呼ばれます。

サイト基本情報からサイトアイコンを変更します

サイト基本情報からサイトアイコンを変更します

スマートフォンのホーム画面に登録したときのアイコンにもなります。

スマートフォンに表示されるサイトアイコン例

スマートフォンに表示されるサイトアイコン例

サイトアイコンの設定は任意ですが、オリジナルサイトを運営する上でもぜひおこなってみてください。

サイトのイメージカラーを設定しましょう。

サイトのイメージカラーを変更します

サイトのイメージカラーを変更します

マウスのドラッグで直感的に色を変更できます。

カラーピッカーで好きな色に変更できます

カラーピッカーで好きな色に変更できます

あまりたくさんの色を使いすぎると、訪問者の目が疲れてしまいますし、
デザイン素人まるだしのかっこ悪いサイトになってしまうので気を付けましょう。

どんな色の組み合わせがいいか迷う方は、「配色パターン 組み合わせ」などで検索すると参考になるサイトがありますのでご覧になってみてください。

背景に画像を使いたい場合は、白に指定しておいてください。

ヘッダー画像

トップページメニュー下に表示されるメイン画像です。

ヘッダー画像はフロントページのトップに表示される画像です

ヘッダー画像はフロントページのトップに表示される画像です

1920px × 750pxの画像を使用すると、
最も綺麗な解像度で表示が可能です。

背景画像

背景画像は、一枚絵フルスクリーンで見せるパターンと、
シームレス画像を並べてタイル式にするパターンがあります。

一枚絵の背景画像も設定できます

一枚絵の背景画像も設定できます

フルスクリーンは、中央部分がコンテンツに隠れてしまうのであまりおすすめしません。

パターン画像を並べることもできます。

素材画像がダウンロードできるサイトも多数あるので探してみてください。
パターン画像 シームレス 素材」などで検索すると見つかると思います。

パターン画像の背景も設定可能です

パターン画像の背景も設定可能です

「ページと一緒にスクロール」にチェックすると、
マウスに合わせて背景がついてきます。

まとめと次回の内容

今回は初期設定のヘッダー画像と背景の設定をおこないました。

ヘッダー画像と背景でサイトの雰囲気が決まりますので、
ぜひ吟味して素敵な画像・色で彩ってください。

次回は主要固定ページとグローバルメニューの設定をおこないます。

global-menu-setting-thumbnail
ヘッダー画像と背景の設定に引き続き、 今回は固定ページとグローバルメニューの設定をおこないます。 ヘッダー画像と背景の設定がまだの方
top-image-setting-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。