ワードプレス（WordPress)のテンプレートであるSimplicityをカスタマイズしてかっこよく見せる方法について解説します。ヘッダーは訪れた方が、最初に目にして、あなたからのメッセージを受け取る場所なので精魂込めてしっかり作りましょう。
初心者の方にも分かりやすく動画解説をご準備しました。
目次
Simplicityのヘッダーと背景のカスタマイズ方法 解説動画
ヘッダー画像の作り方はPhotoscapeの使い方で解説しています。使い方をマスターしましょう。
Simplicityのヘッダー画像のサイズ
まずは、Simplicityでヘッダー画像を設定する方法についてお伝えします。
ヘッダー画像の画像サイズは「1070×100ピクセル」で作っておくと後の設定時に楽です。画像をアップロードした後に余計な編集作業を省くことができます。
ヘッダー画像を設定する
ここからワードプレス（WordPress）での作業を説明します。
ワードプレス（WordPress）にログインして管理画面のダッシュボードの左サイドメニューから、
「外観」→「ヘッダー」
を選択します。
「現在のヘッダー」のところにある「新規画像を追加」を選択します。
「ファイルをアップロード」タブを選択→「ファイルを選択」をクリックして、ヘッダー画像として使用したい画像を選択して「開く」をクリックします。
画像がアップロードしたら「選択して切り抜く」を選択します。
ヘッダー画像がサイズぴったりの場合
ヘッダー画像をSimplicityの設定にあった1070×100ピクセルの同じサイズで作成している場合には、画像を切り抜く必要はありません。ですので「切り抜かない」をクリックすればヘッダー画像の設定は完了です。
ヘッダー画像のサイズがぴったりではない場合
一方、サイズがぴったりではない画像を選択した場合、「選択して切り抜く」をクリックします。画像の切り抜き画面が表示されると、画像の一部がハイライトされた画面が表示されます。
そのハイライトされた画面がヘッダー画像として設定されるので、ドラッグして好きな位置を選び切り抜く範囲を指定します。
位置を指定できたら、「画像切り抜き」をクリックします。
ヘッダーの高さを変える
ヘッダーの高さとは、次の画像の赤い矢印が示す様にヘッダーの上の部分から、グローバルメニューの上までの幅のことを指します。
Simplicityのデフォルトでは「１００」ピクセルに設定されていますが、任意の数字を入力して変更が可能です。私の場合は「１２０」にしています。
ロゴ画像を設定する
ヘッダー画像の上にのっている文字をサイトタイトルと呼びますが、このサイトタイトルをロゴ画像に変更することが可能です。
サイトタイトルは、クリックすると、どのページにいてもトップページに戻れる様になっています。
サイトタイトルにトップページへのリンクが貼られているのかは、サイトタイトルにカーソルをあわせれば、カーソルが手の形になってわかる様になっています。Simplicityの場合はサイトタイトルにトップページのリンクが自動で貼られます。
このサイトタイトルをロゴ画像に変更することが可能です。もちろんロゴ画像には自動にトップページのリンクが貼られます。
変更の仕方は、「ロゴ画像」の欄にある「画像を選択」をクリックして、「ファイルを開く」→「ファイルを選択」をクリックします。
使用したい画像を選択して「開く」をクリックします。画像がアップロードできたら、「画像を選択」をクリックします。※ロゴ画像は予めご用意ください。
画像を挿入したら、「ロゴを画像にする」のチェックボックスにチェックを入れます。
色を変更する
WordPress管理画面のダッシュボードの左サイドメニューから、
「外観」→「カスタマイズ」
を選択し、「色」を選択するとお好みの色に変更することが可能です。
色を変えるだけでもサイトのオリジナリティの演出をアップできます。
主なものとしては以下の色を自在に変えることが可能ですが、詳しくは動画の説明をご覧ください。
- 背景色
- リンク色
- リンクホバー色（リンクにカーソルを合わせた時の色）
- サイトタイトル色
- サイト概要色
- グローバルナビ（グローバルメニュー）色
- グローバルナビリンク（グローバルメニューの文字）色
背景画像の設定とスキン
「背景画像」の設定の仕方は動画をご覧ください。
Simplicityの特徴として背景の「スキン」があります。スキンの種類が豊富なので、動画をご覧になって頂いた方がイメージをつかめます。これは、大変便利なので、ぜひ、取り入れてみてください。
