【ブログ】アイキャッチ画像をヒーローヘッダーに!テンプレートのカスタマイズ性が向上しました。

FC2ブログ
06 /17 2016
平素は、FC2(fc2.com)をご利用いただき、誠にありがとうございます。

FC2ブログ(blog.fc2.com)で、テンプレートをカスタマイズする際に、個別記事ページ内でのサムネイル画像変数が使いやすくなりました。

[個別記事ページ]
hero_img_01.png

サムネイル画像の変数を利用すればアイキャッチ画像を表示できますが、
個別の記事ページ内に利用すればプレビュー時にも表示されるようになりました。

アイキャッチ画像を個別の記事ページごとにヒーローヘッダーとして利用すれば、よりリッチなデザインでバリエーション豊かなブログ記事を作成いただけます。

[トップページ][個別記事ページ]
hero_img_02.pnghero_img_03.png



設定方法


サムネイル画像変数を個別ページのみに表示させるブロック変数で囲みます。

[サムネイル画像(アイキャッチ画像)を表示する変数]

<%topentry_image_url>記事内の画像のURLを表示
<%topentry_image_w300>記事内の画像をサムネイル画像として表示(大)
<%topentry_image_72>記事内の画像をサムネイル画像として表示(小)

画像をオリジナルサイズで表示するには<%topentry_image_url>を使用してください。テンプレート中に使える変数の一覧はこちらをご覧ください。

[作成例]

<!--permanent_area—>
<!--topentry—>
 <div class="entry_header">
  <img src="<%topentry_image_url>" width="100%”>
 </div>
<!--/topentry—>
<!--/permanent_area-->


ヒーローヘッダーとは


Webデザインで良く見かけるトレンドのひとつで、ページの最上部に大きなサイズのイメージ写真を利用する方法です。記事の冒頭でビジュアル的に強く印象付け、本文への興味を強める効果があります。

アイキャッチ画像とは


記事リストで最初に目に付くサムネイル画像などのことを言います。
記事の内容を一目で伝えたり、注意を引いて記事へと誘導させるといった
ブログの集客アップに効果的です。

アイキャッチ画像の設定方法はこちらをご覧ください。



是非この機会にFC2ブログをご利用ください!

------------------------------------------------------
今後ともFC2をよろしくお願いいたします。
------------------------------------------------------
FC2 は、今後もユーザーサイドの視点で、
利用者の皆様が快適にお使いいただけるよう努めてまいります。

コメント

非公開コメント

FC2インフォ

ようこそ
FC2総合インフォメーションへ!