HAIKのアイキャッチでの完全スマフォ対応とは?

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

即ち、プラグイン「#eyecatch」のオプションとして2枚の画像を設定して、完全スマフォ対応の処置を導入した訳ですね。些か遅すぎた対応だったように思いますが、筆者は元々「携帯はガラ携主義」ですので、その辺の対応が遅れたのは致し方ないと言い訳めいたことを言っています。

当サイトのトップページ以外に、以下の3サイトのアイキャッチも同様に完全スマフォ対応を遅まきながら実装しました。その確認方法ですが、画面を横幅300pxぐらいまで縮小してご覧らなられば、実際のスマフォイメージが確認できると思います。

画像の説明

画像の説明

画像の説明


上記ページのスマフォ・イメージです。

画像の説明

画像の説明

画像の説明


その種明かしです。

  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用のアイキャッチ画像名
  2. 700は、PC用のアイキャッチ画像の高さ(700~900)
  3. xsbg=sp.jpgは、スマートフォン用のアイキャッチ画像名
  4. xsheight=514は、スマートフォン用のアイキャッチ画像の高さ(このままでOK)
  5. 当然、PC用及びスマートフォン用の画像は、事前にアップロードしておくこと。