Widget検索サイトからのユーザーが目的の記事を読んだ後、他の記事も読んでくれたら嬉しいですよね。いう考えで「最近の投稿」をサイドバーに掲載している方は多いと思います。ここで自分のブログについて考えてみてください。検索サイトから来てくれた方が必要としている記事が「最近の投稿」にしっかりと並んでいると思いますか?テーマをひとつに絞って書かれてるブログの場合は問題ないと思います。雑多な内容になってしまっているブログの場合は、アクセスしてくれた方が求める記事へのリンクを的確に提供できているとは言えないのではないでしょうか。実はこのブログもそうなんです。ついての記事も書くようになりました。そのため記事の内容に幅ができてしまったのです。情報を求めてブログを訪ねて来てくれた方が、まったく関係のない開発情報の記事を読んでも面白くないと思いますので、新着記事の表示もカテゴリー別に分けることにしました。この記事では、コードをコピーして貼り付けるだけで、当ブログと同じ新着記事を表示できる方法を解説しています。この記事の解説に従って設定すると、トップページではブログ全体の新着記事が表示され、個別の記事ページではその記事が所属しているカテゴリーの新着記事が表示されるようになります。知識がある方は、自分でデザインをカスタマイズすることも可能です。この記事では、カスタマイズ方法についても解説していきますので、ぜひ参考にしながらチャレンジしてみてください。この記事は以下の記事の続きになります。必要なプラグインのインストールなどを済ませてから、こちらの記事を読んで下さい。表示の設定を行います。インストールが済んでいると、新着記事というウィジェットが追加されています。新着記事をサイドバーに表示する左側に新着記事と書かれた部分がありますので、それをドラッグ&ドロップで、右側のブログサイドバーに移動させてみましょう。ブログサイドバーに表示されたら、新着記事の欄をクリック(タップ)して開いてください。最新記事と入力してください。ブログトップページに表示される新着記事のタイトルです。なんでも構いませんので、好きなタイトルをご自分で考えてください。「{category}」の最新記事と入力してください。個別の記事ページや、カテゴリーページなど、トップページ以外で表示される新着記事のタイトルです。こちらも好きなタイトルを考えてください。入れると、表示している新着記事のカテゴリー名がタイトル部分に表示されます。半角で入力してください。カテゴリーの設定によって適切な値が変わってきます。入力して納得の行く表示になる数字を見つけてください。カテゴリーの深さについて開発者の方が解説してくれていますので、こちらの記事を参考にしてください。新着記事の表示件数を設定します。記事一覧の前後:最初のフォーム(左側)に以下のコードをコピーして貼り付けてください。記事フォーマット:以下のコードをコピーして貼り付けてください。新着記事の一覧にはサムネイル画像が表示されますが、各記事にアイキャッチ画像が設定されていない場合、ここで設定した画像が代わりに表示されます。新着記事に表示されるサムネイル画像のサイズを指定します。チェックしてください。ブラウザに表示しているページは新着記事の一覧に表示されなくなります。チェックを外してください。新着記事の一覧をトップページに表示したくない場合はチェックしてください。チェックを外してください。新規追加ボタンを押して、画像をアップロードしましょう。サイズの画像を推奨します。スマートフォンやタブレットでは倍のサイズをアップロードして、半分のサイズで表示すると綺麗に表示されます。取得するアップロードした画像をクリック(タップ)すると、画像の表示になると思います。書かれたフォームの中身をコピーしましょう。ウィジェットの設定を保存するすべての設定が終わりましたら、右下にある保存ボタンを押してください。これで新着記事のウィジェットの設定は終わりです。スタイルシートを適用するこのままでも新着記事は表示されますが、まだスタイルシートが適用されていませんのでデザインは整っていません。クリック(タップ)してください。スタイルシートを追加するページに移動します。囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。公開ボタンを押しましょう。新着記事にスタイルシートが適用されます。新着記事の完成!解説どおりに設定を行い、アイキャッチ画像が各記事に設定されていると、新着記事はこのように表示されます。使っている場合の表示です。他のテーマではサイドバーの横幅が狭かったりしますので、このままの設定では表示がおかしくなることがあります。場合サイドバーのサイズが狭いため、サムネイル画像と文字のバランスが悪くなってしまっています。戻り、サムネイルのサイズを調整します。変更して保存してください。スタイルシートも編集します。アクセスし、さきほど入力したスタイルシートを編集します。編集して更新してください。これで新着記事に表示されるアイキャッチ画像のサイズが小さくなります。完成!アイキャッチ画像が小さくなり、文字とのバランスが良くなりました。上記で解説した部分を編集して、使用しているテーマに合ったデザインに変更してください。コードや、追加したスタイルシートをまるごと置き換えることで、完全にオリジナルのデザインに変更することも可能です。最後にカテゴリー別に新着記事を表示することで、関連の深い記事を読者に紹介することができますので、より魅力的なブログに感じてもらえるのではないでしょうか。人気記事ランキングと一緒に設定してみてください。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト日本語が含まれない投稿は無視されますのでご注意ください。