WordPress高速テーマLuxeritasの新着記事と人気記事と関連記事のサムネイル表示を直してみた

2019年9月4日

目的はサイドバーの新着記事と人気記事と関連記事のデザインの統一

WordPressの高速テーマとして定着しているLuxeritasはとても気に入って使っているのですが
唯一サイドバーと関連記事のサムネイルの表示が正方形ということもあり縦横比が崩れるというところに不満がありました。

このことに悩んでいる方は少なくないようでいろいろなカスタマイズ方法が投稿されているので
自分もその恩恵に預かることにしました。

目的はサイドバーの新着記事と人気記事のデザインの統一。
そして関連記事のサムネイルも変えることです。

こちらがデフォルトの新着記事のレイアウト。サムネイルが正方形となって縦横比が崩れています。
↓

そしてカスタマイズ後の状態がこちら。
↓

新着記事

参考にさせていただいたのは以下の記事です。

サイドバー編では
↓

Fukuro Press

https://fukuro-press.com/wp-popular-posts-display-rank/

まるっと。

サイドバーにおすすめ記事一覧をサムネイル付きで表示させる | まるっと。

https://martto.net/wordpress/plugin/11017/

前回に引き続きサムネイル付きの記事一覧の表示についてご案内します。今回は、タグを利用したおすすめ記事一覧の表示方法です。今回の記事は WordPress > プラグインです。一つの...

創kenブログ

WordPressテーマ「Luxeritas」をカスタマイズ（その９）人気記事欄の設置・他 | 創...

https://souken-blog.com/2018/03/13/wordpress-luxeritas009/

「Luxeritas（ルクセリタス）」は国産の無料WordPressテーマです。＊Luxeritas Theme | SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPress テーマ「GPL v2 or later」ライセンス、カスタマイズ自由自在で商用利用可。 SEO 最適化済、レ...

Fukuro Press

https://fukuro-press.com/wp-popular-posts-display-rank/

関連記事・前後記事のサムネイル変更についてはこちらを参考にさせていただきました。
↓

さやっと。自分らしく生きるためのぶろぐ。

WordPressテーマLuxeritasで関連記事・前後記事のサムネイルを正方形→任意のサイズ...

https://saya-to.com/wordpress-site/themes-luxeritas-customize/post-1889/

さやっと。ではWordPressのテーマLuxeritasを使っています。非常に高速＆高機能＆カスタマイズ豊富で知られるLuxeritasですが、設定項目が多すぎて便利なものの初...

これでとりあえず目的の8割は達成できましたが
これではまだ新着記事と人気記事のデザインが揃ったとは言えませんので自分なりに調整をしました。

自分はcssの知識は乏しいのでコードをまぜこぜにしてしまっているのですが
とりあえずはこのサイトのようなデザインでも構わないと思うのなら参考にしてください。

Luxeritas Child Theme: スタイルシート (style.css)に追記してください。

css

/* サイドバーRPWE新着記事一覧 */
#side .rpwe-block ul{
	list-style: none ;
	margin-left: 0 ;
	padding-left: 0 ;
}
#side .rpwe-block li{
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
	padding-bottom: 10px;
	list-style-type: none;
}
#side h3.rpwe-title{
	background:none; /* サイドバーのh3タイトルに背景色を設定している場合 */
	border:none; /* サイドバーのh3タイトルに枠線を設定している場合 */
	box-shadow: none; /* サイドバーのh3タイトルにシャドーを設定している場合 */
	line-height: 1.2em;
	font-size: 14px;
	margin: 0;
}


.rpwe-thumb{
	border: 1px solid #ddd;
	margin: 2px 10px 2px 0;
	padding: 3px ;
	box-shadow: 0 0 2px 1px rgba(255,255,255,1) inset;
}
.rpwe-summary{
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.4;
}
.rpwe-alignleft{
	display: inline;
	float: left;
}
.rpwe-clearfix:before,
.rpwe-clearfix:after{
	content: "";
	display: table ;
}
.rpwe-clearfix:after{
	clear: both;
}
.rpwe-time{
	color: gray;
	font-size: 13px;
	line-height: 1.4;
}




/* サイドバー：人気記事欄 */

.popular-posts li {
    line-height:1.4em !important;
    margin-bottom:10px !important;
    padding-bottom:10px !important;
	border-bottom: 1px solid #eee;
}

.popular-posts img {
    padding:1px;
    border:solid 0.5px #e2e2e2;
}

.popular-posts .wpp-post-title {
    color:#4169E1;
    font-weight:bold;
    font-size:12px;
	padding-top:0;
    margin-left:3px;
}

.popular-posts .wpp-post-title:hover {
    color:#dc143c;
}

.popular-posts .wpp-excerpt {
    font-size:14px;
}

@media (min-width: 578px) {
    
.popular-posts .wpp-excerpt {
    display:block;
    margin-top:10px;
} 
    
}






/** 人気記事のアイキャッチ内に順位番号を表示 */
body{
  counter-reset: rank_number;  
}
.wpp_thumb_wrapper{
  position: relative;
}
.wpp_thumb_wrapper:after{
  counter-increment: rank_number;
  content: counter(rank_number);
  display: block;
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  background: rgba(50, 50, 50, 0.8);
  color: white;
  font-size: 14px;
  text-align: center;
  border-radius: 2px;
}



/* 前後記事サムネイル */
#pnavi img{
	width:150px;
	height:85px;
}
#pnavi .prev img{
	margin:2em 10px 0 0;
}
#pnavi .next img{
  margin: 2em 0 0 10px;
}
/* 関連記事サムネイル */
#related .term img {
    width: 150px;
    height: 85px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

/* サイドバーRPWE新着記事一覧 */

#side .rpwe-block ul{

list-style: none ;

margin-left: 0 ;

padding-left: 0 ;

}

#side .rpwe-block li{

border-bottom: 1px solid #eee;

margin-bottom: 10px;

padding-bottom: 10px;

list-style-type: none;

}

#side h3.rpwe-title{

background:none; /* サイドバーのh3タイトルに背景色を設定している場合 */

border:none; /* サイドバーのh3タイトルに枠線を設定している場合 */

box-shadow: none; /* サイドバーのh3タイトルにシャドーを設定している場合 */

line-height: 1.2em;

font-size: 14px;

margin: 0;

}

.rpwe-thumb{

border: 1px solid #ddd;

margin: 2px 10px 2px 0;

padding: 3px ;

box-shadow: 0 0 2px 1px rgba(255,255,255,1) inset;

}

.rpwe-summary{

margin: 0;

padding: 0;

font-size: 12px;

font-size: 1.2rem;

line-height: 1.4;

}

.rpwe-alignleft{

display: inline;

float: left;

}

.rpwe-clearfix:before,

.rpwe-clearfix:after{

content: "";

display: table ;

}

.rpwe-clearfix:after{

clear: both;

}

.rpwe-time{

color: gray;

font-size: 13px;

line-height: 1.4;

}

/* サイドバー：人気記事欄 */

.popular-posts li {

line-height:1.4em !important;

margin-bottom:10px !important;

padding-bottom:10px !important;

border-bottom: 1px solid #eee;

}

.popular-posts img {

padding:1px;

border:solid 0.5px #e2e2e2;

}

.popular-posts .wpp-post-title {

color:#4169E1;

font-weight:bold;

font-size:12px;

padding-top:0;

margin-left:3px;

}

.popular-posts .wpp-post-title:hover {

color:#dc143c;

}

.popular-posts .wpp-excerpt {

font-size:14px;

}

@media (min-width: 578px) {

.popular-posts .wpp-excerpt {

display:block;

margin-top:10px;

}

/** 人気記事のアイキャッチ内に順位番号を表示 */

body{

counter-reset: rank_number;

}

.wpp_thumb_wrapper{

position: relative;

}

.wpp_thumb_wrapper:after{

counter-increment: rank_number;

content: counter(rank_number);

display: block;

position: absolute;

left: 0;

width: 20px;

height: 20px;

background: rgba(50, 50, 50, 0.8);

color: white;

font-size: 14px;

text-align: center;

border-radius: 2px;

}

/* 前後記事サムネイル */

#pnavi img{

width:150px;

height:85px;

}

#pnavi .prev img{

margin:2em 10px 0 0;

}

#pnavi .next img{

margin: 2em 0 0 10px;

}

/* 関連記事サムネイル */

#related .term img {

width: 150px;

height: 85px;

}

参考にさせていただいた記事をしっかり見てカスタマイズするともっと良くなると思いますよ。

WordPress, プラグイン, 最適化Luxeritas, WordPress, カスタマイズ, サムネイル, プラグイン, 人気記事, 新着記事, 縦横比, 関連記事, 高速テーマ