トップページ・アーカイブページの記事表示カスタマイズについて – livedoorお客様サポートセンター

アーカイブページで記事本文を表示しないでタイトルだけにする方法を紹介
記事中の最初の画像を掲載する方法を紹介
最初に表示される記事のみデザインをカスタマイズする方法を紹介

アーカイブページで本文を省略してタイトルだけにする

カテゴリアーカイブや月別アーカイブページで、記事本文を表示しないでタイトルだけにする方法をご紹介します。

管理画面

ブログ設定 ＞ デザイン/ブログパーツ設定（PC） ＞ カスタマイズ

「カテゴリアーカイブ」のタブを選択します。（「月別アーカイブ」の場合も同様に作業します）

カスタマイズ内容

<$ArticleDescription ESCAPE $> が含まれるブロックを削除します。

例：デフォルト2019の場合、以下を削除

HTML

<$ArticleDescription ESCAPE$></IfArticleDescription>...</IfArticleDescription>

コメント数やカテゴリ、ソーシャルボタンなども削除したい場合は <$ArticleCommentCount$>、<$ArticleCategory1$>、<$ArticleToolBox$>などが含まれるブロックを削除してください。

例：デフォルト2019の場合、以下を削除

HTML

<!-- 記事フッター、カテゴリ、コメント、ソーシャルボタン -->
<footer class="article-footer">
<ul class="article-meta">
<IfArticleCategory1>
<li class="article-category">
<div class="article-category1"><a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a></div>
<IfArticleCategory2>
<div class="article-category2"><a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></div>
</IfArticleCategory2>
</li>
</IfArticleCategory1>
<li class="article-tags-wrap"><$ArticleTagsList$></li>
<IfArticleAllowComment>
<li class="article-comment-count">
<dl><dt>コメント</dt><dd><a href="<$ArticlePermalink$>#comments"><$ArticleCommentCount$> 件</a></dd></dl>
</li>
</IfArticleAllowComment>
<li class="article-author">by <span itemprop="author"><$ArticleAuthorNickname$></span></li>
</ul>
<div class="article-social-btn detail_social">
<$ArticleToolBox$>
</div>
<div class="related_articles">
<$RelatedArticles$>
</div>
</footer>
<!-- /記事フッター、カテゴリ、コメント、ソーシャルボタン -->

反映後、調整が必要な場合は「CSS」タブに移動して以下のCSSを追加して調整します。

.page-category .article,
.page-monthly .article {
padding-top:20px;
}

備考

デザインテンプレートによってカスタマイズ方法が異なる場合があります。

記事中の最初の画像を掲載

記事内の最初の画像を表示させます。
※「独自タグ」については「独自タグについて」をご覧ください。

該当の独自タグは「<$ArticleFirstImage$>」です。

<$ArticleFirstImage$>とは：
”記事本文で使われている最初の画像ファイル”を表示させることができます。
ちなみに記事中で画像が使われていない場合は、スルーされます。
個別記事以外の「index」「カテゴリ」「月間」ページで利用できます。

使い方：

挿入する場所は、～の間とし、
表示させたい場所に「<$ArticleFirstImage$>」を記述する。
このタグは変数型のタグとなりますので、このタグそのものを記述するだけで表現できます。

注意点：

この独自タグで挿入したい画像が、もともと記事に掲載されている画像と並んでしまう事があります。
「記事の"続きを書く"」の部分に画像を掲載する様にすると、記事一覧で綺麗に見せる事ができるようになります。

使用例：

↓　↓　↓　↓　↓

<IfArticleFirstImage>
<img border="0" src="<$ArticleFirstImage$>" height="200" /><br />
</IfArticleFirstImage>

※「<IfArticleFirstImage>」は記事中に画像がある場合という条件分岐タイプの独自タグです。

このタグは、記事中に画像を使う事が多い方に適してます。
もっと画像をメインに推した見せ方をされたいい方は「ギャラリーモード」をご利用下さい。

最初に表示される記事のみデザインをカスタマイズ

独自タグ「<IfFirstArticle>」を利用したカスタマイズ方法を紹介します。

<IfFirstArticle> とは

最初に表示される記事に限定してレイアウトを適用させます。
個別記事ページ以外の、「トップページ」「カテゴリアーカイブ」「月別アーカイブ」ページで利用できます。

使い方

挿入できる場所は、<IndexArticlesLoop>～</IndexArticlesLoop>の間です。（カテゴリアーカイブ、月別アーカイブの場合はそれぞれ<CategorizedArticlesLoop>、<MonthlyArticlesLoop>になります）

適用させたい場所に「<IfFirstArticle>内容</IfFirstArticle>」を記述します。このタグは変数タイプのタグではなく、条件分岐タイプのタグなので、開始タグと終了タグが必要になります。

使用例

１．ボタン(バナー)を掲載する
例：「アプリでフォローする」ボタンを掲載※同様に文章や広告を掲載できます。

参照：作成したバナーをアプリへのバナーリンクにする方法

　↓　↓　↓　↓　↓

HTML

<IfFirstArticle>
<a href="https://＊＊＊＊＊.livedoor.blog/_/ldapp_notifier">
<img src="https://parts.blog.livedoor.jp/img/usr/cmn/btn_add_ldapp.png">
</a>
</IfFirstArticle>

２．記事タイトルの文字表現を変える

例：最初の記事のタイトルを大きくして赤文字にする。