賢威8のメインビジュアル(ヘッダー画像)の設定方法を詳しく解説

賢威8のメインビジュアル(ヘッダー画像)の設定方法を詳しく解説

賢威8は賢威7と比べ、ヘッダー周りのカスタマイズで出来ることが大幅に増えています。

賢者
画像だけでなくスライダーや動画も表示させることができます。
 
 
今回は、この賢威8のメインビジュアルの設定方法を詳しく解説します。



メインビジュアルの設定画面を開く

WordPressのダッシュボード左メニューにある『賢威の設定』をクリックします。

WordPressのダッシュボード左メニューにある『賢威の設定』をクリック

WordPressのダッシュボード左メニューにある『賢威の設定』をクリック

 
 
設定画面が開きます。
下の方にある「メインビジュアル」という項目までスクロールしましょう。

メインビジュアルの設定画面

メインビジュアルの設定画面

 
 
ここでは、下記5種類の形式でメインビジュアルを設定することができます。

  • 画像
  • 背景画像
  • 動画
  • スライダー
  • 全画面表示

 
 
それでは、一つ一つ詳しく解説します。
 
 

画像

「画像」の項目を設定すると、以下のように画像を表示させることができます。

メインビジュアル - 画像

メインビジュアル – 画像

 
 
画像』のラジオボタンを選択し、『画像』のタブをクリックして開きましょう。

『画像』のラジオボタンを選択し、『画像』のタブをクリック

『画像』のラジオボタンを選択し、『画像』のタブをクリック

 
 

表示幅

下記の2種類の画像表示幅を選ぶことができます。

テンプレート幅で表示した場合

テンプレート幅で表示した場合

テンプレート幅で表示した場合

賢者
メインコンテンツと同じ横幅で表示されます。
 
 

ブラウザ幅で表示した場合

ブラウザ幅で表示した場合

ブラウザ幅で表示した場合

 
 

画像

ここで、メインビジュアルに表示させる画像を選択します。
画像をアップロード』ボタンをクリックしましょう。

『画像をアップロード』ボタンをクリック

『画像をアップロード』ボタンをクリック

 
 
画像ファイルをアップロードするか、メディアライブラリから画像を選択し、
選択』ボタンをクリックします。

『選択』ボタンをクリック

『選択』ボタンをクリック

 
 

モバイル用画像

ここでは、スマートフォン・タブレット専用で表示させる画像を設定することができます。

賢者
モバイル用画像は横幅767px以下のデバイスで表示されます。
 
 
設定すると、横幅768px以上では「画像」で設定した画像が、
横幅767px以下では「モバイル用画像」で設定した画像が
切り替わって表示されるようになります。

横幅768px以上では「画像」で設定した画像、横幅767px以下では「モバイル用画像」で設定した画像が表示される

横幅768px以上では「画像」で設定した画像、横幅767px以下では「モバイル用画像」で設定した画像が表示される

 
 

画像の設定を取り消す場合

画像の設定を取り消したい場合は、『クリア』ボタンをクリックしましょう。

『クリア』ボタンをクリック

『クリア』ボタンをクリック

 
 
これで、画像の設定は完了です。
設定後は必ず、ページ最下部にある『変更を保存』ボタンをクリックして、
設定を反映させましょう。

『変更を保存』ボタンをクリック

『変更を保存』ボタンをクリック

 
 


背景画像

「背景画像」の項目を設定すると、以下のように背景画像の上にテキストを配置して表示させることができます。

メインビジュアル - 背景画像

メインビジュアル – 背景画像

 
 
背景画像』のラジオボタンを選択し、『背景画像』のタブをクリックして開きましょう。

『背景画像』のラジオボタンを選択し、『背景画像』のタブをクリック

『背景画像』のラジオボタンを選択し、『背景画像』のタブをクリック

 
 

表示幅

画像表示幅を下記2パターンから選びましょう。

  • テンプレート幅
  • ブラウザ幅

 
 

画像

背景画像として表示させる画像を選択します。
 
 

モバイル用画像

スマートフォン・タブレット(横幅767px以下)で表示させる画像を設定することができます。
 
 

テキスト

画像の上に表示させるテキストを入力しましょう。

画像の上に表示させるテキストを入力

画像の上に表示させるテキストを入力

 
 
画像を配置したり、HTMLでテキストを装飾することもできます。

画像を配置したり、HTMLでテキストを装飾することも可能

画像を配置したり、HTMLでテキストを装飾することも可能

 
 

テキストの位置

下記の3種類のテキスト位置を選ぶことができます。

テキスト位置 - 左

テキスト位置 – 左

 

中央

テキスト位置 - 中央

テキスト位置 – 中央

 

テキスト位置 - 右

テキスト位置 – 右

 
 
これで、背景画像の設定は完了です。
設定後は必ず、ページ最下部にある『変更を保存』ボタンをクリックして、
設定を反映させましょう。

『変更を保存』ボタンをクリック

『変更を保存』ボタンをクリック

 
 

動画

「動画」の項目を設定すると、以下のように動画を表示させることができます。

メインビジュアル - 動画

メインビジュアル – 動画

 
賢者
賢威8で初めて追加された機能です。
 
 
動画』のラジオボタンを選択し、『動画』のタブをクリックして開きましょう。

『動画』のラジオボタンを選択し、『動画』のタブをクリック

『動画』のラジオボタンを選択し、『動画』のタブをクリック

 
 

埋め込みコード

埋め込みコード』のラジオボタンを選択した場合は、入力欄に動画の埋め込みコードを貼り付けましょう。

入力欄に動画の埋め込みコードを入力

入力欄に動画の埋め込みコードを入力

 
 

mp4ファイル

動画ファイル』のラジオボタンを選択した場合は、『画像をアップロード』ボタンをクリックし、
表示させる動画をアップロード、もしくはメディアライブラリから選択しましょう。
 
 

モバイル用画像

スマートフォン・タブレット(横幅767px以下)で表示させる動画を設定することができます。
 
 

テキスト

以下のように、動画の画面上にテキストを表示させることができます。

動画の画面上にテキストを表示できる

動画の画面上にテキストを表示できる

 
 
表示させたいテキストを入力しましょう。

表示させたいテキストを入力

表示させたいテキストを入力

 
 
これで、動画の設定は完了です。
設定後は必ず、ページ最下部にある『変更を保存』ボタンをクリックして、
設定を反映させましょう。

『変更を保存』ボタンをクリック

『変更を保存』ボタンをクリック

 
 


スライダー

「スライダー」の項目を設定すると、複数の画像をスライドさせることができます。

メインビジュアル – スライダー

 
賢者
スライドさせる画像は最大35枚まで設定可能です。
 
 
スライダー』のラジオボタンを選択し、『スライダー』のタブをクリックして開きましょう。

『スライダー』のラジオボタンを選択し、『スライダー』のタブをクリック

『スライダー』のラジオボタンを選択し、『スライダー』のタブをクリック

 
 

表示幅

画像表示幅を下記2パターンから選びましょう。

  • テンプレート幅
  • ブラウザ幅

 
 

画像を追加

画像追加』ボタンをクリックします。

『画像追加』ボタンをクリック

『画像追加』ボタンをクリック

 
 
スライド画像の設定メニューが表示されます。
以下の各項目を設定しましょう。

画像

スライドさせる画像を選択します。
 
 

モバイル用画像

スマートフォン・タブレット(横幅767px以下)で表示させる画像を設定することができます。
 
 

リンクURL

スライド画像をクリックした際のリンク先(URL)を設定することができます。
 
 
スライド画像を増やしたい場合は、さらに『画像追加』ボタンをクリックし、
上記の流れで画像を追加します。
 
 
これで、スライダーの設定は完了です。
設定後は必ず、ページ最下部にある『変更を保存』ボタンをクリックして、
設定を反映させましょう。

『変更を保存』ボタンをクリック

『変更を保存』ボタンをクリック

 
 

全画面表示

「全画面表示」の項目を設定すると、以下のように画像を全画面で表示させることができます。

メインビジュアル – 全画面表示

 
 
全画面表示』のラジオボタンを選択し、『全画面表示』のタブをクリックして開きましょう。

『全画面表示』のラジオボタンを選択し、『全画面表示』のタブをクリック

『全画面表示』のラジオボタンを選択し、『全画面表示』のタブをクリック

 
 

画像

全画面表示させる画像を選択します。
 
 

モバイル用画像

スマートフォン・タブレット(横幅767px以下)で表示させる画像を設定することができます。
 
 

テキスト

以下のように、画像の上にテキストを表示させることができます。

画像の上にテキストを表示できる

画像の上にテキストを表示できる

 
 
表示させたいテキストを入力しましょう。

表示させたいテキストを入力

表示させたいテキストを入力

 
 
これで、全画面表示の設定は完了です。
設定後は必ず、ページ最下部にある『変更を保存』ボタンをクリックして、
設定を反映させましょう。

『変更を保存』ボタンをクリック

『変更を保存』ボタンをクリック

 
 


まとめ

今回は、賢威8のメインビジュアル(ヘッダー画像)の設定方法を詳しく解説しました。

賢威8では、HTMLやCSSの知識もとくに必要なく、簡単にメインビジュアルを設定することができます。

画像だけでなくスライダーや動画も表示できるので、ブログのオリジナリティを出すためにもぜひ設定してみてください。

賢者
サイトの顔になる大事な部分ですよ!

スポンサーリンク