New Standardのキービジュアル編集方法について

ロゴ、スライド画像、アイキャッチなどにあたる「キービジュアル」。
キービジュアルとは、デザインの中心となるイメージ画像のことを指します。

今回はスライダー画像をメインに、キービジュアルの編集方法についてご紹介します。

 

 

1. スマートフォンでも大きくスライダー画像を出したい


↑PC表示の場合


↑スマートフォン表示の場合

このように、PC表示とスマートフォン表示では、レスポンシブ(PC、タブレット、スマホそれぞれに対してWebサイトを柔軟に調整すること)して共有するので、このようにスマートフォン表示時に横長で縦の短いスライダー画像になります。

そこで、スライダー画像をスマートフォン表示用に最適化してみましょう。

1-1. スマートフォン表示の画像サイズを変更する

【変更方法】
WordPress管理画面>テーマ設定>フロントページ>スマートフォン表示の画像サイズを「スマートフォン用横長」にチェック

すると・・・

先ほどのPC表示より画像表示エリアが拡がりましたが、このように画像自体が切れてしまいます。

1-2. スマートフォン表示専用のスライダー画像を新規制作

そこで、スマートフォン表示専用のスライダー画像を新たに制作します(画像はPhotoshopで制作しました)。
スマートフォン表示の画像サイズを「スマートフォン用横長」にする場合、横1080ピクセル・タテ720ピクセルのサイズでスライダー画像を制作ます。

※以前、「パワポでOK!お洒落なアイキャッチ画像の作り方」という記事も書きましたので、画像制作の際はぜひ参考になさってください。

1-3. 画像をアップロードする

制作した画像をアップロードします。

【アップロード先】
WordPress管理画面>テーマ設定>フロントページ>スライダー画像>スマートフォン用画像にアップロード

このように、スマートフォン表示専用の画像を表示することができました。
PC用の画像のみですと、縦横比の問題でスマートフォン表示では小さく表示されてしまいますので、注意していきましょう。

2. スライダー画像にリンクを設定したい

次は、スライダー画像にリンクを設定しましょう。

【変更方法】
WordPress管理画面>テーマ設定>フロントページ>スライダー>スライダー画像内>リンクURL
こちらにリンク先のURLを入力します。

これで、スライド画像全体にリンクが設定されました。

3. スライドをゆっくりにしたい

今度は、スライド画像が切り替わるタイミングを遅くゆっくりにしてみます。

【変更方法】
WordPress管理画面>テーマ設定>フロントページ>スライダー>スライダー画像ごとの表示時間の数字を変更します。

デフォルトでは4秒になっていますので、5秒以上にすると、スライダー画像が切り替わる時間がゆっくりになります。もちろん、3秒、2秒にすると、スライダー画像の切り替わりが早くなります。このあたりは本番環境を確認しながら状況をみて変えていきましょう。

4. コンテンツ枠の画像に文字を入れたい

次はトップページのコンテンツ枠の画像に、文字を入れる方法をご紹介します。

4-1. 固定ページの抜粋欄にテキストを入れる

コンテンツ表示先の固定ページの編集画面を表示します。ここでは固定ページ「Portfolio」の編集画面を見てみましょう。
固定ページ編集画面上部の「表示オプション」タブをクリックし、「抜粋」にチェックを入れます。

編集画面下部に「抜粋」の欄が新たに表示されます。この枠に画像に表示させたいテキストを入れ、「更新」ボタンを押します。

4-2. 抜粋表示にチェックする

【変更方法】
WordPress管理画面>テーマ設定>フロントページ>コンテンツ枠>抜粋表示「あり」にチェックします。

このように、固定ページ「抜粋」で入力したテキストが、コンテンツ枠画像内に表示されました。

5. キービジュアルの編集まとめ

いかがでしたでしょうか?今回は、スライダー画像をメインに、キービジュアルの編集方法についてご紹介しました。
ここでキービジュアル編集のまとめです。

  • キービジュアルとは、デザインの中心となるイメージ画像のこと。
  • スマートフォン表示専用のスライダー画像を別途制作し、アップロードする。
  • スライダー画像にリンクを設定するには「リンクURL」にリンク先URLを入力する。
  • スライドの切り替わりを遅くするには「スライダー画像ごとの表示時間」の秒数を変える。
  • トップページのコンテンツ枠画像に文字を入れるには該当するページ編集画面の「抜粋」にテキストを入れる。

以上、ぜひお試し下さいね。