サイドバー

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

広告:ページ内にてアフィリエイト広告を利用しています。

ボックスメニューをサイドバーに設置

WordPress の優良テーマ「AFFINGER」には、アイコンを並べて表示できる「ボックスメニュー」機能があります。

ポイント

本記事では、

サイドバーに並べる「ボックスメニュー」の方法を解説します。

つかいやすいお手軽ショートカットリンクとして使えます。

おすすめ副業

\AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください/

PR

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

ボックスメニューのサンプル

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

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

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

■ 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://boonboonblog.com/" 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 を取得します。

AFFINGER もっと!お役立ちテクニック

AFFINGER のお役立ちテクニックはこちら

PR

まとめ

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

ポイント

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

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

おしゃれサイト
ノートパソコン

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

アフィリエイトを戦うなら「AFFINGER」

「Affingerタグ管理マネージャー4とPVモニター2のセット」では、

コードの管理、クリック数の計測など、アフィリエイトに役立つ解析機能が付いています。

「Affingerタグ管理マネージャー4とPVモニター2のセット」のご利用も是非ご検討ください。

PR
AFFINGER TAG MANAGER
PR
AFFINGER TAG MANAGER
  • サイト全体と記事ごとのアクセス推移
  • ユーザーの導線の確認
  • 人気記事の把握
  • アクセス元の把握
  • リンクや広告の効果測定(表示回数 / クリック数)
  • クリックされた記事の把握
PR

\気になったら、とりあえず見てみよう/

詳しく見る

WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック!

PR
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

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

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記