初心者でもわかる超簡単WordPress入門（５）【外観のカスタマイズ編（Simplicity）】

こんにちは、Koh-hey(@Flexible-Life)です！

前回は「Simplicity」というWordPressのテーマをインストールしましたが、初期状態での見た目はまだまだ質素でしたね。

でも安心してください。オシャレにできますよ♪

ということで今回は、「外観のカスタマイズ」についてご紹介します。

「Simplicity」はカスタマイズの設定項目が豊富なので、自分好みにどんどんアレンジしちゃいましょう！

カスタマイズの設定画面

まずは、下記の手順でカスタマイズの設定画面を開きましょう。

１．WordPressのダッシュボードを開き、「外観」→「カスタマイズ」をクリックします。

２．カスタマイズの設定画面に移行します。左の欄が、設定項目です。

かなりたくさん項目がありますね。
Simplicityは、この設定項目が非常に豊富です。
（WordPressのテーマによって、この項目数は変わります。）

今回はこの項目の中から、外観に関係する下記の項目についてご紹介します。

• サイト基本情報
• 色
• ヘッダー
• 背景画像
• スキン

※使用する画像ファイルについて
カスタマイズの設定項目の中には、画像ファイルを設定するものがあります。
インターネット上に存在する画像ファイルには、著作権を有するものがあります。
著作権がある画像を無断で使用してしまうと、違法と見なされてしまいますので、
注意しましょう。

サイト基本情報

サイト基本情報では、サイトのタイトル・キャッチフレーズ・サイトアイコンの設定ができます。

サイトアイコンとは、ファビコン（favicon = favorite icon）とも言い、お気に入り登録したときに表示されるアイコンのことです。

１．カスタマイズの設定項目から、「サイト基本情報」をクリックします。

２．サイトのタイトル(赤枠)、キャッチフレーズ(青枠)をそれぞれ変更できます。

３．サイトアイコンを設定する場合は、「512×512ピクセル」の画像を使用します。
　　あらかじめ用意しておきましょう。

４．画像を用意したら、「画像を選択」をクリックします。

５．「メディアライブラリ」をクリックし、画像をドラッグ&ドロップします。
　　(画像ファイルを左クリックしたままメディアライブラリ内に持っていく)

６．画像にチェックが入っていることを確認し、「選択」をクリックします。

７．設定が完了したら、「保存して公開」をクリックします。

８．「保存しました」と表示されたのを確認したら、「<」をクリックし、
　　　カスタマイズの設定画面に戻ります。

※サイトアイコンの画像について
今回使用したサイトアイコンの画像は、下記のサイトからダウンロードしました。
（無料で商用利用が可能です。）
icooon-mono：http://icooon-mono.com/

色

色では、サイトのタイトル・ヘッダー・背景など、サイトの外観に関する色を設定できます。

１．カスタマイズの設定項目から、「色」をクリックします。

２．色は、それぞれ下図のように対応しています。好みの色に変更しましょう。

■背景色・リンク色・リンクホバー色・ヘッダー外側背景色・ヘッダー内側背景色

■サイトタイトル色・サイト概要色・モバイル時ヘッダー背景色・モバイルサイトタイトル色
　モバイルサイト背景色・グローバルナビ色・グローバルナビリンク色

■グローバルナビリンクホバー色・メニューボタン色・メニューボタン背景色
　トップへ戻るボタン色・トップへ戻るボタン背景色・フッター色

３．色の設定が完了したら、「保存して公開」をクリックします。

４．「保存しました」と表示されたのを確認したら、「<」をクリックし、
　　　カスタマイズの設定画面に戻ります。

ヘッダー

ヘッダーでは、ヘッダーの画像やグローバルナビの表示の長さ、ロゴ画像の設定ができます。

ヘッダーの画像は、設定方法が２通りあります。
ブログの幅に合わせて表示させる方法と、画面端いっぱいに表示させる方法です。

まずは、カスタマイズの設定項目から、「ヘッダー」をクリックします。
ヘッダーの設定項目から、２通りの設定方法についてご紹介します。

ヘッダー画像の設定方法①：ブログの幅に合わせて表示

１．ブログの幅に合わせる場合は、「1070×100 ピクセル」のサイズの画像を使用します。
　　あらかじめ用意しておきましょう。
　　画像の高さは、100～200程度であれば大丈夫です。

２．ヘッダーの高さを、画像に合わせて入力します。
　　今回は「200」と入力しました。入力すると、その数値に合わせて高さが変化します。

３．現在のヘッダーの「新規画像を追加」をクリックします。

４．「メディアライブラリ」をクリックし、画像をドラッグ&ドロップします。
　　(画像ファイルを左クリックしたままメディアライブラリ内に持っていく)

５．画像にチェックが入っていることを確認し、「選択して切り抜く」をクリックします。

６．「切り抜かない」をクリックします。
　　今回は「切り抜かない」を選択しておりますが、高さを100ピクセルで
　　切り抜くこともできます。

７．ヘッダーに画像が表示されます。

８．設定が完了したら、「保存して公開」をクリックします。


９．「保存しました」と表示されたのを確認したら、「<」をクリックし、
　　 カスタマイズの設定画面に戻ります。

※ヘッダーの画像について
今回使用したヘッダーの画像は、下記のサイトからダウンロードしました。
（無料で商用利用が可能です。）
Pixabay：https://pixabay.com/

ヘッダー画像の設定方法②：画面端いっぱいに表示

１．画面端いっぱいに表示させる場合は、「1280×500 ピクセル」の画像を使用します。
　　あらかじめ用意しましょう。画像は高めに設定されています（理由は後述）。

２．ヘッダー画像が表示されている場合は、現在のヘッダーの「画像を非表示」を
　　クリックします。

３．ヘッダーの画像が非表示になったら、ヘッダー外側背景画像の「画像を選択」を
　　クリックします。

４．「メディアライブラリ」をクリックし、画像をドラッグ&ドロップします。
　　(画像ファイルを左クリックしたままメディアライブラリ内に持っていく)

５．画像にチェックが入っていることを確認し、「画像を切り抜く」をクリックします。

６．ヘッダーの画像が、画面端いっぱいに表示されます。

７．ヘッダーの高さの数値を変更し、好みの高さに合わせます。
　　今回は「250」と入力しております。

８．設定が完了したら、「保存して公開」をクリックします。

９．「保存しました」と表示されたのを確認したら、「<」をクリックし、
　　カスタマイズの設定画面に戻ります。

※ヘッダーの画像について
今回使用したヘッダーの画像は、下記のサイトからダウンロードしました。
（無料で商用利用が可能です。）
Pixabay：https://pixabay.com/

ヘッダー画像を高めに設定する理由

これは、「全画面表示」と「縮小表示」を見比べるとわかります。

■全画面表示

■縮小表示

Webブラウザを縮小すると、ヘッダーの画像の下がスケスケに隙間ができちゃうんですね。
（ここまで縮小させることはあまりないですが･･･）

ということで、縮小時の隙間をできにくくするために、画像を高めに設定するわけですね。

グローバルナビを横幅いっぱいにする

これはそのままの意味で、チェックを入れるとグローバルナビを横幅いっぱいにしてくれます。

すでにグローバルナビが横幅いっぱいになるスキンを選択している場合は、特にチェックを入れる必要はないです。

■チェックを入れる前

■チェックを入れた後

ロゴ画像の設定

ロゴ画像の設定では、サイト名にロゴ画像を使用することができます。
サイト名をロゴ画像にすると、オリジナリティが増すのでオススメです。

１．ロゴ画像の「画像の追加」をクリックします。

２．「メディアライブラリ」をクリックし、画像をドラッグ&ドロップします。
　　(画像ファイルを左クリックしたままメディアライブラリ内に持っていく)

３．画像にチェックが入っていることを確認し、「画像の選択」をクリックします。

４．「ロゴを画像にする」にチェックを入れると、サイト名にロゴ画像が表示されます。

５．「保存して公開」をクリックします。

６．「保存しました」と表示されたのを確認したら、「<」をクリックし、
　　カスタマイズの設定画面に戻ります。

※ロゴ画像について
今回使用したロゴ画像は、下記のサイトからダウンロードしました。
好みのデザインや大きさのロゴを作成できるのでオススメです。
Cool Text：http://ja.cooltext.com/

背景画像

背景画像では、文字通りサイトの背景の画像を設定します。
サイトの配色によりますが、白系の色が見やすいと思います。
（背景画像の表示をわかりやすくするため、ヘッダー画像は非表示にしております。）

１．カスタマイズの設定項目から、「背景画像」をクリックします。

２．「画像を選択」をクリックします。

３．メディアライブラリが開くので、背景にしたい画像をドラッグ＆ドロップします。
(画像ファイルを左クリックしたまま赤枠内に持っていく)

４．画像にチェックが入っていることを確認し、「画像の選択」をクリックします。

５．サイトの背景に画像が表示されます。
　　画像の表示方法を、「背景の繰り返し」、「背景の配置」、「背景スクロール」の
　　３つの項目の中から選択できます。

■繰り返しなし

■タイル

■水平方向に繰り返し

■垂直方向に繰り返し

■背景の配置：左

■背景の配置：中央

■背景の配置：右

■スクロール

■固定（スクロールしても背景が動かない）

６．好みの背景画像を選択したら、「保存して公開」をクリックします。

７．「保存しました」と表示されたのを確認したら、「<」をクリックし、
　　カスタマイズの設定画面に戻ります。

スキン

スキンは、外観のテーマにあたる設定項目です。

１．カスタマイズの設定項目から、「スキン」をクリックします。

２．スキンの種類が表示されるので、この中から好みのスキンを選択します。

■シック（グローバルナビが横一直線になります。）

■ラージピクチャーヘッダー（ヘッダーに画像が表示されます。）

※ヘッダーの画像について
ヘッダーの画像は、カスタマイズで好きな画像に変更できます。

■Monokai（奇抜なカラーの外観になります（笑）。）

３．スキンの選択が完了したら、「保存して公開」をクリックします。
　　今回は「シック」を選択しております。

４．「保存しました」と表示されたのを確認したら、「<」をクリックし、
　　カスタマイズの設定画面に戻ります。

次回：WordPress初期設定編

ワォ！Koh-heyちゃんのサンプルサイト、イッツソーフルーティー！

見た目はアレですが、外観のオリジナリティはこれで大分出せるようになったと思います。

この設定方法で、サイトをアレンジしてみましょう！

次回は、ブログを書くにあたって必要なWordPressの初期設定についてご紹介します。

http://flexible-life.com/wordpress/introduction/initial-setting/