シーサーブログの記事タイトルを全て表示させる

新デザインのシーサーブログの記事下やサイドバーに表示される記事のタイトルを すべて表示させる方法について書いていきます。

新デザインのシーサーブログでは記事下に同じカテゴリーの記事がサムネイル付きで 新しい順に表示されるのですが、 デフォルト設定だと表示のされ方が全然イケてなくて、何の記事か極めて分かりにくいです。
ちなみにBeforeは↓です。これでは次の記事を読もうとは思わないですよね。
Before


少しでも長くブログ内に滞在してもらうために、他の記事を載せているのにこれでは逆効果なので、 サムネイルを消して記事タイトルを全て表示させるようにカスタマイズしました。
カスタマイズ後は↓のようになります。
After


同様にサイドバーに配置しているブログパーツ「最近の記事」も記事タイトルを全文表示させるようにしました。抜粋文も無くしてスッキリさせました。
てか、デフォルト設定が内容を伝える気無さすぎですよね。。
Before


After


このようなカスタマイズのやり方を解説していきます。
この記事中のソースコードは全て半角で表示されるようにしてあるので、コピペしてもらっても大丈夫です。
もし動作しなかった場合はお知らせいただけるとありがたいです。

スポンサーリンク

・記事下の同カテゴリー記事タイトルを全文表示させる方法
デザイン＞デザイン設定＞デザインタイトルをクリック＞HTML編集
109-131行目くらいにある

<% if:list_category_article -%>
<div class="module module--category-recent-entry">
<h3 class="module__heading"><% article_category.name -%>の最新記事</h3>
<div class="module__body">
<ul class="recent-entry">
<% loop:list_category_article -%>
<li class="recent-entry__item">
<a href="<% article.page_url -%>">
<div class="recent-entry__thumnail">
<% if:article.first_image -%>
<img src="<% article.first_image.page_url_thumbnail -%>" alt="" />
<% else -%>
<div class="no-image"><div class="no-image--inner">no image</div></div>
<% /if -%>
</div>
<p><% article.subject | text_summary(20) -%></p>
</a>
</li>
<% /loop -%>
</ul>
</div>
</div>
<% /if -%>

を消して↓のコードに置き換える。

<% if:list_category_article -%>
<div class="listCategoryArticle">
【<% article_category.name %>の最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href="<% article.page_url %>">・<% article.subject | text_summary(100) %></a></li>
<% /loop %>
</ul>
</div>
<% /if %>

プレビューで確認して問題なければ保存で完了です。
これで半角100文字全角50文字までのタイトルが表示されるようになります。もっと長いタイトルを表示したい場合は、text_summary(100)のカッコ内の数字を大きくしてください。

・サイドバーの最近の記事の記事タイトルを全文表示させる方法
デザイン＞デザイン設定＞デザインタイトルをクリック＞コンテンツHTML編集
24行目くらいからの

<h4 class="recent-entry__title">
<% if:article.first_image -%>
<% article.subject | tag_strip | shorten(26) | mark_raw -%>
<% else -%>
<% article.subject | tag_strip | shorten(36) | mark_raw -%>
<% /if -%>
</h4>
<p class="recent-entry__body">
<% if:article.first_image -%>
<% article.body | tag_strip | shorten(58) | mark_raw -%>
<% else -%>
<% article.body | tag_strip | shorten(74) | mark_raw -%>
<% /if -%>
</p>

を見つけ、
1) shorten(26)をshorten(100)にする。
これで記事内にサムネイル写真がある場合のタイトル表示数が 半角100文字(全角50文字)になります。

2) shorten(36)をshorten(100)にする。
これで記事内にサムネイル写真が無い場合のタイトル表示数が 半角100文字(全角50文字)になります。

3) 後半7行を削除する。
これで記事の抜粋文が消えます。
下のコードが残っていればOK。

<h4 class="recent-entry__title">
<% if:article.first_image -%>
<% article.subject | tag_strip | shorten(100) | mark_raw -%>
<% else -%>
<% article.subject | tag_strip | shorten(100) | mark_raw -%>
<% /if -%>
</h4>

プレビューで確認して問題なければ保存で完了です。

・HTMLソースコードを記事内に表示する方法
HTMLのソースコードは「<」と「>」で囲まれていますが、 その「<」を「＆lt;」に置き換えると記事中に表示できるようになります(＆も半角で)。
記事では半角の「<」で表示されるので、ソースコードをコピペして使われても問題なく動作するはずです。

以上、新デザインのシーサーブログ記事下やサイドバーに表示される記事タイトルを全て表示させる方法でした。
これで少しでも直帰率が下がってくれればうれしいですね。

【関連記事】

• 新デザインシステムのシーサーブログにアドセンス広告貼ったりした【ブログ設定色々】
• 当ブログの目次