ギャラリーモードとは
写真やイラストを見せることに特化したブログを作るためのモードです。
この「ギャラリーモード」にする事で、投稿の主となる画像が前面に出た見せ方が可能となります。
※記事に含まれる本文が表示されなくなります。
※個別記事では一緒に投稿した記事本文も表示されます。
このモードを使用する、またモードに適した「独自タグ」が用意されております。
・<$UseGalleryMode$> ： ギャラリーモードの宣言タグ
・<$ArticleFirstImage$> ： 記事の最初の画像
・<$ArticleFirstImageThumbnail$> ： 記事の最初の画像のサムネイル
ギャラリーモードが適用されたデザインはこんな感じになります。
livedoor ブログスタッフによるギャラリーテンプレートサンプル
ギャラリーモードの設定の仕方
1. <$UseGalleryMode$> についてギャラリーモードの使用を宣言する為の独自タグです。
このタグでの宣言がないと、ギャラリーモードにはなりません。
デザインのカスタマイズページにて、タグ内の「<$HeadSectionCommon$>」よりも前に記述してください。
<head>
<$UseGalleryMode$>
<$HeadSectionCommon$>
- トップページ、カテゴリアーカイブ、月別アーカイブ でお使いいただけます。
- 個別記事ページ では使えません。
2. <$ArticleFirstImage$> について
記事で画像が使用されている場合、その最初の画像を表示します。
画像のリンク先は記事の個別ページになります。
<IfArticleFirstImage>とりあえず記事Loop内に、この記述を追加してみてください。
<div class="ArticleFirstImage"><p><a href="<$ArticlePermalink$>"><img src="<$ArticleFirstImage$>" alt="<$ArticleTitle ESCAPE$>" /></a></div>
</IfArticleFirstImage>
3. <$ArticleFirstImageThumbnail$> について
<$ArticleFirstImage$>のサムネイル表示バージョンです。
使い方・記述方法はほとんど変わりませんが、こちらはサムネイルサイズを指定できます。
サムネイルサイズを指定したい場合
「ThumbnailWidth」 と「ThumbnailHeight」というステータスがあるので、
それをSetVarを利用してテンプレート内で指定してください。
実際の指定方法
<IfArticleFirstImage>
<SetVar ThumbnailWidth>360</SetVar>
<SetVar ThumbnailHeight>240</SetVar>
<$ArticleFirstImageThumbnail$>
</IfArticleFirstImage>
※<$ArticleFirstImage$>、<$ArticleFirstImageThumbnail$>
どちらもギャラリーモードに適した使い方ができる独自タグとなります。
