「Advanced Random Posts Widget」は記事をランダムに表示してくれる、WordPressのプラグインです。
当サイトでもPC版では使用しています。
しかし、そのままでは、デザインがシンプルすぎるのが難点です。
そこで、今回はAdvanced Random Posts Widgetをカスタマイズして、デザインを変える方法を紹介いたします。
初期状態
デザインをいじる前のは画像のようになっています。
シンプルに記事のタイトルだけが羅列していて、すこし寂しい印象です。
ここからデザインを変更していきましょう。
基本設定を変更する方法
ウィジェットから「Random Post」のところでデザインや基本設定を変更できます。
タイトルを変更する
“General” から”Title” を編集します。
表示する記事数を変更
Postの ”Number of posts to show“を変更します。
サムネイル画像の調整
Thumbnailのところを開きます。
Display Thumbnailにチェックを入れると、サムネイルが表示できます。
Thumbnail sizeでサムネイルの大きさが決まります。
デザインを変更する
先ほどのウィジェットの編集画面から、Custom CSSを編集することで、デザインを変更できます。
CSSがわかる方
/* １記事ごとのリストのデザイン*/
.arpw-li {
}
/* 記事のタイトル*/
.arpw-title {
}これを利用して{}内にCSSを書いて貼り付けてください。
CSSがわからない方 めんどくさい方
サンプルを作ってみました。コードをコピーしてウィジェットの「Random Post」の「Custom CSS」に貼り付けてください。
.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」のカスタマイズ方法を解説しました。
利用者にとって思わぬ記事に出会ってもらうチャンスになるので、是非カスタマイズして導入したいプラグインですね。
