【AFFINGER】サイドバーにシンプルデザインのカードを配置する方法

• AFFINGERのサイドバーに記事のカードを配置したいときはどうすればいいの？
• 「ランキング管理」のデザインをもっとシンプルにしたいときは？

こんな疑問にお答えします。

当ブログではWPテーマに「AFFINGER」を採用しています。

AFFINGERでは「ランキング管理」機能を使ってサイドバーに記事を追加できますが、もっとシンプルなデザインにしたいと思ってカスタマイズしてみました。

この記事のとおりに設定いただくと、下画像のようになります。

AFFINGERのサイドバーにシンプルな記事カードを配置したい人は、ぜひ試してみてくださいね。

AFFINGERのサイドバー に記事カードを実装する手順

以下の４つの手順で実装可能です。

①「追加CSS」を編集する

まずはシンプルデザインにするためのCSSを追加します。

「カスタマイズ」→「追加CSS」をクリックし、以下コードをコピペしてください。

/*サイドバー にカード設置*/
.rankst-box {
    border: 2px solid #D4D4D4;/* ボーダーの色 */
    border-radius: 5px;
    padding: 0 20px 10px!important;
}

.rankh4 {
    margin: 1.5em 0!important;
    letter-spacing: 1px;
}

.rankst-contb p {
    font-size: 0.8em;
    color: #828282;
}

②「ランキング管理」のCSSを無効化する

続いて「ランキング管理」→「CSS」をクリックし、「ランキング管理用のCSS（デザイン）を使用しない」にチェックを入れて保存します。

これで先ほど追加したCSSの設定が適用されるようになりました。

③「ランキング管理」に内容を記入する

実際にサイドバーに表示したい内容を記入していきます。

管理画面の「ランキング管理」→「ランキング１位」をクリックし、タイトルと本文（画像やボタンなど）を入力し「保存」をクリックします。

④ウィジェット から追加する

最後はウィジェットに、「ランキング管理」の内容を追加します。

まず「外観」→「ウィジェット 」をクリック。

「サイドバーウィジェット」に「STINGERカスタムHTML」をドラッグ＆ドロップします。 

をそれぞれ入力します。

これで実際にページを確認すると、最初に紹介したようなデザインのカードが表示されていると思います。

AFFINGERの初期設定では３つまでしかランキング記事を設定できないため、３つ以上設置したいときは別途有料プラグインを購入する必要があります。

まとめ：AFFINGERのサイドバーにシンプルなカードデザインの記事を配置する方法

いかがでしたでしょうか？

見えやすいサイドバーにオススメしたい商品を表示しておけば、アフィリエイトにも効果的です。

もし実装で不明な点等ありましたら、コメント欄からご連絡いただければ可能な限り対応させていただきます。

本業の合間の対応となりますので、即時の返信は難しい点をご了承ください。

では今回もお読みいただきまして、ありがとうございました。