【Blogger】トップページの最近の記事一覧(Recent posts)のカスタマイズ

   Latest updated
Blogger, JetTheme, トップページ記事一覧のカスタマイズ

JetThemeのトップページの、最近の記事一覧をカスタマイズしたので、紹介したいと思います。

カテゴリータグの非表示化

最近の記事一覧のカテゴリータグを非表示化します。
CSSに以下のコードを追加して非表示化します。

.item-tag{
	display:none;
}

以上、カテゴリータグの非表示化でした。

カード全体をリンクにする

初期状態でリンクがついているのは、画像、かごれいータグ、タイトルのみで、少し使いずらいのでカード全体が記事にリンクできるように変えていきます。
なお当サイトでは、上記のとおりカテゴリータグは非表示化してますので、カテゴリーへのリンクは考慮せずに検討致しました。

Step1

テーマのHTML編集で、以下のarticleタグを検索します。

<article class='item-post mb-4'>
	<b:include data='post' name='JetArchive'/> 
</article>

Step2

後ほどCSSを追加するために、articleタグに以下のように"top-page-link"クラスを追加します。

<article class='item-post mb-4 top-page-link'>
	<b:include data='post' name='JetArchive'/> 
</article>

Step3

<b:includable id='JetArchive' var='post'>を検索します。そしてそのすぐ下に以下のようにaタグを追加します。このaタグが記事のリンク先になります。

<b:includable id='JetArchive' var='post'>
<a expr:href='data:post.url.canonical' rel='bookmark'/>
<div class='h-100 overflow-hidden rounded position-relative border jt-border-light bg-archive shadow-sm'>

Step4

もともと画像、ラベル、タイトルに付与されていたリンクは、不要になりますのでaタグを削除していきます。

まずは画像部分です。
画像部分は表示は変えたくないので、もともとaタグに付与されていたクラスを残しつつ、aタグをdivタグに変更します。

<a class='jt-bg-light d-block ratio ratio-16x9' expr:href='data:post.url.canonical' rel='bookmark'>
<img expr:alt='data:post.title' expr:class='data:post.featuredImage.isYoutube ?  &quot;object-cover lazyload&quot; : &quot;lazyload&quot;' expr:data-src='data:post.featuredImage.isYoutube ? data:post.thumbnailUrl : data:post.featuredImage' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>
</a>

上記のaタグをクラスを残しつつ不要なものは削除して、以下のようにdivタグに変えます。

<div class='jt-bg-light d-block ratio ratio-16x9'>
<img expr:alt='data:post.title' expr:class='data:post.featuredImage.isYoutube ?  &quot;object-cover lazyload&quot; : &quot;lazyload&quot;' expr:data-src='data:post.featuredImage.isYoutube ? data:post.thumbnailUrl : data:post.featuredImage' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>
</div>

次にラベル部分です。
画像部分の時と同様に、aタグをdivタグに変えていきます。

<a class='text-reset hover-text-primary' expr:href='data:label.url.canonical + &quot;?max-results=10&quot;' rel='tag'>
<data:label.name/>
</a>

<div class='text-reset hover-text-primary'>
<data:label.name/>
</div>

なお、本サイトではラベル(カテゴリーラベル)は、非表示にしていますので、この場合は変更してもしなくてもいいかもしれません。

最後にタイトル部分です。
前記と同様に、aタグをdivタグに変えていきます。

<a class='text-reset' expr:href='data:post.url.canonical'>
<data:post.title/>
</a>

<div class='text-reset'>
<data:post.title/>
</div>

このあと、CSSをお示ししますが、CSSでカード全体を最前面にしていますので、このタイトルのdivタグに付与されているクラスは表示に影響しないと思いますので、削除しても問題ないかと思います。

Step5

最後に、CSSを書き加えます。以下のCSSを書き加えました。

.top-page-link{
	position:relative;
	z-index:1;
}
.top-page-link>a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
}
.top-page-link:hover{
	cursor: pointer;
	opacity: 0.5;
	transition-timing-function: ease;
	transition-duration: 0.3s;
	text-decoration: none;
}

マウスをホバーしたときのアニメーションは、好みに変えて頂けばいいかなと思います。私はシンプルなものがすきなので半透明になるようにCSSを書いています。

はじめは、aタグをブロック要素化すれば、できると思ってやってみましたが、できることはできましたが、こちらのCSS設定の方が何かといいかと思います。

参考サイト・最後に

今回は、以下の2つのサイトを参考に、トップページの最近の記事一覧をカスタマイズしました。

参考にしたサイトでは、サイトのリンクとラベルのリンクを区別する仕様となっています。私はラベルは非表示にしているので、上記のように一部修正したCSSとしております。

参考サイト：大変ありがとうございました。

今回は、トップページの最近の記事一覧のカスタマイズを紹介してきました。これからも、JetThemeのカスタマイズを進めていきたいと思います。私はHTML素人ですので、間違いがあるかもしれませんし、用語を不適切に使っているかもしれません。ご容赦頂ければ幸いです。

最後まで記事を読んでいただきありがとうございました。

Jetthemeカスタマイズは、こちらにまとめてます

- スポンサーリンク -

Next Post Previous Post