Simplicity

ブログの始め方⑥ | WordPressのテーマSimplicityのカスタマイズ【ヘッダー画像と背景】

 

 

 

今回は、WordPressのテーマSimplicityのヘッダーと背景をかっこよくカスタマイズする方法についての解説です。

 

 

 

 

Simplicityのヘッダーと背景をカスタマイズする方法についての解説動画

 

 

 

ヘッダー画像の作り方は、Photoscapeの動画で解説しています。

 

Photoscapeのダウンロードと使い方【画像の結合とトリミング】

 

 

 

 

Simplicityのヘッダー画像のサイズ

 

Simplicityのヘッダーの画像サイズは、「1070×100ピクセル」です。

 

 

Photoscapeでヘッダー画像を作成するときには、あらかじめ、このサイズで作成しておくと画像をアップロードしてから編集する手間が省けます。

 

 

 

 

ヘッダー画像を設定する

 

WordPressの管理画面のダッシュボードの左サイドメニューから、

 

「外観」>「ヘッダー」

 

を選択します。

 

 

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

 

 

「ファイルをアップロード」>「ファイルを選択」をクリックして、使用したい画像を選択して「開く」をクリックします。

 

 

画像がアップロードされたら、「選択して切り抜く」をクリックします。

 

 

 

ヘッダー画像がサイズぴったりの場合

 

あらかじめ、ヘッダー画像をPhotoscapeで1070×100ピクセルのぴったりのサイズで作成している場合には、画像を切り抜く必要はないので、「切り抜かない」をクリックすればヘッダー画像の設定は完了です。

 

 

 

 

ヘッダー画像がサイズぴったりではない場合

 

サイズがぴったりではない画像を選択した場合、「選択して切り抜く」をクリックして、画像の切り抜き画面が表示されると、画像の一部が白抜きになった画面が表示されます。

 

 

白抜きになっているうえにカーソルを合わせてドラッグして切り抜く範囲を指定します。

 

 

 

指定できたら、「画像切り抜き」をクリックします。

 

 

 

 

ヘッダーの高さを変える

 

ヘッダーの高さとは、ヘッダーの上の部分から、グローバルメニューの上までの幅のことです。

 

 

 

デフォルトでは「100」に設定されていますが、好きな数字を入力して変更することができます。

 

 

 

 

ロゴ画像を設定する

 

サイトタイトルを、ロゴ画像に変更することができます。

 

 

サイトタイトルには、クリックするとどのページにいてもサイトのトップページに移動するようにリンクが貼られています。

 

 

トップページへのリンクが貼られているかは、サイトタイトルのところにカーソルを合わせたときに、カーソルの形が「矢印」から「手」の形になる場合には、トップページへのリンクが貼られています。

 

 

サイトタイトルをロゴ画像に変更して、トップページへのリンクを貼ることができます。

 

 

変更の仕方は、「ロゴ画像」の欄にある「画像を選択」をクリックして、「ファイルを開く」>「ファイルを選択」をクリックします。

 

 

使用したい画像を選択して「開く」をクリックします。画像がアップロードできたら、「画像を選択」をクリックします。

 

 

画像を挿入したら、「ロゴを画像にする」にチェックを入れます。

 

 

 

 

 

色を変更する

 

WordPress管理画面のダッシュボードの左サイドメニューから、

 

「外観」>「カスタマイズ」

 

を選択して、「色」を選択すると、いろいろな色を変えることができます。

 

 

 

主なものとしては次の色を変えることができます。

 

  • 背景色
  • リンク色
  • リンクホバー色(リンクにカーソルを合わせた時の色)
  • サイトタイトル色
  • サイト概要色
  • グローバルナビ(グローバルメニュー)色
  • グローバルナビリンク(グローバルメニューの文字)色

 

 

詳しくは動画をご覧ください。

 

 

 

 

背景画像の設定とスキン

 

「背景画像」の設定方法や、Simplicityにあらかじめ用意されている背景のテンプレートの「スキン」については、色々動画でご紹介しています。

 

 

こちらは、動画を見ていただいたほうがイメージが分かると思いますので、ぜひ、ご覧ください。

 

 

 

 

無料メール講座登録♪