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

top-image-setting-thumbnail

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

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

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

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

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

管理バー

管理バー

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

WordPress管理画面

WordPress管理画面

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

テーマカスタマイザー

テーマカスタマイザー

サイト基本情報

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

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

サイト基本情報

サイト基本情報

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

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

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

サイトアイコンの設定は必須ではありませんが、見栄えやオリジナルサイトを運営する上でもぜひおこなってください。

背景色、グローバルメニュー、見出しなどの色をカスタマイズします。

デフォルトでは緑系統になっているので、
サイトイメージに合わせて変更してください。

色

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

カラーピッカー

カラーピッカー

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

ヘッダー画像

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

ヘッダー画像

ヘッダー画像

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

背景画像

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

背景画像

背景画像

フルスクリーンは、コンテンツに隠れて画像のほとんどが見えなくなるのでお勧めしません。

つぎに、シームレス画像を並べるパターンですが、
素材画像は例えばこちらのサイトで無料で配布されています。

参考Subtle Patterns | Free textures for your next web project.

ほかにも「シームレス画像 無料」で検索するとサイトが見つかると思います。

シームレスパターン

シームレスパターン

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

まとめと次回の内容

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

ヘッダーと背景はホームページで一番目立つ部分です。

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

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

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

Twitterで

コメントを残す

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