AFFINGER4

おおかみくん
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のサイドバーカスタマイズのまとめでした。これでかなり見た目は変わったのではないでしょうか?

おおかみくん
おお!!最初とはぜんぜん違うぞ!

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

この記事が気に入ったら
いいね ! しよう

Twitter で