サイドバーの最新記事を画像付きで！Newpost catchの設定方法

ブログの滞在時間や直帰率を改善するためには、テキストリンクだけよりも

画像を使ったほうが目を引くことができ改善しやすくなります。

以前紹介した関連記事を画像付きで表示させる方法も同じような理由です。

⇒ Similar Postsをカスタマイズ！関連記事を画像付きで表示する方法

今回はサイドバーに表示させる最新記事を画像付きで表示させる方法を

紹介していきます。

Newpost catchをインストールと設定

サイドバーの最新記事を画像付きで表示させるためには『Newpost cacth』

というプラグインを使用しますので、このプラグインをインストールして

有効化させてください。

『Newpost cacth』の設定は非常に簡単です。

インストールして有効化しましたら【外観】⇒【ウィジェット】をクリックし、

表示させたい場所に【Newpost cacth】を移動させます。

【Newpost cacth】を表示させたい場所に移動させたら

・タイトル

・サムネイルのサイズ（画像のサイズ）

・投稿件数

これらに好きな数字を入力し、プラグインフォルダ内のデフォルトCSSに

チェックを付けたまま【保存】をクリックしてください。

以上でサイドバーの最新記事が画像付きで表示されているはずです。

次に、画像の右にテキストが表示されない場合の対処方法について

紹介していきます。

画像とテキストがずれてしまう場合

上記の画像のように画像サイズを大きくすると画像の右にテキストが

表示されずに、下、または少しずれて表示されることがあります。

画像とテキストがずれた場合の対処方法は

・設定したサムネイル（画像）サイズを小さくする

・『Newpost cacth』のStyle.cssで幅を調整する

Style.cssで横幅を調整する方法

Style.cssのコードを書き換えて横幅を調整する方法について

説明してきます。

以下のファイルをデスクトップ上に一度保存してください。

public_html/wp-content/plugins/newpost-catch/style.css

保存したStyle.cssのファイルを開くと２３行目あたりに下記の

コードがありますので、この部分の数字を変更します。

#npcatch .title{
	width:135px; /* テキストの横幅 */
	float:right;
	padding:5px 5px 5px 0px;
}

widthの数字を小さくすればウィジェットで設定した画像のサイズのまま

画像が左、テキストが右に表示されるようになります。

変更したら上書き保存し、もとのフォルダに上書きで戻しましょう。

終わりに

以上で『Newpost cacth』を使ったサイドバーの最新記事を画像付きで

表示させる方法の説明は終わりです。

滞在時間や直帰率を意識してブログ作りをすることで、トレンドブログなら

アドセンスのクリック率を上げることができますし、他の場合でも

何らかの反応を起こすことができるようになるでしょう。

そのためにもサイドバーの最新記事についてもぜひ試してみてください。

【プレゼント＆PASS】ブログメール講座

※Gmailなど普段使っているメールアドレスを入力してください。