AFFINGER6で私のサイドバーのデザインを真似してみよう

ブログのトップページが作れました。次はサイドバーを作っていきましょう。

サイドバーにはプロフィール・人気記事・広告など色々設置することができますが初心者の方は何からやっていいか分からないはずです。

まずは僕のサイドバーを真似して作ってみましょう！

【AFFINGER6】サイドバーのカスタマイズ設定方法
まとめ

【AFFINGER6】サイドバーのカスタマイズ設定方法

サイドバーには下記４つがあると読者にとってどんなサイトか分かりやすいし、知りたい記事も探しやすいと思います。

検索フォーム
カテゴリー
プロフィール
人気記事

「外観」→「ウィジェット」でサイドバーを作る

「外観」→「ウィジェット」をクリックする。

右側にサイドバートップとサイドバーウィジェットが表示されています。

どちらでもサイドバーは作れますが私はサイドバートップで作っています。

①検索フォームを入れたい場合

左側にある「利用できるウィジェット」から右側にあるサイボートップ内に好きな項目をドラッグ＆ドロップするだけで追加できます。

検索フォームを入れたい場合は検索ボタン選びサイバートップ内にドラッグ＆ドロップして完了ボタンを押す。

たったこれだけでサイドバーに検索フォームができました。

同じようにしてプロフィールカードやカレンダー、カテゴリーなどを作る事ができます

サイドバーの項目の位置を変更したい場合はサイバートップ内でドラッグ＆ドロップして好きな位置に変更しましょう。

ドラッグ＆ドロップしなくても「検索ボタンをクリック」→「サイバートップ」→「ウィジェットを追加」でサイドバーの項目を追加できます。

ボックスメニューを作ってみる

文字だけのカテゴリーだと視覚的にどうしても分かりづらい時もあるでしょう。

ボックスメニューは画像付きのカテゴリーとなり文字だけより分かりやすいと思いませんか？

また記事内や記事下にこのボックスメニューを挿入することによって内部リンクの役割も果たします。

アイコン付きボックスを作る

「タグ」→「カスタムボタン」→「ボックスメニュー」→「基本（４列）」をクリック

下記のコードが出てきますのでここに列数・アイコンURL・メニュー名・リンク先URLを入力すれば完成です。

[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューA" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューB" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューC" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューD" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]

コードを上から順番に見ていきましょう。

青マーカーの所が列数のコードで、赤と黄色マーカーの所がボックスのコードです。つまり一番上に列数のコード、その下に４つのボックスのコードがあります。

・pc_show=""とは列数の事です。４列ならpc_show="4"となります。２列の場合はpc_show="2"でも２列になりますが空欄でも２列になるので空欄にしておきましょう。

・icon_image="" の中にアイコン画像URLを張り付けてください。画像URLは「メディア」→「ライブラリ」→「画像の選択」→「URL をクリップボードにコピー」でコピーできます。

・text=""にメニュー名を入力してください。

・url="" にリンク先のURLを入力してください。

[st-box-btn myclass="" pc_show="" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="https://dog-aru.com/wp-content/uploads/2021/12/thumbnail_money_kasoutsuuka.jpg" webicon="st-svg-wordpress" icon_size="" text="仮想通貨" subtext="" url="https://kabu-225-daytrade.com/" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューB" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューC" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューD" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]

これで下記のように一番左上のボックスが１つできました。同じように８つ作れば僕と同じようなボックスが作れます。

※icon_image="" の中にアイコン画像URLを張り付けても画像が出てこない時はテキストエディタに変更してからコードを張り付けてください。

まとめ

サイドバーには下記４つがあると読者にとってどんなサイトか分かりやすいし、知りたい記事も探しやすいと思います。

検索フォーム
カテゴリー
プロフィール
人気記事

「外観」→「ウィジェット」で簡単に作れるので色々といじってみてください。

ボックスメニューを作るのは少し手間がかかりますが、僕と同じように作れば難しくはありませんので順番にやっていきましょう。