「Advanced Random Posts Widget」は記事をランダムに表示してくれる、WordPressのプラグインです。
当サイトでもPC版では使用しています。
しかし、そのままでは、デザインがシンプルすぎるのが難点です。
そこで、今回はAdvanced Random Posts Widgetをカスタマイズして、デザインを変える方法を紹介いたします。
初期状態
![](https://indoortimes.net/wp-content/uploads/2023/05/スクリーンショット-2023-05-10-19.53.23.png)
デザインをいじる前のは画像のようになっています。
シンプルに記事のタイトルだけが羅列していて、すこし寂しい印象です。
ここからデザインを変更していきましょう。
基本設定を変更する方法
ウィジェットから「Random Post」のところでデザインや基本設定を変更できます。
タイトルを変更する
“General” から”Title” を編集します。
表示する記事数を変更
Postの ”Number of posts to show“を変更します。
サムネイル画像の調整
Thumbnailのところを開きます。
Display Thumbnailにチェックを入れると、サムネイルが表示できます。
Thumbnail sizeでサムネイルの大きさが決まります。
デザインを変更する
先ほどのウィジェットの編集画面から、Custom CSSを編集することで、デザインを変更できます。
CSSがわかる方
/* 1記事ごとのリストのデザイン*/
.arpw-li {
}
/* 記事のタイトル*/
.arpw-title {
}
これを利用して{}内にCSSを書いて貼り付けてください。
CSSがわからない方 めんどくさい方
サンプルを作ってみました。コードをコピーしてウィジェットの「Random Post」の「Custom CSS」に貼り付けてください。
![](https://indoortimes.net/wp-content/uploads/2023/05/スクリーンショット-2023-05-10-20.42.09.png)
.arpw-li {
padding: 0.5em 1em;
margin: 2em 0;
background: #fff; /*背景色*/
border-top: solid 6px #000; /*ボーダーの色*/
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32); /*影*/
}
.arpw-title {
color: black; /*記事タイトルの文字色*/
}
赤文字の部分の色を変えることで、対応した色にできます。
色の指定方法は「カラーコード」などで検索してください。
まとめ
今回は、記事をランダムに表示してくれる、WordPressのプラグイン「Advanced Random Posts Widget」のカスタマイズ方法を解説しました。
利用者にとって思わぬ記事に出会ってもらうチャンスになるので、是非カスタマイズして導入したいプラグインですね。