AFFINGER5

★ 【AFFINGER5】サイドバーにボックスメニューを利用する!リンクアイコンを綺麗に並べます。





WordPress の優良テーマ「AFFINGER5」には「ボックスメニュー」という、アイコンを並べて表示できる機能があり、サイドバーに並べると見目麗しい(笑)サイドバーができますので、その方法を解説します。



AFFINGER5 ご購入はこちら



サイドバーにボックスメニューを表示したイメージ



サイドバーにアイコン(リンク)を並べます。


ボックスメニューを作る方法


ボックスメニューを作ります。


step
1
サイドメニューにボックスメニューのコードを作成する


ボックスメニューのコードです。


[st-box-btn myclass="" pc_show="" margin="0 0 20px 0" type=""]

 

[st-box-btn-list icon_image="https://xxxxxxxxx/xxxxxxxxx/xxx.jpg" fontawesome="fa-wordpress" icon_size="" text="HOME" subtext="" url="https://irojiroharaguro.com/" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"][st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]

 

[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューB" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]

 

[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューC" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]

 

[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューD" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]

 

[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューE" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]

 

[st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューF" subtext="サブテキスト" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]

 

[/st-box-btn]


このコードに必要事項を埋め込んでいきます。


step
2
イメージ、テキスト、URLを設定する


必要事項を埋め込みます。


icon_imageアイコンイメージへの URL を貼り付けます
textメニュー名
urlリンク先ん URL を貼り付けます

このコードを1セットとして、6セット作成して差し替えます。


テクニック

アイコンサイズを変えたい場合は、[icon_size] でサイズ(縮尺=○○%)を指定します


step
3
サイドメニューにセットする



WordPress の管理画面から、[外観] → [ウィジェット] を選択します。

サイドバーに [テキスト] ウィジェットを配置して、コード全文を埋め込みます。


公開して完成です!


イメージの URL の確認方法



[メディアライブラリ] から対象の画像を選択し、「リンクをコピー」欄で URL を取得します。


まとめ


サイドバーにボックスメニューを作る方法です。


  • ボックスメニューのコードに、アイコンの URL、テキスト、リンク先 URL を埋め込みます
  • サイドバーウィジェットにテキストウィジェットを追加し、コードを貼り付けます


Enjoy!サイドバーもサイトも楽しくつくろうサイサイト!








Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ