*

WordPress popular postsの表示を変更する巻

公開日: : 最終更新日:2012/11/05 WEB

WordPress popular postsの表示を変更しました

WordPress popular postsは人気記事を自動で表示してくれる便利なプラグインです
が、そのまま使うと表示の仕方がイマイチ
リスト構造なので「・」ドットが表示されてしまうし、写真と文字の構成がバラバラ

今回、2点修正しました
1)ドットを外す
2)文字を写真の右側に回しこむ

【修正前】

【修正後】

CSSのソースはこちら↓

/* =Widget Areas
-------------------------------------------------------------- */
#main .popular-posts ul {
	list-style: none;
	margin-left: 0;
}
#main .popular-posts li {
	padding-bottom: 0.5em;
}
#main .popular-posts img {
         float: left;
         margin-right: 1em;
}
#main .floatclear {
         clear: both;
      }

1)のドットを外すについては、popular-postsのulをlist-style: none;にしてしまえばOK
2)の文をまわしこむのは2点修正必要
CSSの修正は上記の通り
もう、1点はpopular postsのWidgetのHTML出力設定を修正
「Before/After each post:」の「

  • 」を「
  • 」に変更
    こちら↓

  • 」にすることで、回り込みの解除を行います

    CSSによる文の回り込み設定はこちらを参考にしました
    【参考】
    画像の回り込みを行う

  • PC

    関連記事

    WordPressの子テーマを作る巻

    WORDPRESSの子テーマを作ります 子テーマを作る理由 WORDPRESSのバー

    記事を読む

    人気記事が更新されないと思ったら、WordPress Popular Postsのリセットが必要だった

    人気記事が更新されないなあ、と思っていたら、そのモジュールのリセットが必要でした 別ブ

    記事を読む

    手軽に出来る! WORDPRESSに最近の投稿を写真付きにする巻 special recent posts

    手軽に写真付きの最近の投稿ができます WORDPRESSで標準の最近の投稿はテキストの

    記事を読む

    WordPressのLightBoxが、おかしくなったので直してみたの巻

    どうも一時期、プラグインのアップデートでプラグイン同士の齟齬が発生したようです ちょっ

    記事を読む

    早っ!重複するメタデータ(descriptions)の問題を解消!

    昨日、発見した重複するメタデータ(descriptions)の問題 対策して、一日経って見

    記事を読む

    アクセス急落したけど、復帰したの巻

    実は先週、アクセスが1週間ほど、急落していました 原因は不明 Googleのパンダ、ペン

    記事を読む

    Yahoo JapanディベロッパーネットワークのアプリケーションIDを簡単に取得してみる

    プロジェクトJでYahoo JapanのディベロッパーネットワークのアプリケーションIDを取る必要が

    記事を読む

    重複するメタデータとタイトルタグの重複が改善!だけどアクセス数は改善せず

    やっと改善が始まりました 長かった ウェブマスターツールのHTML改善の値、やっと低

    記事を読む

    WordPressのスマホ画面にGoogleAdsenseを表示するには

    WPtouchというプラグインを使うとWordPressで簡単にスマホ画面にレイアウト崩れな

    記事を読む

    アクセス数急降下中! ウェブマスターツールのURLパラメータで対処してみるの巻き

    ちょっとURLパラメータを試してみます サイトのアクセス数が急降下中 135→86→

    記事を読む

    PC

    PC

    PAGE TOP ↑