【AFFINGER4】サイドバーに絶対施したいカスタマイズ5選

おおかみくん

AFFINGER4のサイドバー今ぜんぜん綺麗じゃないんだけど、これなんとかならない？

ひつじくん

デフォルトだと正直微妙だよね〜。これもカスタマイズして行こうか！

AFFINGER4のサイドバーはデフォルトのままではあまりに簡素すぎる状態です。これをカッコイイ見た目に変えていくには、ある程度HTML/CSSを使ってカスタマイズしていく必要がありますね。

ではどうやってカスタマイズしていけば良いのか、すべてまとめさせていただこうかと思います。完成イメージはこちらで確認できます。

CSSで見た目をカスタマイズ

ひつじくん

まずはウィジェットを見やすくしていこうか！

AFFINGER4のウィジェットはデフォルトのままだと背景に溶け込んでしまい、よく分からない状態になってしまいます。

そこで、CSSを使ってウィジェットを目立たせるようにカスタマイズをしてみましょう。今回はウィジェットエリアに白の背景を適応させて目立たせるような工夫を導入してみます。

以下のコードをコピペすれば、AFFINGER4の各ウィジェットに白い背景を適応させることができますよ！

.textwidget,.tagcloud,#searchform,#topnews-box{
background-color: #fff;/*背景を白く*/
padding: 10px;/*余白*/
border-radius: 3px;/*角を丸くする*/
}

新着記事一覧のカスタマイズ

ひつじくん

次に新着記事一覧もカスタマイズしておこうか

初期設定の状態では、新着記事一覧が少し目立たない状態にあります。そこで新着記事一覧に見出し&背景をつけて目立たせるためのCSSカスタマイズをしましょう。

以下のコードをスタイルシートの好きなところに追加してもらえればオッケーです！

#side aside h4 {
background-color: #fff;
padding: 10px;
margin-bottom: 1px;
border-radius: 3px 3px 0px 0px;
border-left: 15px solid #c50a0a;
}

aside .kanren {
background-color: #fff;
border-radius: 0px 0px 3px 3px;}

AFFINGER4の便利ツールを活用する

フリーボックスを活用する

ひつじくん

フリーボックスを活用すると、簡単に綺麗なテキストを追加することができるんだよ！

AFFINGER4にはフリーボックスという便利なツールが用意されています。

管理画面の「カスタマイズ」<「ウィジェット」<「サイドバートップ」と移動すると、「ウィジェットを追加」というボタンが見つかります。ここから「フリーボックス」が追加できます。

オリジナルボタンを活用する

AFFINGER4ではウィジェットから「オリジナルボタン」を簡単に追加することができます。

ボタンに載せるテキストとロゴを選択することができ、幅広いカスタマイズができるので是非利用するようにしてくださいね！

おすすめ記事一覧を表示させる

AFFINGER4ではおすすめ記事一覧を簡単に表示させることができます。これができるとユーザーが迷うことも少なくなるので便利ですねぇ〜！

ダッシュボードからAFFINGER管理を開くと、「おすすめ記事一覧の作成」という項目が見つかるはずなので、ここでおすすめ記事をサイドバーに表示させるように設定しましょう。

記事の指定には記事IDが必要です。記事IDの確認方法に関しましてはこちらのサイトを参考にするようにしてください。

サイドバーカスタマイズまとめ

AFFINGER4のサイドバーカスタマイズのまとめでした。これでかなり見た目は変わったのではないでしょうか？

おおかみくん

おお！！最初とはぜんぜん違うぞ！

サイドバーはサイトの使いやすさ/売上に大きく影響を与える部分なので、綺麗で使いやすいようにカスタマイズをしておきましょうね。使いやすいサイドバーに仕上げておけばユーザーはちゃんとみてくれますし、売上も大きく伸びてくるはずですよ！

X