WordPress高速テーマLuxeritasの新着記事と人気記事と関連記事のサムネイル表示を直してみた
目的はサイドバーの新着記事と人気記事と関連記事のデザインの統一
WordPressの高速テーマとして定着しているLuxeritasはとても気に入って使っているのですが
唯一サイドバーと関連記事のサムネイルの表示が正方形ということもあり縦横比が崩れるというところに不満がありました。
このことに悩んでいる方は少なくないようでいろいろなカスタマイズ方法が投稿されているので
自分もその恩恵に預かることにしました。
目的はサイドバーの新着記事と人気記事のデザインの統一。
そして関連記事のサムネイルも変えることです。
こちらがデフォルトの新着記事のレイアウト。サムネイルが正方形となって縦横比が崩れています。
↓
そしてカスタマイズ後の状態がこちら。
↓
新着記事
人気記事
関連記事
では手短に紹介します。
必要なプラグインは
Recent Posts Widget Extended
https://ja.wordpress.org/plugins/recent-posts-widget-extended/
と
WordPress Popular Posts
https://ja.wordpress.org/plugins/wordpress-popular-posts/
の二つだけです。
*Luxeritasのオリジナルの新着記事は使いません。
参考にさせていただいたのは以下の記事です。
サイドバー編では
↓
関連記事・前後記事のサムネイル変更についてはこちらを参考にさせていただきました。
↓
これでとりあえず目的の8割は達成できましたが
これではまだ新着記事と人気記事のデザインが揃ったとは言えませんので自分なりに調整をしました。
自分はcssの知識は乏しいのでコードをまぜこぜにしてしまっているのですが
とりあえずはこのサイトのようなデザインでも構わないと思うのなら参考にしてください。
Luxeritas Child Theme: スタイルシート (style.css)に追記してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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; } |
参考にさせていただいた記事をしっかり見てカスタマイズするともっと良くなると思いますよ。