ホーム > テーマの設定 > 2017版 > 2017-03:ヘッダー画像の設定

2017-03:ヘッダー画像の設定


クールでかっこいいWordPressテーマ 7022・7032」のテーマを中心に、ヘッダー画像の設定を説明しています。
ただし、当テーマだけでなく他のテーマや今後公開するテーマにも十分参考になります。
 

F7022、P7022テーマのヘッダー画像設定

 

ヘッダー画像の設定

管理画面のテーマカスタマイザーに移動して、「ヘッダー画像」をクリックします。
デフォルトでは、テーマに添付しているヘッダー画像が表示されています。サンプルのヘッダー画像の大きさも記述していますので、参考にしてください。
 

 
新しい画像をアップロードすると、ヘッダー画像が入れ替わります。

 

ヘッダー画像の背景色変更

ヘッダー画像を設定した時点では、画像の両端が切れた状態に表示されます。
メインビジュアル背景色(ヘッダー画像の背景色)」をヘッダー画像に合わせると、上図のようにヘッダー画像が違和感なく表示されます。
 

 
 

P7022有料テーマのスライダー画像設定

有料のP7022テーマは、ヘッダー画像をスライドさせることができます。
スライドの設定は、テーマカスタマイザーの「スライド画像のアップロード」をクリックします。なお、スライド画像はヘッダー画像と同じサイズで作成してください。
スライドには個別にリンク設定ができます。ただし、アフィリエイトタグの設定は自己責任でお願いします。
 

 
 

F7032無料テーマのヘッダー画像設定

7022テーマと同様に、管理画面のテーマカスタマイザーに移動して、「ヘッダー画像」をクリックして変更します。
 

 
色設定で、メインビジュアルの背景色をヘッダー画像に合わせると、違和感なくヘッダー画像が表示されます。
 

 
 

P7032有料テーマの追加機能

有料のP7032テーマには、無料テーマF7032に無い機能があります。
テーマカスタマイザーの「色」設定の最下部の「ヘッダー画像を幅一杯で利用する」をチェックすると、画面の横幅一杯にヘッダー画像を表示できます。
F7022、F7032にも同じ機能を追加しました。
ただし、P7022はスライダー表示との関係でこの機能はありません。

 

 
横幅100%で表示するヘッダー画像は 1800x500px(自由な大きさにも対応)で作成します。その場合は、文字は中心の1200px内に収めてください。
スマホ表示で画像が小さくなりすぎないように、左右をカットして表示させているのが理由です。
 

 
 

WordPressテーマV12.5特別版



キーワード