本記事では、「メディア2021」の特徴や任意の記事をスライドショーに表示する方法を説明します。

主な特徴
- 最新記事5件まで表示できるスライドショー
- 画像がたくさんあっても窮屈にならないレイアウト
スライドショーの仕様について
- 表示できる記事は「最新記事5件」です。インフィード記事の設定は反映されません。
- トップページの表示件数を5件未満に設定していた場合、スライドショーで表示される件数も設定された件数分の表示になります。トップページの表示件数の変更方法は「記事の表示件数を変更」のヘルプをご覧ください。
- HTMLで任意の記事を指定した場合には、6件以上の記事をスライドショーに表示することができます。
カスタマイズについて
ブログデザインのCSS・HTML編集は、サポートガイドライン記載の通りサポート対応の範囲外です。 お客様ご自身にてご確認・操作をお願いします。また、ブログデザインのCSS・HTML編集はPC版のみ可能であり、スマートフォン版では編集できません。
お客様のCSS・HTML編集に伴い、ブログ表示が崩れる可能性がございますので、デザイン保存機能を利用して、編集前に保存してください。
また、ブログ崩れが発生しても弊社では対応いたしかねますので、予めご了承ください。
・ブログデザインのカスタマイズについてのヘルプページはこちら
・カスタマイズしたデザインの保存についてのヘルプページはこちら
スライドショーに指定した記事を表示する
① <IndexArticlesNoFeedLoop>〜</IndexArticlesNoFeedLoop> までをコメントアウト、または削除する
<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>にある < > を削除してください。■コメントアウト前
<IfDontDisplay><!-- コメントアウト用独自タグ --> </IfDontDisplay><!-- コメントアウト用独自タグ -->■コメントアウト後
<!-- IfDontDisplay --><!-- コメントアウト用独自タグ --> <!-- /IfDontDisplay --><!-- コメントアウト用独自タグ -->
③スライドショーで表示する記事の情報を入力する。
<li class="swiper-slide">から</li>までの範囲がスライドショーで表示される1記事分の情報です。 表示したい記事の記事タイトル、記事見出し画像URLなどを入力してください。 「メディア2021」のスライドショーでは下記の情報を指定できます。
- 記事タイトル
- 記事URL
- 記事見出し画像URL
- カテゴリ1・2のカテゴリ名
- カテゴリ1・2のURL
- 記事投稿日
■入力前
<li class="swiper-slide"> <a href="記事URL"><img src="記事見出し画像URL" alt=""></a> <div><span><time>記事投稿日</time></span> <div> <span><a href="カテゴリURL">記事カテゴリ名</a></span> <!-- 2個めのカテゴリがあったらコメントアウトを外す <span><a href="カテゴリURL">記事カテゴリ名</a></span> --> </div> <div><a href="記事URL">記事タイトル</a></div> </div> </li>■入力後
<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> <!-- 2個めのカテゴリがあったらコメントアウトを外す <span><a href="カテゴリURL">記事カテゴリ名</a></span> --> </div> <div><a href="https://staff.livedoor.blog/archives/51988828.html">「ローカルブロガープログラム」ブロガー募集ページを公開しました</a></div> </div> </li>2つ目のカテゴリを指定する場合は「2個めのカテゴリがあったらコメントアウトを外す」と記載されていう箇所のコメントアウトを削除してください。
■削除前
<!-- 2個めのカテゴリがあったらコメントアウトを外す <span><a href="カテゴリURL">記事カテゴリ名</a></span> -->■削除後
<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> <!-- 2個めのカテゴリがあったらコメントアウトを外す <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> <!-- 2個めのカテゴリがあったらコメントアウトを外す <span><a href="カテゴリURL">記事カテゴリ名</a></span> --> </div> <div><a href="https://staff.livedoor.blog/archives/51987124.html">「ローカルブロガープログラム」の提供を開始しました </a></div> </div> </li>