こんにちは、@nanase_nananaviです。
今日は「Wordpress Popular Posts」のデザインをシンプルにカスタマイズする方法を紹介します。
- 画像を横長にしたい
- 画像を劣化させたくない
- タイトルを下にしたい
このように、画像とタイトルだけにして見やすくしたい方の参考になれば幸いです。
カスタムHTMLマークアップ
外観からウィジェットへ行き、Popular PostsのHTML マークアップ設定にて「カスタムHTMLマークアップを使う」にチェックをして、以下のコードを挿入します。
①「Popular Postsの前 / 後: 」にコードを入力。
<ul class="wpp-list"> </ul>
②「投稿のHTML マークアップ: 」にコードを入力。
<div class=wpp-container>
<div class=wpp-img>{thumb}</div>
<p>{title}</p>
</div>
大きい画像を指定し、高さを調整する。
規定サイズの「１５０×１５０」などの小さい画像を指定してしまうと、それを大きくしようと引き延ばされて画像が劣化してしまうことがあります。
手動で、横幅は５００px以上で指定しておくと高画質のままリサイズされます。高さは、このサイトでは２００pxに指定しています。元画像の大きさによって、高さが若干変わってきますが、この高さを指定することで、好みの横長のスタイルを変更できます。
※大きな画像（幅１０００pxほど）にすると写真は高画質ですが、ページの読み込みスピードが遅くなる可能性あり。
中央に寄せる
画像やテキストを中央にするために、センタリングをします。
<div class="center"><div class=wpp-container>
<div class=wpp-img>{thumb}</div>
<p>{title}</p>
</div>
追加CSSで編集
画像を画面の最大幅にする
/* 画像サイズ レスポンシブ対応 */
.wpp-img img {
max-width: 100%;
width: 100%;
margin: 5px 5px 5px 5px;
}
marginは余白のことです。画像まわり「左→上→下→右」の幅を指定できます。
記事タイトルのデザインを変える
- テキストの色を変更
- 下線の有無を変更
- テキストの大きさを指定
/* Title styles */
.wpp-post-title {
color: #fff;
text-decoration: none;
font-size: 13.5px;
}
text-decoration: none; を削除すると、再びデフォルトの下線が表示されます。noneにすることで、下線を消しています。
- 記事と記事の間の幅を指定する
marginとは余白のことです。左→上→下→右側の幅を指定できます。
/* 記事と記事の幅 */
.wpp-container {
margin: 10px 5px 20px 5px;
}
おわりに
以上です。
ビジュアルエディタを使って、実際に見てみながら数字を変えると、調整しやすいです。綺麗に横長のサムネイルを作れましたか？
アイキャッチは、大きいほどクリックされやすいとのことなので、このデザインでしばらく過ごしてみることにします。
参考サイト様
- おすすめ方法.com さん