コピペOK【SWELL】サイドバーにアイコン付きボックスメニューの作り方!

こんにちは!オレタメ(@oretame1988)です。

このブログはワードプレス有料テーマの「SWELL」を使っています。

今回はSWELLのサイドバーにアイコン付きメニューボックスを設置する方法をシェアします!

\ このサイトも使っているWPテーマ【SWELL】/

WordpressテーマSWELL
読みたい所をクリック

ボックスメニューとは

ボックスメニューとはこんな感じの物

SWELLのボックスメニュー

オレタメのサイドバーにあるボックスメニューは2列、

Font Awesomeのアイコンが表示され、クリックすると各種リンク先に飛ぶことが出来ます。

ちなみにウクレレが真ん中にあるのはメニューは奇数のため、最後尾が真ん中に来ています。

SWELLブログにボックスメニューを反映させるまでの手順

ワードプレス有料テーマSWELLでボックスメニューを作るやり方は以下の通り

SWELLブログにボックスメニューを反映させるまでの手順
STEP
Font Awesomeをブログに反映させる

ワードプレスダッシュボードのSWELL設定からFont Awesomeの読み込み設定をする

STEP
ブログパーツにメニューボックスのhtmlを記述

ブログパーツにボックスメニュー用のhtmlを記述する

STEP
サイドバーにブログパーツを挿入

完成したブログパーツのショートコードをウィジェットのサイドバーにコピペする

それでは解説していきたいと思います。

SWELLブログにボックスメニューを作る手順①Font Awesomeを反映させる

Font Awesomeとは、Web上で利用されるアイコンを文字として使うためのツールです。

商用利用可能、無料で使えます。

これをショートコードを入力するとアイコンが表示される設定をダッシュボード上で行います。

Font Awesomeの読み込みはダッシュボードの「SWELL設定」から設定します

詳しくはSWELL公式の記事をご参照ください。

SWELLブログにボックスメニューを作る手順②ブログパーツにボックスメニュー用のhtmlを記述(コピペOK)

Font Awesomeの反映が終わったらボックスメニュー用のhtmlを記述します。

サイドバーのカスタムhtml上で書いてしまっても良いのですが、

元々のコードをどこかに書いておいて、表示先はショートコードでを貼りたい!

という事で、ブログパーツを活用します。

SWELLには登録したコンテンツを自由に呼び出す機能「ブログパーツ」が存在します

このブログパーツにボックスメニュー用のhtmlを書いて出来上がったショートコードを

呼び出したいところ(今回はサイドバー)に表示させます。

【コピペOK】ボックスメニューのhtml

オレタメと同じ仕様になるボックスメニューのコードはこちら

<div class="p-nav">
<ul>
<li><a href="https://oretame.com/tag/money/"><span style="color: #f5c000;"></span><span class="p-nav-title">お金</span></a></li>
<li><a href="https://oretame.com/category/works/"><span style="color: #994d00;"></span><span class="p-nav-title">仕事</span></a></li>
<li><a href="https://oretame.com/category/lifestyle/"><span style="color: #4dc0b2;"></span><span class="p-nav-title">生活</span></a></li>
<li><a href="https://oretame.com/tag/web/"><span style="color: #030a91;"></span><span class="p-nav-title">Web</span></a></li>
<li><a href="https://oretame.com/tag/dd/"><span style="color: #ff5757;"></span><span class="p-nav-title">発達障害</span></a></li>
<li><a href="https://oretame.com/tag/hyogen/"><span style="color: #b65ee6;"></span><span class="p-nav-title">表現</span></a></li><li><a href="https://oretame.com/tag/ukulele/"><span style="color: #44a834;"></span><span class="p-nav-title">ウクレレ</span></a></li>
</ul>
</div>

上記をコピペすればOK

ボックスメニューの個数を足したい場合は、

<li>~</li>をコピペして追加していけば大丈夫です。

<li>~</li> の中身としては

<li>~</li>の記載項目
  • メニューのリンク先
  • アイコンの色
  • アイコンの種類
  • アイコンのタイトル

これらの情報がコードとして書かれています。

ブログオレタメではブログパーツ記事内にカスタムhtmlブロックを作って

書き込んでいます。

SWELLのブログパーツ

SWELLブログにボックスメニューを作る手順③サイドバーにブログパーツのショートコードをコピペしよう

それではいよいよラストの作業

サイドバーのウィジェットにブログパーツのショートコードを埋め込みます。

ブログパーツのショートコードは一覧の中にあります。

ワードプレス有料テーマ「SWELL」のブログパーツ

これをウィジェットにコピペします

ワードプレス有料テーマ「SWELL」のブログパーツのショートコードをウィジェットにコピペ

これで完成!

サイドバーにボックスメニューが反映されているはずです!

SWELLのボックスメニューの作り方まとめ

今回は、SWELLのサイドバーにボックスメニューを作成する方法をシェアしました

改めて手順は

STEP
Font Awesomeをブログに反映させる

ワードプレスダッシュボードのSWELL設定からFont Awesomeの読み込み設定をする

STEP
ブログパーツにメニューボックスのhtmlを記述

ブログパーツにボックスメニュー用のhtmlを記述する

STEP
サイドバーにブログパーツを挿入

完成したブログパーツのショートコードをウィジェットのサイドバーにコピペする

これであなたのブログにもアイコンのボックスメニューがつくれます。

また、カスタマイズやCSSも行えば、アイコンをオリジナルの画像にしたりなどの調整も可能です。

参考にしたのはSANGOなので別のWordpress有料テーマに関する記事ですが、十分参考になります。

もし試してみて上手くいかないとか分からない事があったらコメント欄等でお知らせください!

参考になったら、シェアしていただけるとブログ更新のやる気が出ます!

最後まで読んで頂きありがとうございます!

よかったらシェアしてね!

この記事を書いた人

表現を仕事にする個人事業主です。「仕事・お金・表現」などの情報+自分の経験をあなたのためになる様に変換して発信しています。
詳しいプロフィール
「サワムーのプロフィール」

コメント

コメントする

読みたい所をクリック
閉じる