WordPress 人気記事一覧「WordPress Popular Posts 」サムネイル・タイトルを綺麗に整えるCSSの書き方

wordpress-logo-stacked-rgb

WordPressで、人気記事を表示できる人気プラグインの1つ「WordPress Popular Posts」のCSSの書き方について紹介します。

今回は、「WordPress Popular Posts 」のCSSレイアウトについて記載し、詳細な設定については別途紹介しようと思います。

 1. WordPress Popular Posts サムネイル設定

WordPress管理画面より、「WordPress Popular Posts 」のウィジェット設定にて、サムネイルの設定をします。

スクリーンショット_2013_07_13_16_42

設定項目名 設定値 備考
Display post thumbnail チェックを入れます
Width: 50 サムネイルサイズの横幅を入力します
Height: 50 サムネイルサイズの高さを入力します

「Display post thumbnail」にチェックを入れないと、サムネイルが表示されないのでご注意ください。サムネイルサイズは、ブログに応じて変更していただければと思います。本記事でのサムネイルサイズは「50×50」とします。

2.「WordPress Popular Posts」HTML設定

WordPress管理画面ウィジェット設定 > 「HTML Markup Settings」にて、HTML表示をカスタマイズします。

スクリーンショット_2013_07_14_17_26

設定項目名 設定値 備考
Use custom HTML Markup チェックを入れます
Before / after Popular Posts:  変更しなくて大丈夫です
Post HTML Markup <div class=wpp-container>
<div class=wpp-img>{thumb}</div>
<p>{title}</p>
</div>

「Post HTML Markup」に忘れずに上記のコードを入力し、「保存」をします。

3.  スタイルシート「style.css」設定

最後に、スタイルシートでレイアウトを構築します。テーマフォルダの「style.css」のコピーを取り、以下のコードを追記します。

/* Popular Posts Plugin Style */
.wpp-container {
        margin: 0 auto;
        padding: 0.714285714rem 0 0.714285714rem;
        border-top-color: #EDEDED;
        border-top-style: solid;
        border-top-width: 1px;
        overflow: hidden;
}
.wpp-img {
        width: 15.625%;
        float: left;
}
.wpp-img img {
        max-width: 100%;
        width: auto;
        height: auto;
}
.widget-area .wpp-container p {
        width: 81.25%;
        margin-bottom: 0;
        font-size: 0.857142857rem;
        line-height: 1.6;
        float: right;
}

widthのベース幅は「320」とし、画面幅に応じて変わるように可変ベース「%」としています。サムネイルの幅を「50px」、タイトル「260px」とし、中央揃えにしています。

可変式ではなく、「画面幅固定だよ!」という方

以下のクラスの値を変更してください。変更する箇所は、「width」値とremベースとなっている箇所、その他、font-size,padding値についてはお好みで変更してください。

変更するクラス名 変更するプロパティ 説明
.wpp-img width: サムネイルの横幅を入力します
例:50px
.widget-area .wpp-container p width: タイトル文字の横幅を入力します
例:260px
.wpp-container padding: 上下で「10px」paddingしています。
remベースなので「px」に修正したほうが良いと思います
.wiget-area .wpp-container p font-size 「12px」にしています。
remベースなので「px」に修正したほうが良いと思います

可変式サイトの場合

TwentyTwelveなどレスポンシブWebデザインの場合、全体幅、サムネイルサイズ、タイトル文字の幅を変更する場合は、以下の箇所を変更してください。

○サムネイル、タイトル幅「width」値の計算式
「 サムネイルの横幅 = (サムネイルの横幅)/ (ウィジェットの横幅) *100 」
「 タイトルの横幅 = (タイトルの横幅) / (ウィジェットの横幅) * 100」]
変更するクラス名 変更するプロパティ 説明
.wpp-img width: サムネイルの横幅の計算結果を入力します
.widget-area .wpp-container p width: タイトルの横幅の計算結果を入力します
.wpp-container padding: 上下で「10px」paddingしています。
環境に合わせて変更してください
.wiget-area .wpp-container p font-size 「12px」にしています。
環境にあわせて変更してください

WordPress Popular Postsは、個別記事のPV数を表示したり色々カスタマイズ出来そうなので、また次回個別に記事を書こうと思います。

SNSで最新情報をチェック

更新情報は、twitter,facebook,でチェックできます。facebook限定の記事もありますので非ご登録いただければとおもいます。

WordPress 人気記事一覧「WordPress Popular Posts 」サムネイル・タイトルを綺麗に整えるCSSの書き方」への1件のフィードバック

  1. ピンバック: Popular Postsのデザイン変更@テーマ作成95日目 | 変わるかな?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です