ワードプレスでCocoonのテーマを利用している人は、デフォルトだとサイドバーの新着記事が文字だけで表示されていますよね。
![](https://i0.wp.com/nekolicense.com/wp-content/themes/cocoon-master/images/woman.png?w=1120&ssl=1)
サムネイル画像に変更できますか?
![ナナ](https://i0.wp.com/nekolicense.com/wp-content/uploads/2021/12/20211110_071019-1.jpg?w=1120&ssl=1)
表示方法は、ウィジェットでかんたんに変更できますよ。
新着記事と人気記事のサムネイル付きウィジェットを選ぶだけ
文字だけより、サムネイル画像付きで表示した方が、新着記事も人気記事も断然見やすくなります。
今回は、サイドバーに新着記事と人気記事を、サムネイル画像つきで表示する方法を紹介します。
- サイドバーの新着記事と人気記事をサムネイル画像で表示する方法
サイドバーに新着記事と人気記事のサムネイル画像を表示する方法【Cocoon】
![ナナ](https://i0.wp.com/nekolicense.com/wp-content/uploads/2021/12/20211110_071019-1.jpg?w=1120&ssl=1)
ウィジェットを選ぶときに、サムネイル付きを選びましょう。
- ウィジェットでサムネイル付きを選ぶ
- サムネイル画像の表示方法の設定
ウィジェットでサムネイル付きの新着記事と人気記事を選ぶ
まずは、ワードプレスのダッシュボードから、「外観」→「ウィジェット」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1642292893814.jpg?resize=617%2C668&ssl=1)
すると利用できるウィジェットが一覧で表示されるので、その中の「新着記事」をクリックします。
「新着記事」は、利用できるウィジェットをずっとスクロールしていけば、中間あたりで見つかります。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1642293135157.jpg?resize=593%2C511&ssl=1)
「新着記事」→「サイドバー」を選んで、「ウィジェットを追加」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1642293337306.jpg?resize=592%2C611&ssl=1)
すると、設定画面の右にあるサイドバーのウィジェットエリアに、「新着記事」が追加されました。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2021/12/sketch-1639201194624.png?resize=585%2C516&ssl=1)
![ナナ](https://i0.wp.com/nekolicense.com/wp-content/uploads/2021/12/20211110_071019-1.jpg?w=1120&ssl=1)
次は、お好みでサムネイル画像の表示方法を変更します。
サムネイル画像の表示方法を設定する
新着記事をクリックすると、細かい設定画面が表示されます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1642293650229.jpg?resize=574%2C728&ssl=1)
表示数や表示タイプは、お好みで設定します。
- 表示数は、記事の表示数
- 矢印表示は、画像の横に>がつきます
- タイトルを太字にしたい場合は、「タイトルを太字にする」にチェックを入れます
表示タイプの種類はどんなものがあるの?
表示タイプは、画像の横にタイトル名が表示されるのが、デフォルト、区切り線、囲み枠です。
大まかな違いは、記事に区切りや囲み枠があるかどうか。
![ナナ](https://i0.wp.com/nekolicense.com/wp-content/uploads/2021/12/20211110_071019-1.jpg?w=1120&ssl=1)
1つずつ違いを説明しますね。
デフォルトの場合
区切り線や枠がありません。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220116_094931.jpg?resize=615%2C684&ssl=1)
区切り線の場合
記事と記事の間に、区切り線があります。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220116_095011.jpg?resize=619%2C648&ssl=1)
囲み枠の場合
記事に囲み枠があります。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220116_095345.jpg?resize=650%2C705&ssl=1)
大きなサムネイルの場合
大きなサムネイルは、サムネイルの画像が大きく表示されます。
タイトル名は、画像の下です。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220116_100139.jpg?resize=659%2C924&ssl=1)
タイトルを重ねた大きなサムネイルの場合
大きなサムネイル画像に重なるように、タイトル名が表示されます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220116_100431.jpg?resize=656%2C782&ssl=1)
![ナナ](https://i0.wp.com/nekolicense.com/wp-content/uploads/2021/12/20211110_071019-1.jpg?w=1120&ssl=1)
人気記事も同様に、上記の方法で設定するとできますよ。
まとめ
今回は、ワードプレスのサイドバーに、新着記事と人気記事のサムネイル画像を表示する方法を紹介しました。
サムネイル画像があると、ブログがおしゃれになりますよね。
今回の記事を参考に、サムネイル画像を設定してみてください。