【AFFINGER6】簡単なボックスメニューの使い方と設定方法

こんにちはおとちゃんです!
よくサイトで見かける「ボックスメニュー」ってどうやって作るの?

 

 

これの作り方の解説をします。

画像のボックスメニュー

画像のボックスメニュー

WEBアイコンのボックスメニュー

WEBアイコンのボックスメニュー

 

 

この記事で紹介していること

  • ボックスメニューの種類と設定
  • 画像とWEBアイコンでのメニューの作り方
  • おすすめの素材とカラーコードサイト
  • サイドバーの設定方法

 


現役パソコンインストラクターです。AFFINGER6でブログやっています。使いやすく見た目もおしゃれな「ボックスメニュー」をわかりやすく解説しているので参考にしてみてください!

 

ボックスメニューの種類と設定

ボックスメニューの作成にはを使用します。
ショートコードはAFFINGERなら記事内の「タグ」より簡単に確認ができます。

ボックスメニューの設定1

 

 

ボックスメニューの種類

ボックスメニューの出し方と種類を確認します。
記事内で使いたい場合はこのまま好きなデザインで作成ができます。

サイドバーに設定する場合は1番目の「基本(4列)」を選びましょう。

タグ ⇒ カスタムボタン ⇒ ボックスメニュー
※デザインはプレビュー画面で確認しましょう。

基本(4列)

ボックスメニューの種類1

サブアリ(4列)

ボックスメニューの種類2

縦並びタイプ

ボックスメニューの種類3

縦並びタイプ(サブアリ)

ボックスメニューの種類4

縦並びタイプ(単品)

ボックスメニューの種類5

 

次はボックスメニューの設定について解説していきます。

 

 

ボックスメニューのショートコード

次はボックスメニューのショートコードの意味と設定を説明します。

[st-box-btn myclass="任意のCSSクラス" pc_show="PC閲覧の列数" margin="マージン(余白)" type="デザインタイプ"]
[st-box-btn-list icon_image="設定したい画像のURL" webicon="設定したいWEBアイコンコード" icon_size="アイコンのサイズ" text="メニュー名" subtext="サブタイトル" url="クリック時のリンク先" target="クリック時の動作" rel="リンクとの関連性" bgcolor="背景色" color="文字の色" fontsize="文字のサイズ" fontweight="文字の太さ"]
[/st-box-btn]

それぞれのコードと意味のまとめ

ショートコード意味
myclass任意のCSSクラスを追加。
pc_showPC閲覧時の列数。PC(960px以上)で閲覧時の列数を指定。「3」or「4」が指定可能で空白の場合は2列になります。1列にしたい場合はtype属性で設定。
marginマージン(余白)の設定。上から時計回りに余白を指定します。例:【1 2 3px 4】の場合は【上:1、右:2、下:3、左:4】になります。
typeデザインタイプ。空白or【vertical】を指定。空白で横並び・【vertical】で縦並びになります。
icon_image画像でメニューを使用したい場合はここに画像のURLを貼り付けます。メディア ⇒ 設定したい画像を選択 ⇒クリップボードにコピー
webiconアイコンでメニューを作りたい場合はここにwebアイコンのショートコードを入力。
下の一覧表参考!
icon sizewebアイコンのサイズ(%)を指定。
textメニューのタイトル
subtextサブタイトル
urlクリックした時のリンク先のURLを指定
targetターゲット属性。taget=”_blank”で別タブまたは別ウィンドウでリンク先を開く
relリンクとの関連性の設定。(rel=”nofollow”でクローラーに巡回させない。)
bgcolor背景色。おすすめの ※カラーコードサイト
colorテキストの色。webアイコンと文字の色を指定。 ※カラーコードサイト
fontsizeテキストのサイズ(%)
fontweightテキストの太さ。fontweight=”bold”で太字。空白の場合は通常の太さ。

 

全部を理解して設定しなくても大丈夫です。
画像バージョンとWEBアイコンバージョンのサンプルを作成したので参考にしてみてください

 

画像とWEBアイコンでのメニューの作り方

サイドバーにメニューを作成する場合は1番最初の「基本(4列)」のコードをベースに設定して、最終的に設定していきます。

 

画像のボックスメニューの作り方

画像のボックスメニュー

画像のサンプルのショートコード

[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="画像のURL" webicon="" icon_size="" text="勉強" subtext="" url="リンク先URL" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="画像のURL" webicon="" icon_size="" text="スケジュール" subtext="" url="リンク先URL" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="画像のURL" webicon="" icon_size="" text="音楽" subtext="" url="リンク先URL" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="画像のURL" webicon="" icon_size="" text="映画" subtext="" url="リンク先URL" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="画像のURL" webicon="" icon_size="" text="ゲーム" subtext="" url="リンク先URL" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="画像のURL" webicon="" icon_size="" text="スポット" subtext="" url="リンク先URL" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]

 

画像サイトより素材を探そう

【素材・アイコン】のリンクはAFFINGERのテーマなら【リンク集】にあります。
AFFINGER管理 ⇒ はじめに ⇒ リンク集

素材とリンク集

 

もっと素材を探したい方はこちらの記事も参考にしてみてください。

 

 

今回はFLAT ICON DESIGNで作成しています。

フラットアイコン

 

【256×256・JPG・背景なし】の素材で作成しました。

 

 

必要な画像をダウンロードできたら、Wordpressに追加しましょう。
メディア ⇒ 新規追加 ⇒ ファイルを選択 ⇒ 追加したい画像を選択しましょう。

画像が追加できたらURLをクリップボードにコピー してショートコードの【url=”ここに貼り付け”】
これでボックスに画像が設定できます。

【url="画像のURL"

 

メディアの設定

 

 

完成

画像のボックスメニュー

 

おしゃれでかわいいボックスメニューの完成です!

 

WEBアイコンのボックスメニューの作り方

WEBアイコンのボックスメニュー

 

WEBアイコンのサンプルショートコード

[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="" webicon="st-svg-pencil" icon_size="" text="勉強" subtext="" url="リンク先のURL" target="" rel="" bgcolor="" color="#EFAF00" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-txt" icon_size="" text="スケジュール" subtext="" url="リンク先のURL" target="" rel="" bgcolor="" color="#00A465" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-headphone" icon_size="" text="音楽" subtext="" url="リンク先のURL" target="" rel="" bgcolor="" color="#FF0101" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-camera" icon_size="" text="映画" subtext="" url="リンク先のURL" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-google" icon_size="" text="ゲーム" subtext="" url="リンク先のURL" target="" rel="" bgcolor="" color="#0067B6" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-map-marker" icon_size="" text="スポット" subtext="" url="リンク先のURL" target="" rel="" bgcolor="" color="#EC96A0" fontsize="90" fontweight="bold"]
[/st-box-btn]

 

WEBアイコンで設定するアイコンのコードは下の一覧表から探してコピペしましょう。

貼り付ける場所を間違えないように注意しましょう。あとは文字の色も変更しています。※カラーコードサイト

【webicon=”webアイコンのショートコード”】【color="カラーコード"】

 

 

WEBアイコン一覧表

ショートコードアイコンショートコードアイコン
st-svg-g-gallaryst-svg-g-quote
st-svg-g-classicst-svg-g-column
st-svg-g-groupst-svg-g-paragraph
st-svg-h-topst-svg-get-pocket
st-svg-youtube-playst-svg-thumbs-o-down
st-svg-thumbs-upst-svg-hand-o-down
st-svg-headphonest-svg-pencil-square-o
st-svg-bullhornst-svg-refresh
st-svg-qr-codest-svg-angle-double-right
st-svg-angle-rightst-svg-arrow-right
st-svg-boldst-svg-bookmark
st-svg-camerast-svg-caret-square-o-right
st-svg-chevron-circle-rightst-svg-chevron-down
st-svg-chevron-rightst-svg-clock-o
st-svg-codest-svg-cogs
st-svg-credit-card-altst-svg-double-up
st-svg-envelopest-svg-eraser
st-svg-exclamation-circlest-svg-external-link
st-svg-eye-slashst-svg-files-o
st-svg-file-text-ost-svg-flag
st-svg-folder-open-ost-svg-font-tag
st-svg-homest-svg-info-circle
st-svg-lightbulb-ost-svg-list
st-svg-list-olst-svg-lock
st-svg-newspaper-ost-svg-paper-plane
st-svg-pencilst-svg-percent
st-svg-printst-svg-reply
st-svg-rss-squarest-svg-share-square
st-svg-shopping-cartst-svg-sign-in
st-svg-starst-svg-star-o
st-svg-tachometerst-svg-thumb-tack
st-svg-txtst-svg-url-copy
st-svg-user-circlest-svg-search_s
st-svg-closest-svg-menu_thin
st-svg-borderst-svg-camera-retro
st-svg-facebook-squarest-svg-relation
st-svg-trophyst-svg-quote-left
st-svg-plusst-svg-th
st-svg-map-markerst-svg-tags
st-svg-footerst-svg-h-gazou
st-svg-main-areast-svg-minus-thin
st-svg-question-circlest-svg-toc
st-svg-th-largest-svg-tablet
st-svg-comments-ost-svg-heart
st-svg-mobilest-svg-emotion-meh
st-svg-plugst-svg-comment
st-svg-commentsst-svg-arrow-circle-o-right
st-svg-bigginer_lst-svg-check-thin
st-svg-check_bold_maxst-svg-circle
st-svg-googlest-svg-line
st-svg-search-minusst-svg-search_thin
st-svg-wordpress

WEBアイコンの色は文字の色と一緒になります。変更したい場合はカラーコードの参考サイトなどを使ってコピペしましょう。【color=”カラーコード”】

 

完成

WEBアイコンのボックスメニュー

 

次はいよいよサイドバーへ設定です。

 

ボックスメニューをサイドバーに設定する方法

ここまでで画像とWEBアイコンのショートコードが出来たと思います。

ここまでに作ったボックスメニューのコードをコピーしてから下の手順に進んでください。

 

外観 ⇒ ウィジェット ⇒ 03_STINGERスリーボックスサイドバートップへドラッグ&ドロップ

※サイドバートップの下にあるサイドバーウィジェットでもOK!好みに合わせて場所を決めてください。

 

サイドバーの設定1

 

03_STINGERフリーボックスのテキストエリアに作成したボックスメニューのコードを貼り付け ⇒ 完成

サイドバーの設定2

 

実際にサイドバーに設置されているか確認してみましょう。

以上でボックスメニューをサイドバーに設定まで完成になります!

 

 

 

ボックスメニューの設定方法まとめ

このメニューは自分でカスタマイズして、思わず押したくなるボタンが出来ます。
サイト運営に応じてボタンの種類やリンク先など気軽に変更できるので便利です。

デザインなど楽しんでみてください。

 

他の記事もぜひ参考にしてみてください。

ボックスメニューの作り方と設定

BLOG

2022/3/28

【AFFINGER6】簡単なボックスメニューの使い方と設定方法

こんにちはおとちゃんです! よくサイトで見かける「ボックスメニュー」ってどうやって作るの?     これの作り方の解説をします。 画像のボックスメニュー WEBアイコンのボックスメニュー     この記事で紹介していること ボックスメニューの種類と設定 画像とWEBアイコンでのメニューの作り方 おすすめの素材とカラーコードサイト サイドバーの設定方法   現役パソコンインストラクターです。AFFINGER6でブログやっています。使いやすく見た目もおしゃれな ...

ReadMore

ヘッダーカードの設定とカスタマイズ

BLOG

2022/3/15

AFFINGER6ヘッダーカード最適サイズの設定とカスタマイズ

こんにちはおとちゃんです! AFFINGER6のサイトでよく見るこの「ヘッダーメニュー」を作りたい!   これです。作っていきましょう。   この記事で紹介していること AFFINGER6のヘッダーカードサイズ ヘッダーカードの作り方 設定とカスタマイズ   現役パソコンインストラクターです。AFFINGER5から使っていますが「ヘッダーメニュー」は使いやすいメニューが簡単に設定できるのでおすすめです。アクセス数アップにつながるかも!?     &nbsp ...

ReadMore

RankTrackerの導入と設定

BLOG

2022/2/17

RankTrackerの設定手順を画像付きで導入から使うまで解説!

  こんにちはおとちゃんです! ブロガーの強い味方「RankTracker」!まだ使っていない人は必見!!   こんな方におすすめ ブログを始めたい。 始めたけど全然アクセス数が増えない。 検索上位がなかなか取れない。   この記事ではSEO検索順位ツールのRankTrackerを導入と設定をして自分のサイトを上位にすることが出来るようになります!私自身も導入してからキーワードを見直して検索ランキング1位をたくさん取得できていますのでおすすめですよ!   &nbsp ...

ReadMore

アドセンスYOUTUBEの税務情報の提出手順

アフィリエイト 動画

2022/2/3

YOUTUBEとアドセンス広告の収益化の条件と税金対策

こんにちはおとちゃんです! 今回はGoogle AdSenceやYOUTUBEの収益の税金対策についてです!   AdSenceやYOUTUBEの収益化したら税務情報の提出を必ずやりましょう!(理由はあとで書いてあります。) 手順がわからない!という方に実際に私がやった設定を図解でわかりやすく解説します。同じように設定するだけなのでカンタンですよ!     この記事で紹介していること 税務情報の提出と未提出の違いは? 税務情報の提出手順 うまくできない原因と対処法 &nbsp ...

ReadMore

ドメインパワーアップ・ペライチで被リンク設定

BLOG

2022/1/30

被リンクとは?調べ方と増やす方法とペライチでドメインパワー対策

  こんにちはおとちゃんです! ブログをやっているけど被リンクの意味もメリットもよくわからないし、どうやって増やしたら良いかわからない。   こんな悩みを解決していきます。   この記事で紹介していること 被リンクの意味と効果 被リンクとドメインパワーの調べ方 ペライチの登録とリンク設定   現役パソコンインストラクターです。今回はSEO対策としてよく使われる被リンクについてです。わかりやすくその意味からペライチを使用して被リンクの設定を図解で説明していきます。一緒 ...

ReadMore

グーグルキーワードプランナー使い方

BLOG

2022/2/9

【2021年最新】Googleキーワードプランナーの無料登録と実際の使い方

こんにちはおとちゃんです! キーワードプランナーってどんなツールなの?登録の方法と使い方を知りたい!   こんな悩みを解決します。     この記事で紹介していること キーワードプランナーとは? キーワードプランナーの登録方法 実際の使い方とキーワード選定   仕事でパソコンを教えている現役講師です。わかりやすく為になる内容をモットーに記事を作成しています。 参考になればうれしいです。   Googleキーワードプランナーは無料でキーワード選定に使える超便 ...

ReadMore

アナリティクス・サーチコンソールの解説

BLOG Wordpress

2022/1/30

【2021年最新】無料アクセス解析|アナリティクスとサーチコンソールの設定と連携

  こんにちはおとちゃんです! ブログを開設したらGoogleの分析ツールを設定した方が良いと言われたけど、その方法を知りたい   そんな悩みを解決します。   この記事で紹介していること アナリティクスとサーチコンソールの違い アナリティクス・サーチコンソールの設定 すべての連携   WordPressでサイトを開設したらすぐにでもやっておきたい設定になります。 すべて無料でできる内容です   仕事でパソコン講師をしています。WordPressのブログ開 ...

ReadMore

ワードプレスのおすすめプラグイン一覧

Wordpress

2022/1/30

【WordPress】AFFINGER(アフィンガー)の必須プラグインとおすすめ

こんにちはおとちゃんです! WordPressのプラグインってたくさんあるけど何を選んだら良いの?しっかりSEO対策をしたサイト設定にしたい!   そんな悩みを解決します   この記事で紹介していること プラグインのインストール方法 AFFINGERに必須のプラグイン AFFINGERにおすすめのプラグイン プラグインのまとめ   プラグインとは? WordPressに様々な機能を追加できるツールです。無料・有料ありますが、今回は全て無料のものを紹介しています。さらにWord ...

ReadMore

おすすめの副業・ブログの始め方の解説

BLOG

2022/1/30

初心者向け|ブログでアフィリエイトのおすすめな始め方

こんにちはおとちゃんです! ブログやアフィリエイトを始めたいけどよくわからない。初めてでも失敗しないように内容や手順をわかりやすく解説していきます。     この記事で紹介していること ブログサービスの種類 アフィリエイトの仕組み ブログの始め方 ブログ開設後にやること ブログを収益化するためのステップ   現役パソコンインストラクターです。ブログ運営のお手伝いをしています。知識がなくても出来るような分かりやすい説明を心掛けていますので、参考になればうれしいです。 &nbsp ...

ReadMore

SEO対策・サイトスピード改善

アフィリエイト

2022/1/29

SEO対策|レンダリングを妨げるリソースの除外の簡単なプラグイン解決方法でサイトスピードアップ

こんにちはおとちゃんです! 今回の内容は「PageSpeed Insights」でサイトの表示速度を計測したときに表示される「レンダリングを妨げるリソースの除外」の解決策についてです。   下記のサイトからサイトの表示速度を計測します。使ったことがない人はまずは計測してみましょう。 PageSpeed Insights 計測したいURLを入れるだけで、サイトの表示速度が採点されます。スマホとパソコンで点数が表示され、改善した方が良い内容などをチェック・提案してくれます。   今回はその ...

ReadMore

レンタルサーバー3社比較

Wordpress

2022/1/29

WordPressでホームページ|初心者におすすめレンタルサーバー3社を比較

こんにちは!おとちゃんです。 今回はWordpressを設置するのにお勧めレンタルサーバーの比較していきます! こんな方におすすめ ブログ・サイトを始めようと思っている方 アフィリエイトを始めたい方 既にWordpressを使っているが料金の見直しを検討している方 今回紹介するレンタルサーバーは3社です。 エックスサーバー mixhost ConoHa WING   まずなぜレンタルサーバーが必要なのかも簡単に紹介したいと思います。 比較だけ確認したい方は目次からジャンプしてくださいね! &nb ...

ReadMore

Ads.txtの設定方法

アフィリエイト

2022/1/29

【図解付き】わかりやすいアドセンスのads.txtの設定方法

こんにちは!おとちゃんです! 今回はアドセンス広告を載せる前にやっておくべきads.txt(アズテキスト)の内容です。   Googleアドセンスにログインした時に下記のようなメッセージが出てきました。 要注意-収益に重大な影響が出ないように、ads.txtファイルの問題を修正してください。 アドセンスに登録しているメールに通知もあります。     そもそもads.txt(アズテキスト)とは? 偽装された広告などから広告主を守るための仕組みです。     ...

ReadMore

スポンサーリンク

  • この記事を書いた人

おとちゃん

現役のパソコンインストラクターです。 ブログと家族を愛する1児のパパで、趣味はパソコン・DIY・YOUTUBE鑑賞などです。 役立つ情報を発信していますのでゆっくりしていってください。