-3,000人以上が購読している無料メルマガはこちら-

プラグイン

Newpost Catchのサムネイル画像を横並びにカスタマイズする方法

今回は新着記事を表示できるWordPressのプラグイン『Newpost Catch』についてご紹介しましょう。

NewPostCatch

この『Newpost Catch』を使用すれば、簡単に新着記事へのリンクを自動生成することができます。

しかし、デフォルトの表示ではちょっとダサいかな?っと思ってしまう部分が否めないので、サムネイル画像を横並びにカスタマイズする方法についてもご紹介しましょう。

目次

NewpostCatchで新着記事をサイドバーに表示する方法を動画で説明

『Newpost Catch』のインストール方法

まず『Newpost Catch』をインストールしていきましょう。

ダッシュボード画面から『プラグイン→新規追加』で検索窓で「Newpost Catch」と検索しましょう。

『今すぐインストール』をクリックしてインストールが完了したら、忘れずに『有効化』してくださいね!

NewPostCatch

『Newpost Catch』をウィジェット(サイドバー)に設置しよう

『Newpost Catch』は有効化するだけでは新着記事のリンクは表示されません。

新着記事のリンクをどこに設置するのかを選択できるのですが、今回はウィジェット(サイドバー)に設置する方法をご紹介しましょう。

ダッシュボード画面から『外観→ウィジェット』に移動してください。

そして「NewPost Catch」をドラッグしながら、入れたい順番にドロップしましょう。

NewPostCatch

そして次は表示設定をしていきましょう。

NewPostCatch

細かい設定にこだわらないのであれば、以下の4項目だけをいじればOKです。

  • タイトル→「最近の投稿」でOK
  • サムネイルの設定:幅→120px
  • サムネイルの設定:高さ→120px
  • 投稿件数→5件

こちらに設定して、忘れずに『保存』をクリックしましょうね。

この設定だと

NewPostCatch

こんな感じで表示されます。

もちろん自分好みに設定を調整してもらえればOKです。

Newpost Catchのサムネイル画像を横並びにカスタマイズする方法

『NewPost Catch』サムネイル画像付きの新着記事のリンクを簡単に作成してくれるのですが、デフォルトでは上にサムネイル画像+下にテキストが表示されています。

僕はどうもこの表示が好きではなくて、どうにか画像とテキストが横並びにならないかな?っと思ったんですよね(笑)

ということで、サムネイル画像を横並びにカスタマイズする方法をご紹介しますね。

イメージはこんな感じです。

NewPostCatch

しかし、この設定をするにはCSSをいじる必要があります。

【1】コードをコピーする

まずはCCSに貼り付ける用のコードをコピーをしてください。

以下のコードをコピーしてください↓↓

#npcatch{
margin:0px;
}

#npcatch li{
font-size:15px;
overflow:hidden;
clear:both;
margin:0px 0px 5px;
vertical-align:top;
}

#npcatch img{
/*サムネイルのスタイル*/
float:left;
padding:0px;
box-shadow:0px 0px 7px #bbb;
}

#npcatch .title{
/*記事タイトルのスタイル*/
width:170px;
float:right;
padding:0px;
}

コピーが完了したら、これをCSSに貼り付ける行程にいきます。

【2】外観→テーマの編集→CSS

先程コピーしたコードを、つぎにスタイルシートに貼り付けます。

WordPressのメニューから『外観→テーマの編集』に移動してください。
※今回のテンプレートは「賢威7」を利用しています。テンプレートによっては違うこともありますのでご了承ください。

『賢威7』の場合は、base.cssを選択します。

すると、初心者にはワケの分からない文字列が表示されると思いますが、とりあえず一番下までスライドしてください。

一番下までスライドしたら、空白の部分にさきほどコピーしたコードを貼り付けましょう!

貼付けが完了したら、『ファイル更新』をクリックしてくださいね。

そして次にダッシュボード画面から『外観→ウィジェット』に移動してください。

NewPostCatchを選択して、「プラグインフォルダ内のデフォルトCSS(チェックすると適用)」のチェックを外したら設定は完了です。

%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e5%a4%96%e3%81%99

あとがき

今回は新着記事のリンクをサムネイル画像付きで表示してくれるプラグイン『NewPost Catch』についてご紹介しました。

基本的には簡単な設定でOKなのですが、少しデフォルトの表示が気になるのであれば僕のオススメする設定を試していきましょう!

【今だけ0円】WEBを使って収入源を増やすノウハウを受け取る!

数年前まで田舎でくすぶっていたサラリーマンだった僕が、たった1つのブログを作ったことで人生が変わりました。

副業で始めたブログビジネスで、週1回だけ働いて月24万円の収入を得られるようになり、今ではストレスフリーな毎日を送れています。

  • 自宅やカフェで自由に働けるノマドライフに興味がある
  • 脱サラして、人間関係に疲れることない人生を叶えたい
  • ブログで収入を得るために何から始めていいか分からない…!
  • 帰りのチケットを取らなくても海外旅行に行ける生活に憧れる

 

開放感にあふれた人生を描くために初心者向けのブログ入門書を無料でプレゼントしています。

ゼロスタートの人にも「あ、ブログってこうやって稼げるんだ!」と反響をいただき、分かりやすい動画・文章でやさしく解説をしています。

僕のメルマガ登録者さん限定で、今だけ0円で配布をしていますがいつ値上げをするか分かりませんので、今のうちに無料プレゼントをお見逃しなく。

ボタンをクリックして、登録フォームに「名前」と「メールアドレス」を入力したら、すぐにプレゼントが手に入ります。