- 「メディア2021」はトップページに最新記事5件をスライドショーで表示できる
- 記事本文へのリンクの他にカテゴリーへのリンクもある
- 記事一覧の表示は記事2列／記事3列の2種類ある
「メディア2021」はトップページに最新記事5件を表示する大きなスライドショーがあることが特徴で、写真やイラストを大きなサイズで表現したいブロガー様におすすめのテンプレートです。
本記事では、「メディア2021」の特徴や任意の記事をスライドショーに表示する方法を説明します。
（例）
主な特徴
- 最新記事5件まで表示できるスライドショー
記事を最大5件まで表示することができるスライドショーが「メディア2021」の最大の特徴です。 記事本文へのリンクの他にカテゴリーへのリンクもあるため、トップページからブログ内の様々なページへ遷移することができます。
- 画像がたくさんあっても窮屈にならないレイアウト
記事一覧の表示は2種類用意しています。記事2列／記事3列で画像のサイズやテキストの折り返しが異なりますが、どちらも記事の見出し画像やタイトルをしっかりと読者の方に届けられるレイアウトになっています。
スライドショーの仕様について
表示できる記事は「最新記事5件」です。インフィード記事の設定は反映されません。
トップページの表示件数を5件未満に設定していた場合、スライドショーで表示される件数も設定された件数分の表示になります。トップページの表示件数の変更方法は「記事の表示件数を変更」のヘルプをご覧ください。
HTMLで任意の記事を指定した場合には、6件以上の記事をスライドショーに表示することができます。
カスタマイズについて
ブログデザインのCSS・HTML編集は、 サポートガイドライン記載の通り
サポート対応の範囲外です。 お客様ご自身にてご確認・操作をお願いします。
また、ブログデザインのCSS・HTML編集はPC版のみ可能であり、
スマートフォン版や携帯版は編集できません。
デザイン保存機能を利用して、編集前に保存してください。
また、ブログ崩れが発生しても弊社では対応いたしかねますので、予めご了承ください。
・ブログデザインのカスタマイズについてのヘルプページはこちら
・カスタマイズしたデザインの保存についてのヘルプページはこちら
スライドショーに指定した記事を表示する
① <IndexArticlesNoFeedLoop>〜</IndexArticlesNoFeedLoop> までをコメントアウト、または削除する
- HTML
<IndexArticlesNoFeedLoop>
<div class="swiper-slide">
<a href="<$ArticlePermalink$>" class="img" itemprop="url">
<img src="<IfArticleCoverImage><$ArticleCoverImage$><Else><$PartsBaseUrl$>/img/usr/local_media/noimg_720x405.png</IfArticleCoverImage>" alt="">
</a>
<div class="main_visual_label_box">
<span class="main_visual_date"><time datetime="<$ArticleDateISO8601$>" itemprop="datePublished"><$ArticleDate$></time></span>
<div class="main_visual_categories">
<span class="main_visual_category1">
<a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a>
</span>
<IfArticleCategory2>
<span class="main_visual_category2">
<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a>
</span>
</IfArticleCategory2>
</div>
<div class="main_visual_title" itemprop="name"><a href="<$ArticlePermalink$>" itemprop="url"><$ArticleTitle ESCAPE$></a>
<IfArticleRating><span class="article-rating"><$ArticleRatingIcon$></span></IfArticleRating>
</div>
</div>
</div>
</IndexArticlesNoFeedLoop>
② <IfDontDisplay>と</IfDontDisplay>を削除、またはコメントアウトする
コメントアウトをする場合は<IfDontDisplay>と</IfDontDisplay>にある < > を削除してください。
■コメントアウト前
- HTML
<IfDontDisplay><!-- コメントアウト用独自タグ -->
</IfDontDisplay><!-- コメントアウト用独自タグ -->
■コメントアウト後
- HTML
<!-- IfDontDisplay --><!-- コメントアウト用独自タグ -->
<!-- /IfDontDisplay --><!-- コメントアウト用独自タグ -->
③スライドショーで表示する記事の情報を入力する。
<li class="swiper-slide">から</li>までの範囲がスライドショーで表示される1記事分の情報です。 表示したい記事の記事タイトル、記事見出し画像URLなどを入力してください。 「メディア2021」のスライドショーでは下記の情報を指定できます。
1.記事タイトル
2.記事URL
3.記事見出し画像URL
4.カテゴリ1・2のカテゴリ名
5.カテゴリ1・2のURL
6.記事投稿日
■入力前
- HTML
<li class="swiper-slide">
<a href="記事URL"><img src="記事見出し画像URL" alt=""></a>
<div><span><time>記事投稿日</time></span>
<div>
<span><a href="カテゴリURL">記事カテゴリ名</a></span>
<!-- ２個めのカテゴリがあったらコメントアウトを外す <span><a href="カテゴリURL">記事カテゴリ名</a></span> -->
</div>
<div><a href="記事URL">記事タイトル</a></div>
</div>
</li>
■入力後
- HTML
<li class="swiper-slide">
<a href="https://staff.livedoor.blog/archives/51988828.html"><img src="https://livedoor.blogimg.jp/staff/imgs/f/4/f4fc2029.png" alt="見出し画像"></a>
<div><span><time>2021年09月27日</time></span>
<div>
<span><a href="https://staff.livedoor.blog/archives/cat_0015.html">新機能・お知らせ</a></span>
<!-- ２個めのカテゴリがあったらコメントアウトを外す <span><a href="カテゴリURL">記事カテゴリ名</a></span> -->
</div>
<div><a href="https://staff.livedoor.blog/archives/51988828.html">「ローカルブロガープログラム」ブロガー募集ページを公開しました</a></div>
</div>
</li>
2つ目のカテゴリを指定する場合は「２個めのカテゴリがあったらコメントアウトを外す」と記載されていう箇所のコメントアウトを削除してください。
■削除前
- HTML
<!-- ２個めのカテゴリがあったらコメントアウトを外す <span><a href="カテゴリURL">記事カテゴリ名</a></span> -->
■削除後
- HTML
<span><a href="カテゴリURL">記事カテゴリ名</a></span>
④表示したい記事数に合わせて、<li class="swiper-slide">から</li> までをコピーして</li>の下に貼り付ける。
コピーして貼り付けたHTMLに2記事目の情報を入力してください。 3記事目以降も同様の方法で追加できます。
<li class="swiper-slide">
<a href="https://staff.livedoor.blog/archives/51988828.html"><img src="https://livedoor.blogimg.jp/staff/imgs/f/4/f4fc2029.png" alt="見出し画像"></a>
<div><span><time>2021年09月27日</time></span>
<div>
<span><a href="https://staff.livedoor.blog/archives/cat_0015.html">新機能・お知らせ</a></span>
<!-- ２個めのカテゴリがあったらコメントアウトを外す <span><a href="カテゴリURL">記事カテゴリ名</a></span> -->
</div>
<div><a href="https://staff.livedoor.blog/archives/51988828.html">「ローカルブロガープログラム」ブロガー募集ページを公開しました</a></div>
</div>
</li>
<li class="swiper-slide">
<a href="https://staff.livedoor.blog/archives/51987124.html"><img src="https://livedoor.blogimg.jp/staff/imgs/a/8/a8d733ef.png" alt="見出し画像"></a>
<div><span><time>2021年07月06日</time></span>
<div>
<span><a href="https://staff.livedoor.blog/archives/cat_0015.html">新機能・お知らせ</a></span>
<!-- ２個めのカテゴリがあったらコメントアウトを外す <span><a href="カテゴリURL">記事カテゴリ名</a></span> -->
</div>
<div><a href="https://staff.livedoor.blog/archives/51987124.html">「ローカルブロガープログラム」の提供を開始しました
</a></div>
</div>
</li>