今回は、WordPressのテーマSimplicityのヘッダーと背景をかっこよくカスタマイズする方法についての解説です。
Simplicityのヘッダーと背景をカスタマイズする方法についての解説動画
ヘッダー画像の作り方は、Photoscapeの動画で解説しています。
Photoscapeのダウンロードと使い方【画像の結合とトリミング】
Simplicityのヘッダー画像のサイズ
Simplicityのヘッダーの画像サイズは、「1070×100ピクセル」です。
Photoscapeでヘッダー画像を作成するときには、あらかじめ、このサイズで作成しておくと画像をアップロードしてから編集する手間が省けます。
ヘッダー画像を設定する
WordPressの管理画面のダッシュボードの左サイドメニューから、
「外観」＞「ヘッダー」
を選択します。
「現在のヘッダー」の欄の「新規画像を追加」クリックします。
「ファイルをアップロード」＞「ファイルを選択」をクリックして、使用したい画像を選択して「開く」をクリックします。
画像がアップロードされたら、「選択して切り抜く」をクリックします。
ヘッダー画像がサイズぴったりの場合
あらかじめ、ヘッダー画像をPhotoscapeで1070×100ピクセルのぴったりのサイズで作成している場合には、画像を切り抜く必要はないので、「切り抜かない」をクリックすればヘッダー画像の設定は完了です。
ヘッダー画像がサイズぴったりではない場合
サイズがぴったりではない画像を選択した場合、「選択して切り抜く」をクリックして、画像の切り抜き画面が表示されると、画像の一部が白抜きになった画面が表示されます。
白抜きになっているうえにカーソルを合わせてドラッグして切り抜く範囲を指定します。
指定できたら、「画像切り抜き」をクリックします。
ヘッダーの高さを変える
ヘッダーの高さとは、ヘッダーの上の部分から、グローバルメニューの上までの幅のことです。
デフォルトでは「100」に設定されていますが、好きな数字を入力して変更することができます。
ロゴ画像を設定する
サイトタイトルを、ロゴ画像に変更することができます。
サイトタイトルには、クリックするとどのページにいてもサイトのトップページに移動するようにリンクが貼られています。
トップページへのリンクが貼られているかは、サイトタイトルのところにカーソルを合わせたときに、カーソルの形が「矢印」から「手」の形になる場合には、トップページへのリンクが貼られています。
サイトタイトルをロゴ画像に変更して、トップページへのリンクを貼ることができます。
変更の仕方は、「ロゴ画像」の欄にある「画像を選択」をクリックして、「ファイルを開く」＞「ファイルを選択」をクリックします。
使用したい画像を選択して「開く」をクリックします。画像がアップロードできたら、「画像を選択」をクリックします。
画像を挿入したら、「ロゴを画像にする」にチェックを入れます。
色を変更する
WordPress管理画面のダッシュボードの左サイドメニューから、
「外観」＞「カスタマイズ」
を選択して、「色」を選択すると、いろいろな色を変えることができます。
主なものとしては次の色を変えることができます。
- 背景色
- リンク色
- リンクホバー色（リンクにカーソルを合わせた時の色）
- サイトタイトル色
- サイト概要色
- グローバルナビ（グローバルメニュー）色
- グローバルナビリンク（グローバルメニューの文字）色
詳しくは動画をご覧ください。
背景画像の設定とスキン
「背景画像」の設定方法や、Simplicityにあらかじめ用意されている背景のテンプレートの「スキン」については、色々動画でご紹介しています。
こちらは、動画を見ていただいたほうがイメージが分かると思いますので、ぜひ、ご覧ください。
