WordPress

サムネイル付きで最近の記事を表示できるWordPressプラグイン「Newpost Catch」

Newpost Catch08 WordPressにはデフォルトで最近の投稿をまとめて表示できるサイドバーのウィジェットがあります。ですが、これはテキスト表示のみでサムネイルを表示してくれません。テーマによって違うかもしれませんが。 テキストだけではなくサムネイルも一緒に表示したほうが、読者の目にも止まりやすいと思います。かといって自力でHTMLとかいじるのはメンドーです。 そこでプラグインでさくっと「サムネイル付き最新記事一覧」を表示させたい! そんなときに使えるWordPressプラグインが「Newpost Catch」です。

インストール

  1. プラグイン項目「新規追加」を選択
  2. Newpost Catch01
  3. プラグインの検索
  4. 「Newpost Catch」で検索します。 Newpost Catch02
  5. インストール
  6. 検索を実行すると見つかります。 「いますぐインストール」しましょう。 Newpost Catch03
  7. プラグインを有効化
  8. インストールが完了したら「プラグインを有効化」しましょう。 Newpost Catch05

設定

  1. ウィジェットを追加
  2. 外観項目のウィジェットに「Newpost Catch」が追加されています。 これを使いましょう。 Newpost Catch06
  3. ウィジェットの設定
  4. 設定項目はたったのこれだけ。 カンタンでいいですね♪ せっかくだから「いいね!」しておきましょうか。 設定したら「保存」をお忘れなく。 Newpost Catch07
  5. CSSをいじる
  6. 設定するだけでもそれっぽく表示されますが、デザインを他と統一したいのであればプラグインのCSSを直接書き換えましょう。 サーバーのWrodPressフォルダの以下にあるCSSをいじります。 「plugins > newpost-catch > style.css」 デフォルトでは以下のような設定になってます。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    
    #npcatch li{
        overflow:hidden;
        clear:both;
        margin:0px 0px 0px;
    }
     
    #npcatch img{
        float:left;
        padding:5px 10px;
    }
     
    #npcatch .title{
        width:135px;
        float:left;
        padding:5px 5px 5px 0px;
    }
     
    #npcatch li:hover{
    }
     
    #npcatch li:hover .title{
    }
     
    #npcatch li:hover .title a{
    }
     
    #npcatch li:hover .date{
    }
    もしも自分でCSSファイルを一つのファイルで管理しているのであれば、ここの設定をコメントアウトしてしまえばOK。
これだけカンタンに設定できるなんて助かりますね♪

関連記事

  1. 楽々のはずだった「Duplicator」がうまくいかなかった話

    WordPress

    楽々のはずだった「Duplicator」がうまくいかなかった話

    WordPressのブログ移行ってかなり面倒臭いんですよねー。ですが「…

  2. WordPressの基本的な設定項目をおさらい3「表示設定」篇

    WordPress

    WordPressの基本的な設定項目をおさらい3「表示設定」篇

    WordPressの設定項目のおさらい。こういうのはすぐに忘れてしまう…

  3. 3段組

    WordPress

    3段組の準備完了

    3段組にするにはまず2つの段を1つの段として扱えるようにグループ化する…

  4. 2段組

    WordPress

    個別ページだけ2段組にしてみた。

    それほど意味はないんだけど、こういうこともできる、ということで。どう…

  5. テーマを新しくしてみた

    WordPress

    ブログのテーマを新しくしてみた♪

    年が変わったので、思いきって今まで使っていたテーマをやめて新しくしまし…

  6. 関連記事

    WordPress

    関連記事のCSSデザインをちょっと更新

    以下を使って、リスト部分のマークを削除して、左揃えにしました。l…

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 懐かしい!!カードダスSD戦国伝!!
  6. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  7. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  8. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  9. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  10. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」

アーカイブ

  1. design_tide_tokyo_2012-1.jpg

    イベント

    「DESIGN TIDE TOKYO 2012」でデザインのコンセプトを楽しんで…
  2. 「第29回 新日本写真全国公募」入選!

    写真

    「第29回 新日本写真全国公募」入選!
  3. PASUMO派だけど「東京駅開業100周年記念Suica」を申し込んでみた

    プロダクト

    PASMO派だけど「東京駅開業100周年記念Suica」を申し込んでみた
  4. muji_holder-2.jpg

    無印良品

    【無印良品】ポイントカード整理用のシンプルなカードホルダー
  5. Apple Musicを使ってみた。リコメンドがいいね♪

    Apple

    Apple Musicを使ってみた。リコメンドがいいね♪
PAGE TOP