Seesaaブログ:関連記事の表示改善

今回は、関連記事の表示を調整する方法を紹介します。

非常に残念ですが、Seesaaブログで新たに追加された関連記事機能は、単純に横並びの記事タイトルもすべて表示されない作りになっています。そのため、わざわざ外部ツールを使って関連記事を表示させていましたが、やっぱり広告がうざいので関連記事部分を修正してみました。

そこで、私が新デザインシステム化対応の修正をしてみようと思い、今回記事を書いてみました。

カスタマイズ後のサンプル

文字でつらつら修正点を書いてもわかりづらいと思いますので、カスタマイズした後のサンプルブログを紹介します。

Seesaa blogで出来る事

TERERERE

http://ssssample.seesaa.net/article/441587239.html

RERERERRERE

カスタムに使用したベースのテンプレートは、「シンプルB.ホワイト右カラム」になります。

運営さん、ほかの作業が忙しいのはわかりますが、ちょっと手を抜きすぎてはいませんかね？サポートブログでサポート記事をぜひお願いします。

設置方法

HTMLの両方を修正することで、Seesaaブログ新システム対応していきます。

HTML編集

①管理画面上から、[デザイン]-[デザイン設定]-[選択しているテンプレタイトル]を選んで画面を表示させます。

②下にスクロールをして、[HTML編集]を選択

画面を開くとすでにソースが書かれているので、変更後のソースをコピペして保存します。

変更前

<% if:list_related_article -%>
<div class=”module module–category-recent-entry”>
<h3 class=”module__heading”><% if:blog.get_property(‘related_article’) eq ‘category’ %><% article_category.name -%>の最新記事<% else %>関連する記事<% /if %></h3>
<div class=”module__body”>
<ul class=”recent-entry”>
<% loop:list_related_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(40) -%></p>
</a>
</li>
<% /loop -%>
</ul>
</div>
</div>
<% /if -%>

変更後

<% if:list_related_article -%>

<section class=”module module–recent-entry”>
<h3 class=”module__heading”><% if:blog.get_property(‘related_article’) eq ‘category’ %><% article_category.name -%>の最新記事<% else %>関連する記事<% /if %></h3>
<div class=”module__body”>
<ul class=”recent-entry”>

<% loop:list_related_article -%>
<li class=”recent-entry__item”>
<a href=”<% article.page_url -%>”>
<% if:article.first_image -%>
<p class=”recent-entry__thumbnail”><img src=”<% article.first_image.page_url_thumbnail -%>” alt=”” /></p>
<% /if -%>
<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>
</a>
</li>
<% /loop -%>
</ul>
</div>
</section>