カスタマイズ

名脇役!サイドバーに施したい5つのAFFINGER4カスタマイズ

投稿日:

AFFINGER4

今回はAFFINGER4のサイドバーカスタマイズに施したい5つのカスタマイズについてお話しましょう。

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の便利ツールを活用する

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

フリーボックス

[speech_bubble type="rtail" subtype="R1" icon="ひつじくん.jpg" name="ひつじくん"] フリーボックスを活用すると、簡単に綺麗なテキストを追加することができるんだよ![/speech_bubble]

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

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

フリーボックス

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

オリジナルボタン

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

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

オリジナルボタン

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

おすすめ記事一覧

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

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

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

サイドバー カスタマイズ

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

サイドバーの役割

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

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

この記事をシェアしませんか?

おすすめ記事一覧

cropped-cropped-cropped-af3-3.png 1
超優秀!AFFINGER4の注目すべき機能8つ&購入者特典3つ

AFFINGER4の特徴と機能 当サイトはAFFINGER4の見本サイトです。AFFINGER4にはどのようなサイトを作ることができるのかを視覚的に分かりやすく示すために作られたサイトですね。 なお「 ...

ランキング 2
猿でも出来る!AFFINGER4の「商品ランキング」作成方法

AFFINGER4の独自機能といえば「誰でも簡単に商品ランキングが作れること」ですよね! AFFINGER4ならHTML/CSSをほとんど知らなくてもちゃんとランキング作成ができるようになっています。 ...

-カスタマイズ

Copyright© AFFINGER4の見本サイト , 2018 AllRights Reserved Powered by AFFINGER4.