AFFINGER

AFFINGER5のサイドバーカスタマイズ方法【写真付きで解説】

眠そうにあくびするライオンの図

悩む学生
AFFINGER5を使っているんだけど、横の部分をどうやってカスタマイズしたらいいのか分からない。さくっと有名なブロガーさんっぽいデザインにしたいです。

 

今回はこんな悩みを解決します。

 

AFFINGER5はカスタマイズできるところが多すぎて、どこをいじればいいのか悩みますよね。

 

ですが、サイドバーに関して説明している記事が意外に少なく初心者の人は苦労すると思います。

 

今回はそんなあなたに向けて、さくっと有名なブロガーさんと同じようなデザインにする方法を紹介します。

 

本記事を読めば、こんな感じで簡単に有名なブロガーさんと同じようなデザインができて、モチベーションも上がりますよ。

サイドバーの完成版

 

ぜひ最後まで見てくださいね。
リットン

AFFINGER5のサイドバーをカスタマイズをしよう

 

結論から言うと、外観ウィジェットサイドバーウィジェットと進み写真のようにするだけです。

サイドバーウィジェットの設定

 

理解できた人はこれでOK。AFFINGER5を使った有名なブロガーさんのサイドバーのデザインもこんな感じなので。

 

でもまだまだ詳しく教えてほしいという人は続きもどうぞ。

 

AFFINGER5のサイドバー設定プロフィールの設定をしよう

 

まずはプロフィールから設置しましょう。

 

ウィジェットに追加する

 

 

11_STINGERサイト管理者紹介を右側の利用できるウィジェットから追加してサイドバーウィジェットに持っていけばOKです。

 

もし、当ブログのようなプロフィールカードになってない場合は、外観オプションカラーサイト管理者紹介プロフィールカードに変更にチェックしましょう。

 

AFFINGER5のサイドバー設定アーカイブの設定をしよう

次にアーカイブも同様にサイドバーウィジェットのところへ持ってきます。

 

アーカイブの設定には「ドロップダウンで表示」と「投稿数を表示」の2つがありますが、悩んだら両方表示すればOKです

 

理由はシンプルで、多くのブロガーさんがそうしているから。

 


それぞれもう1つ理由を挙げるとすれば、ドロップダウンで表示にしないと、仮にあなたが何年もブログ運営を続けたときにアーカイブがずらっと長く表示されてしまうからです。

5か月目のぼくでもこんだけ長くなるのでおすすめしません。

アーカイブが長い図

 

投稿数の表示は単に記事数が目に見えるので、「この月は少なかったな」とか「この月は頑張ったなとか」分かりやすいからです。

 

AFFINGER5のサイドバー設定サイドバーメニューの設定をしよう

 

サイドバーメニューの設定は少し複雑。

 

まずはサイドバーに表示させるメニューから作る必要があります。サイドバーに表示させるメニューの作り方は大まかに以下の手順です。

 

サイドバーメニューの設定準備

  1. 外観→メニューにいく
  2. 新しいメニューの作成
  3. 表示させたいカテゴリーを選択して保存

 

まずは外観メニューへいき、新しいメニューの作成をクリック。

 

メニューへの新規作成

 

メニュー名は任意ですが、ここでは分かりやすくサイドバー用メニューとしておきましょう。

 

メニューの位置はサイド用メニューにのみにチェックしてください。

 

次にカテゴリーのところから表示させたいものを選んで、右側のメニュー構造のところでお好きな順番に並び替えましょう。

 

メニュー構造の設定

 

最後に保存を押して終了です。

 

完了すればウィジェットに戻り、STINGERサイドバーメニューを先ほどと同じくサイドバーウィジェットに追加してください。

 

あとはこのサイドバーメニューをおしゃれにカスタマイズしていきます。

 

外観カスタマイズメニューのカラー設定サイドメニューウィジェットへ進んでください。

 

メニューのカスタマイズ

 

背景や文字色に関しては自分で手を動かしつつ確認してください。

 

階層のWebアイコンはこの部分のことです。

 

webアイコンの説明

 

参考までに言うと、このブログでは第一階層を3番、第二階層を2番の矢印にしています。

 

ほかの背景画像や余白の部分に関してはデフォルトのままでOKです。

 

AFFINGER5のサイドバー設定設定おすすめ記事を設定しよう

 

最後におすすめ記事の設定をおこないます。

 

AFFINGER5管理おすすめ記事一覧へ進んでください。

 

おすすめ記事の設定画面

 

  • おすすめ記事一覧に表示する文字→お好きにしてください。ただ、「よく読まれている記事」にしている人が多いです。
  • 任意の人気記事を指定→表示させたい記事のIDをコンマで繋げて打ち込んでください。

 

位置はサイドのスクロールに表示するにのみチェックしておけばOKです。

 

サイドバーの設定はこれにて完了です。お疲れさまでした。

 

AFFINGER5でサイドバーをおしゃれにしてモチベを上げよう

今回はAFFINGER5のサイドバーのカスタマイズについて一から説明しました。

 

AFFINGER5はカスタマイズできるところが多すぎて、初めのうちは心が折れそうになることもあるはずです。

 

たしかにカスタマイズ性がAFFINGER5のよさと分かっていても、初心者にはなかなか難しくてデザインをほったらかしにしたくなる気持ちもわかります。

 

しかし、稼げるブロガーさんは細かいところにもこだわっていることが多いです。

 

「神は細部に宿る」ということで、頑張ってブログをおしゃれにしていきましょう(^^)/

 

今回は以上です。ありがとうございました。

 

関連記事アフィンガー5でマル付き・番号付きリストを作成&カスタマイズする方法

関連記事【AFFNGER5のレビュー】メリットとデメリットを使用者が解説

-AFFINGER

Copyright © Lytton Blog