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

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

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

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

↑PC表示の場合

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

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

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

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

すると・・・

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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