WordPress Popular Postsを横並びでサイドバーに2列で設置

WordPress Popular Posts

WordPressのプラグイン『WordPress Popular Posts』を横並びに配置する方法の備忘録です。
デフォルト設定でサムネイルの大きさを変更したりなどはできますが縦並びのためスペースがもったいないと思ってる人にはお薦めの配置ですが自己責任でお願いします。

スポンサーリンク

WordPress Popular Postsのインストール

↓ここからインストール⇒有効化します。

外観ウィジェットからWordPress Popular Postsで表示する設定画面を開きます。

WordPress Popular Posts設定画面

↑のようにサムネイルを100×100にすると

300px幅のサイドバーに設置した場合は↓こんな感じです。

WordPress Popular Posts

この縦並びを横並びにして、サイドバーに丁度良いように2列に配置する方法を解説していきます。

デフォルトのスタイルをコメントアウトする。

プラグインインストール済みプラグインWordPress Popular Posts編集

WordPress Popular Posts

開いた編集画面で『wordpress-popular-posts/style/wpp.css』を選択。

WordPress Popular Posts

この中の.wpp-list liのスタイルをコメントアウトして無効にしておきます。

↑この部分を/**/で挟むだけです。

↓1と7行目のように。

コメントアウトしたことで並びが初期化されました。

WordPress Popular Posts

ここから子テーマへ新しいスタイルを追加していきます。

サイドバーに合わせたスタイルの適用

外観ウィジェットからWordPress Popular Posts
サムネイルのサイズを130pxに指定して保存をクリック。

WordPress Popular Posts

サムネイルが少し大きくなりました。

WordPress Popular Posts

セルの大きさと並び方を指定します。

子テーマ(推奨)のstyle.cssへ以下を追加

300pxのサイドバーで2列の横並びとしては丁度良い大きさになりました。
10行目のbackground-color: white;で背景を白に指定しています。
このwhiteを変えることで色を好みに変更することが可能です。

WordPress Popular Posts

タイトルがはみ出してしまってるので調整します。

WordPress Popular Posts

これで丁度良い並びになったと思います。

閲覧数「VIEWS」の表示と位置

今回の設定では「VIEWS」にチェックを入れても隠れてしまい表示されません。

表示させるには、

外観ウィジェットからWordPress Popular Posts
Display views
にチェック

WordPress Popular Posts

cssを追加

WordPress Popular Posts

これで「VIEWS」の数が上側に表示されました。

5行目で背景色、6行目で文字色を変更可能です。
(位置はこのセルの設定に合わせてあります)

WordPress Popular Postsのアップデート

プラグインの更新があった場合は
『デフォルトのスタイルをコメントアウトする。』で解説した部分だけをやり直して下さい。

 あとがき

自分用の備忘録のため、300pxのサイドバーに合わせた設定に限定しました。

 WordPressのテーマが『Simplicity』の方ならこのままコピペだけで利用できると思いますが自己責任でお願いします。

「VIEWS」についても、その他の「著者名」「日付」「コメント数」なども表示したい場合はこのレイアウトでは諦めるかセルの大きさから見直しが必要だと思います。
cssが分かる方だけ自力でお願いします。

以上!お疲れ様でした。(^^)/

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメント

  1. れん より:

    ラハト・ナン・グスト様

    いつも拝見して参考にさせていただいております。

    この記事の「人気記事を横並びでサイドバーに2列で設置 」も自分のブログでやらせていただいておりまして、とても気に入ってます。

    一点だけ、どうしてもわからないことがありましたので、良かったら教えて下さい。
    ※ちなみに自分の使っているテーマもsimplicityです。

    記事にある手順通り設置したのですが、なぜか人気記事と直下のウィジットがぴったりくっついてしまい、下記のようにCSSに記述してもそこだけどうしてもスペースが空けられないのです・・・

    /* サイドバーウィジェットの余白を調整 */
    #sidebar .widget {
    margin-bottom: 50px;
    }

    カテゴリなど文字が入っているウィジットを直下に置くと表示が崩れてしまうため、バナー広告を直下に貼り今のところしのいでおります。

    この現象について何かおわかりであれば、教えて下さい。

    よろしくお願いいたします。

    • Reira Carreon より:

      れん さん

      なにかのコードが干渉してると思われ、対象箇所を右クリックから検証してみれば、すぐに解決できると思いますが
      簡単で行くなら
      ↑の書かれたコードに「!important」を付けて

      #sidebar .widget {
      margin-bottom: 50px !important;
      }

      としてはいかがでしょう。

      • れん より:

        Reira Carreon 様

        ご返信ありがとうございます。

        以下のように「!important」を付けてやってみたのですが、スペースは空けられませんでした^^;

        #sidebar .widget {
        margin-bottom: 50px !important;
        }

        やはり、なにか?のコードが干渉してるようです・・・

        対象箇所を右クリックから検証というのはやったことがないですが、そうゆう手もあるんですね。

        やり方をググって調べてやってみようと思います。

        ありがとうございました^^

コメントをどうぞ

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

トップへ戻る