- 写真やイラストを見せることに特化したブログを作るためのモード
- ギャラリーモードにすることで、画像を前面に出した見せ方が可能に
- 独自タグを使用する
ギャラリーモードとは
写真やイラストを見せることに特化したブログを作るためのモードです。
ギャラリーモードにする事で、画像を前面に出した見せ方が可能となります。
※一覧ページ（トップページ、カテゴリアーカイブ、月別アーカイブ）では、記事に含まれる本文が表示されなくなります。
このモードを使用するための独自タグは以下のとおりです。
- <$UseGalleryMode$>・・・ギャラリーモードの宣言タグ
- <$ArticleFirstImage$>・・・記事の最初の画像
- <$ArticleFirstImageThumbnail$>・・・記事の最初の画像のサムネイル
ギャラリーモードが適用されたデザインは以下のようになります。
livedoor ブログスタッフによるギャラリーテンプレートサンプル
ギャラリーモードの設定方法
1. <$UseGalleryMode$> について
ギャラリーモードの使用を宣言する為の独自タグです。
このタグでの宣言がないと、ギャラリーモードにはなりません。
デザインのカスタマイズページにて、HTML内の<$HeadSectionCommon$>よりも前に記述してください。
<head>
<$UseGalleryMode$>
<$HeadSectionCommon$>
- トップページ、カテゴリアーカイブ、月別アーカイブで使用できます。
- 個別記事ページでは使えません。
2. <$ArticleFirstImage$> について
記事で画像が使用されている場合、その最初の画像を表示します。
<IfArticleFirstImage>
<div class="ArticleFirstImage"><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>
<div class="ArticleFirstImageThumbnail"><a href="<$ArticlePermalink$>"><img src="<$ArticleFirstImageThumbnail$>" alt="<$ArticleTitle ESCAPE$>" /></a></div>
</IfArticleFirstImage>
<$articlefirstimage$>、<$articlefirstimagethumbnail$> タグは、トップとアーカイブのHTMLテンプレートの、IndexArticlesLoop、CategorizedArticlesLoop、MonthlyArticlesLoop内で使用できます。 </$articlefirstimagethumbnail$></$articlefirstimage$>