- 写真やイラストを見せることに特化したブログを作るためのモード
- ギャラリーモードにすることで、画像を前面に出した見せ方が可能に
- 独自タグを使用する
ギャラリーモードとは
写真やイラストを見せることに特化したブログを作るためのモードです。
ギャラリーモードにする事で、画像を前面に出した見せ方が可能となります。
※一覧ページ（トップページ、カテゴリアーカイブ、月別アーカイブ）では、記事に含まれる本文が表示されなくなります。
このモードを使用するための独自タグは以下のとおりです。
- <$UseGalleryMode$>・・・ギャラリーモードの宣言タグ
- <$ArticleFirstImage$>・・・記事の最初の画像
- <$ArticleFirstImageThumbnail$>・・・記事の最初の画像のサムネイル
ギャラリーモードが適用されたデザインは以下のようになります。
livedoor ブログスタッフによるギャラリーテンプレートサンプル
なお、ブログデザインのCSS・HTML編集は、 サポートガイドライン記載の通りサポート対応の範囲外です。
お客様ご自身にてご確認・操作をお願いします。
また、ブログデザインのCSS・HTML編集はPC版のみ可能であり、スマートフォン版は編集できません。
お客様のCSS・HTML編集に伴い、ブログ表示が崩れる可能性がございますので、 デザイン保存機能を利用して、編集前に保存してください。
また、ブログ崩れが発生しても弊社では対応いたしかねますので、予めご了承ください。
・[Blog PC版] カスタマイズしたデザインを保存する方法
また、ブログ崩れが発生しても弊社では対応いたしかねますので、予めご了承ください。
・[Blog PC版] カスタマイズしたデザインを保存する方法
ギャラリーモードの設定方法
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$>