ブログカスタマイズの雑談BLOG

Seesaaブログのコンテンツ「人気記事」は、2015年8月からリリースされた機能で、「ブログ内で人気のある（PV数の多い）記事をランキング形式でブログ上に表示できる」コンテンツだそうです。


現時点のテンプレート



Seesaaブログのデフォルトのテンプレート「シンプルA. ホワイト 右カラム」の場合、現時点の「人気記事」は、このように記事のタイトルが並んでいるだけです。
カスタマイズしているしていないは関係ありません。デフォルトの状態では、このように記事タイトルだけが表示されるようになっています。



正直、どこで記事タイトルが切れているのかわかりにくいです。
せっかく「リスト表示」されているのだからタイトルの先頭には何かマークを付けて、もっとわかりやすく表示したいと思います。

デフォルトのテンプレート上の「人気記事」スタイルを確認

前回の記事＜■サイドバー「過去ログ」「カテゴリ」のリストの先頭に「●」を付ける＞で、サイドバーの「過去ログ」と「カテゴリ」のリスト先頭にマーカー文字「●」を表示させました。
「list-style-typeプロパティ」を使わずに、コンテンツHTML内の該当部分に直接「●」を書いてしまうという暴挙に出ましたが、単純に見た目だけを問題にするならばコレがいちばん簡単な方法です。



コンテンツHTMLには、「過去ログ」や「カテゴリ」と同じように、「人気記事」についてもコード記述されています。
「<% if:parts_name == 'popular_article' # START parts -%>」以下の記述です。





上記画像内で赤色背景色にしている「<section class="module module--popular-entry" id="popular-article-section-<% parts.id %>">」という記述及び「<div class="module__body">」という記述から、「人気記事」として表示される記事タイトルに付けられたclassは「module」「module--popular-entry」「module__body」の3つであることがわかります。



このうち「module--popular-entry」と「module__body」を使って、CSS上で「人気記事」に対するスタイルが記述されています。





「.module--popular-entry .module__body ol li」というclassで記述されていますが、内容を見ると「list-style-type: decimal;」という指示があります。
これは「リストの先頭に表示するマーカー文字の種類を算用数字（decimal）にする」という指示です。
でも、現在の「人気記事」には数字なんかどこにも表示されていません。



数字（番号）が振られていないことを強調するために、改めて現時点の「人気記事」の画像を掲載しておきますね。


現時点のテンプレート

CSSの「人気記事」の記述を編集する

デフォルトのテンプレート「シンプルA. ホワイト 右カラム」の「人気記事」に対するCSS上の記述は、上記で説明したように、実は無効になっています。
効いていません。


たぶん、SeesaaブログさんがCSSの記述を間違っておられると思うわけです。
（実際に効いていないから、たぶん間違ってると思うの‥‥）
編集して、リストの先頭に算用数字で番号を振るようにしたいと思います。



CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「.module--popular-entry .module__body ol li」というclassを探します。
CSSの該当部分に下記「編集後」のコードをコピペするか直接記述し、変更内容を「保存」します。


＜元コード＞


＜編集後＞


●class名「.module--popular-entry .module__body ol li」を「.module--popular-entry .module__body li」に変更しました。「ol」が邪魔をしていたのでこのclassが無効になっていたと思われます。「ol」を削除してください。

●「text-indent」を「-1.5em」に変更しました。何となく、いいかな？と思って変更しただけです。

●記事タイトルの下に点線を引くことにして、記事タイトルと記事タイトルの間をハッキリとさせます。点線「border-bottom: 1px dotted #ADADAD;」は、「最近の記事」で記事タイトル下に引いている線と同じスタイルにしました。

●行間を「line-height:1.5em;」にして、少し狭くしました。（何もしなければ「body」で設定している「1.8em」が有効になります）


●記事タイトルのリンク下線を削除
記事タイトルの下線（リンク設定に付けている下線）をはずしました。
下線をはずさなかった場合は、こんな感じになります。





各記事タイトルの先頭には、ちゃんと数字が表示されています。
でも、記事タイトルの下線がうるさいので、見た目がごちゃごちゃしています。


リンクの下線を外すために、新しく「.module--popular-entry .module__body li a」というclassを追加し、「text-decoration: none;」を記述しました。
「該当class名＋a」というclassは、リンク設定に対する指示を出す記述です。そこに「text-decoration: none;」を記述することで、「リンク部分の下線なし」という指示を出しています。

コード編集後の実際のページ

次の記事の紹介

この記事ではサイドバーの「人気記事」のリスト表示を編集して、リストの先頭に元々設定されていた数字を表示させるようにしました。見た目の問題もあり、「人気記事」のリスト表示ではリンクの下線を表示させないように設定しています。


「人気記事」のパーツだけを見れば何の問題もありませんが、「サイドバーのコンテンツ」として見れば、サイドバーのリンク部分には下線があったりなかったり、統一されていない状態になっています。
なので、次の記事ではサイドバーのリンク下線の編集をしたいと思います。
基本的に、サイドバーのリンク文字には下線を表示させない方向で編集します。（私自身はカレンダーの「年月」部分のリンク下線は残したいんですけどね。とりあえず残す方法と残さない方法の両方を書いています）