WordPress popular posts でサムネイルとタイトルを並べる

カテゴリー : WordPress

投 稿 日 :

更 新 日 :

この記事は書いてから 約6年 経過しています。

※1年以上経過しているので情報が古い可能性があります。

タ  グ  : | | | |

WordPress popular posts でサムネイルとタイトルを並べる
追記(2013年3月9日)
↓ 新しくこちらも書きましたので併せてお読みください。
WordPress Popular Posts と Recent Posts Plus を同じ表示で揃える

プラグイン WordPress popular postsサムネイルとタイトルを綺麗に並べるのに苦労しました。

まぁ、私がノンプログラマーでcssとかはGoogleで調べてやっているから基礎が出来てないだけなんですけど。

ですから「これが最良の方法」ということではないと思いますが、もしかしたら誰かの役にたつかもと思って記事に。

以前に紹介したプラグイン Newpost Catch で最近の記事をサイドバーに表示していて、それと同じように表示したかったのですが、私の知識では上手くいかず悪戦苦闘。

で、↓ やっとこんな感じに

WordPress popular posts 1

まず WordPress popular posts の設定です。

WordPress popular posts 2

Shorten title to のタイトル文字数を制限し、Thumbnail は Newpost Catch と同じ大きさに設定。

HTML Markup settings で ↓ のようにします。

WordPress popular post 3

Before Popular Posts の部分が長くて表示されていませんが

です。

あとはcssに ↓ こんな感じで。

wpp-post-title ってのは WordPress popular posts でデフォルトでタイトルの前に

ってのが吐出されてたんで、それを利用(?)してcssでイジってみました。

この方法が正しいのかは疑問ですが、とりあえずIEでは希望の通りに表示されてるんでOKってことに。

WordPress popular posts

WordPress popular posts でサムネイルとタイトルを並べる」への8件のフィードバック

  1. ピンバック: Wordpress Growing up » WordPress popular postsでの設定を若干変更

  2. まんじゅうどり

    とてもためになりました!
    ありがとうございます

  3. 管理人 投稿作成者

    >まんじゅうどり さん

    コメント有難うございます!励みになります!

  4. 松本 茂樹

    こんにちは。
    参考にさせていただきました。
    ありがとうございます!

    まだ初心者なので、上記説明の「あとはcssに ↓ こんな感じで。」の所からが
    よくわかっていません。CSSはどこにあるのでしょうか?
    WPのどこを開いて、どこに何を書きこんだらいいのかが、わかりません。

    お手数ですが、ご教示いただけたら大変助かります。

    初歩的なことで、申し訳ありません。

  5. くーた 投稿作成者

    >松本 さん

    コメントありがとうございます!
    css とは

    管理画面の 外観 → テーマ編集 で スタイルシート(style.css) の部分です。

    そこには自分が選んだテーマの css があります。

    そこのファイルに追加します。

    イジる時は元の css は念の為コピーしときましょうね。

    こんな説明でお分かりになりますか?

    イマイチ分からん!って場合はまたコメントくださいねー

    初めてなら分からなくて当然ですから。

  6. 松本 茂樹

    くーたさん

    メッセージありがとうございます。

    すみません、まだわかってないのですが、
    スタイルCSSのどこ(何行目)に書き込むのでしょうか?
    スタイルCSSが長すぎるので・・

    また、書き込む内容は、上記の「あとはcssに ↓ こんな感じで。」の
    下の「1~20」をすべて書き込んだらよいのでしょうか?

    コピーして貼り付けでよいのでしょうか?

    すみません、まったくピンときていなくて・・

    お手数ですが、宜しくお願いします。

  7. くーた 投稿作成者

    松本さん

    こんばんは!

    挿入する場所は css のどこでも OK です。
    最下部で良いと思います。

    あとは 1~20 を全てコピーして貼り付けて下さい。

    ソースコードにマウスを乗せると右上に「クリップボードにコピー」って出ます。
    それ使うと楽ですね。

  8. ピンバック: ugg boots g┨nstige

コメントを残す

メールアドレスが公開されることはありません。

*