baserCMSでアイキャッチ画像を表示させてみよう!

ホームページを制作しているとき、記事のアイキャッチ画像をつけることでぐっと見栄えがよくなりますよね。

baserCMSにもこうしたアイキャッチ画像を使うための機能が備わっています。

今回はbaserCMSでアイキャッチ画像を表示させる方法をご紹介します。

baserCMSでブログのアイキャッチ画像を扱う2つの関数

baserCMSにはアイキャッチ画像を表示させる独自の関数が2種類用意されています。

  • eyeCatch関数
  • getEyeCatch関数

どちらもアイキャッチ画像を表示させることは出来ますが、それぞれ引数として使えるパラメーターなどが多少違います。

今回はgetEyeCatch関数を使用してアイキャッチ画像の表示方法を説明したいと思います。

getEyeCatch関数

この関数はアイキャッチ画像を表示させる関数です。

使い方は次のようなコードをブログテンプレートに記述します。

そうするとこのようなHTMLが出力されます。

オプションとして使えるパラメーターは以下の通りです。

実際にパラメータを使用してアイキャッチ画像を表示させる際にはテンプレートファイルに次のように書きます。

この例ではwidthに300px、heightに100pxを設定し、画像が設定されていない場合はimages/thumnail01.pngの画像を表示するようにしています。

linkパラメーターをfalseに設定することで画像リンクをオフにしています。このようにするとaタグで囲まず画像のみを表示することができます。

記事へのリンク付きアイキャッチ画像の表示方法

上記の関数では記事へのリンクを付けたアイキャッチ画像を取得することが出来ません。

postLink関数とgetEyeCatch関数を組み合わせることによって、記事リンクを付けたアイキャッチ画像を出力することが出来ます。

具体的にはこんなコードを書きます。

記事へのリンクを取得するpostLink関数の第2引数にgetEyeCatch関数を使用し、getEyeCatch関数のlinkパラメーターををfalseに設定しておきます。

上記の方法で記事へのリンクが付いたアイキャッチ画像を出力することが出来ます。

以上、baserCMSでアイキャッチ画像を表示する方法でした。

それぞれの関数に使い方については参考リンクを張っておきますのでご参考下さい。

 

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »