極意(55) スマフォ対応のアイキャッチの設定方法

先日、当サイトのトップページに設置していたアイキャッチの画像を入れ替えました。
ただ画像を入れ替えただけではありません。スマートフォン対応として、PC用のアイキャッチ画像とSP用のアイキャッチ画像の2枚の画像で、スマートフォンに完全対応する設定を致しました。

下記の左の横長の写真がPC用のアイキャッチ画像で、右の縦長の写真がスマートフォン用のアイキャッチ画像に使用しました。
 

PC用アイキャッチ画像
eyepc (5)
実際の画像サイズは 2000x900px

SP用アイキャッチ画像
eyesp (5)
実際の画像サイズは 828x1028px


スマフォ対応の設定手順

  1. アイキャッチ画像として以下の2サイズの画像を用意する
    1. PC用画像として 2000x700~900px の画像
    2. スマフォ用画像として 828x1028px の画像
  2. 画像サイズは、上記のサイズにほぼ近い値なら大体OKです

[check]具体的なアイキャッチ・プラグインの書き方

#eyecatch(pc.jpg,700,xsbg=sp.jpg,xsheight=514){{{

}}}

[check]解説します。

  1. pc.jpgは、PC用のアイキャッチ画像名(任意のファイル名でOK)
  2. 700は、PC用のアイキャッチ画像の高さ(700~900の範囲で指定)
  3. xsbg=sp.jpgは、スマートフォン用のアイキャッチ画像名(任意のファイル名でOK)
  4. xsheight=514は、スマートフォン用のアイキャッチ画像の高さ(このままでOK)
  5. 当然、PC用及びスマートフォン用の画像は、事前にアップロードしておくこと。


ご意見箱