【F-light】人気の投稿ウィジェットを個別ページでも表示させる

｜2023/09/06
アイキャッチ

人気の投稿は個別ページでこそ必要？

フッターをスッキリさせたいとか、回遊性とかは気にしないという個人的な理由もあり、個別ページでは「人気の投稿」を非表示にしていて、何の気なしに F-light もデフォルトでそういう仕様にしていました。でも一般的にはトップページはあまり見られない(と思う)ので、むしろ個別ページで「人気の投稿」をアピールしたほうがいいのかもしれませんね。

というわけで、次回のアップデートでデフォルトで「人気の投稿」を常時表示仕様にする予定ですが、とりあえず現行バージョンで常時表示させる暫定的な方法を書き記しておこうと思います。

カスタマイズ手順

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。もしくはテスト用の環境(別ブログ)を用意してそちらで試されることをおすすめします。

① タグの変更

以下のタグを検索で探して、赤文字の部分を削除して下さい。

<b:widget cond='!data:view.isSingleItem' id='PopularPosts1' locked='false' title='人気の投稿' type='PopularPosts' version='2' visible='true'>
↓↓ 
<b:widget id='PopularPosts1' locked='false' title='人気の投稿' type='PopularPosts' version='2' visible='true'>

② CSS の追記

以下の CSS を /*==== コメント ====*/ の直上に追記して下さい。

/*]]>*/</b:if><b:if cond='data:view.isSingleItem'>/*<![CDATA[*/
↓ここに挿入

/*==== 人気の投稿 (個別ページ) ====*/
.PopularPosts .article {
  height: 90px;
  position: relative;
  margin-bottom: 20px;
  transition: .3s;
  border-radius: 5px;
  box-shadow: 1px 1px 2px var(--shadow);
}
@media (max-width: 1024px ) {
  #PopularPosts1 article {
    height: 130px;
  }
  .pop-title {
    padding-top: .5em;
  }
}
.article > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.article:hover {
  box-shadow: 8px 8px 10px var(--shadow);
}
.article-header {
  color: var(--dark-color);
  font-size: 1.4rem;
  bottom: 0;
  right: 5px;
  position: absolute;
  margin-top: 5px;
}
.PopularPosts ul {
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
}
.pop-img img {
  position: absolute;
  object-fit: cover;
  width: 40%;
  height: 100%;
  border-radius: 5px 0 0 5px;
}
.pop-title {
  display: flex;
  font-weight: normal;
  margin-bottom: 5px;
  overflow: hidden;
  line-height: 1.4;
  position: relative;  
  font-size: 1.6rem;
  height: 5.8em;
  left: 41%;
  width: 52%;
}
.pop-title::before {
  content: "\25CF";
  font-size: 1.7rem;
  line-height: 1.3;
  color: var(--brand-light);
  transition: .3s;
}
.article:hover .pop-title::before {
  color: limegreen;
}
.pop-snippet {
  display: none;
}
.ranked-li {
  position: relative;
}
.PopularPosts li {
  list-style-type: none;
}
.post-rank {
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 2em;
  height: 1.2em;
  line-height: 1.3;
  text-align: center;
  font-weight: bold;
  color: #fff;
  border-top-left-radius: 5px;
  background: limegreen;
}
↑ここに挿入
/*==== コメント ====*/

(必要に応じて)レイアウトの調整

各ウィジェットをドラッグ・アンド・ドロップで並べ替えて、フッターのバランスをいい塩梅に整えて下さい。

個別ページで表示数を減らす

参考までに PC 表示時のレイアウトバランスを整える方法の一例を紹介。個人的に無駄に高さのあるフッターが嫌なので(^^;

例えばトップページ(2カラムのサイドバー)では5件で、個別ページ(フッター)では3件(1～3位まで)のみの表示にする場合は、上記の CSS に以下の CSS を追加して下さい。

.PopularPosts li:nth-of-type(4),
.PopularPosts li:nth-of-type(5) {
  display: none;
}

次回の新テーマでは？

スライド式で出し入れ出来るサイドバーを実装すれば置き場所とか気にしなくても済むんでしょうけど、常に見えていないと嫌で、Contempo を使ってた時も PC では常時表示にしていました。今後 F-light に実装するつもりはないですが…次にまた新しいテーマを作る際には一応検討したいと思います。