MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
永久無料ドメイン付き!超高速サーバーConoHa Wing! 詳細

手軽にボックスメニューを作る方法 SWELL(アイコンメニュー)CSS不要!

SWELLでボックスメニューが作れないと思っていませんか?

HTMLを貼るだけ」で手軽にボックスメニューを作れます。CSSも不要

この記事では、簡単にボックスメニューを作る方法について解説します。

目次

SWELLでもボックスメニュー作れる?

SWELLボックスメニュー

SWELLでは、Cocoonのように手軽にボックスメニューを作る方法がありませんよね。

でも、CSSは難しくて書けない…。

そんな方にオススメなのが、「TinyMCE」を使う方法です。自分で作成した表のHTMLをウィジェットに貼るだけ!

この方法ならCSS不要なので、大事なソースコードを壊してしまう危険性もありません。

さっそく、簡単にボックスメニューを作ってみましょう!

事前準備

まずメニューを作り始める前に、下記の準備が必要です。

  1. TinyMCEのインストールと設定
  2. テーマカラーの色番号
  3. アイコンの準備

①TinyMCEのインストールと設定

  1. Advanced Editor Tools (旧名 TinyMCE Advanced) 」プラグインをインストールして有効化しておく
  • メニューに「フォントサイズ」が表示されていること
Advanced Editor Tools (旧名 TinyMCE Advanced)

表示されていない場合は、設定でドラッグアンドドロップで挿入しておく。

Advanced Editor Tools (旧名 TinyMCE Advanced) 、フォントサイズの追加方法

②テーマカラーを調べる

事前に、自分のWebページのテーマカラーの「色番号」を調べておきましょう(このWebページなら、オレンジ系の「#f5bf5f」になります)。

不明な場合は、外観 > カスタマイズ > サイト全体設定 > 基本カラー で調べられます。

③アイコンの準備(または画像の準備)

アイコンに使うフォントや画像を準備しておきましょう。いずれかになります。

  • 独自画像
  • ちなみに、「SWELLアイコン」はマウスオーバーすると下線が引かれてしまうため、おすすめできません。

Font Awesomeを使う場合は、「SWELL設定」で有効化されている必要があります。

SWELL設定でFontAwesomeを使う方法

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

以下のようなボックスメニューを作ります。下記の手順に従います。

SWELLボックスサンプル

ボックスメニューの基本的な作り方

STEP

WordPressの画面で、クラシック版の段落 をクリックします。
Advanced Editor Tools (旧名 TinyMCE Advanced) を有効化していると表示されるブロックです)

ブロックエディタで「クラシック版の段落」をクリック
STEP

テーブルボタンを押して テーブル をクリックし、必要な「列」と「行」の数をクリックします(ここでは2×2で作成)。

クラシックブロックでテーブルを作成
STEP

表が作成されたら、すべてのセルを選択します。

テーブルですべてのセルを選択
STEP

中央揃えボタンを押します。

テーブルですべてのセルを中央揃え
STEP

セルを全選択したままテーブルボタンを押します。

セル > セルのプロパティ を選択します。

セルのプロパティを選択
STEP

セルのプロパティ」が表示されたら、高度な設定 タブをクリックします。

スタイル」に下記のコードを追加します。赤字の部分は、自分の色コードを入力してください。

border: 1px solid #000000;
高度な設定でタグを入力
STEP

指定の色で、1pxの太さの枠が表示されました。

セルに枠が引かれました
STEP

セル内に、下記のような形式で「コード+文字」を一行で入力します。

この時点では改行は入れないでください(リンクが二つに分かれてしまいます)。
リンクを貼ったあとで改行します。

セルにコードを入力
  • Font Awesomeのアイコンを使う場合の例:
[icon class="fas fa-home"]ホーム
STEP

アイコンが正しく表示されるか確認しましょう。

プレビュー > 新しいタブでプレビュー をクリックします。

新しいタブでプレビューを押す
STEP

小さなアイコンが表示されていればOKです。

プレビュー画面でアイコンが正常に表示されることを確認
STEP

文字を全選択し、テキスト色ボタンをクリックします。

テキスト色変更の画面
STEP

#の横に色番号を数字6桁で入力します。

文字に色が適用されます。

色番号入力画面
STEP

アイコンコードの部分のみを選択します。
フォントサイズのボタンを押し、36pt を選択します。

フォントサイズ変更画面
STEP

アイコンコードの部分が大きくなりました。
次は、後ろの文字のみを選択し、B(太字)ボタンを押します。

太字にする画面
STEP

次は、セル全体をコピーし、他のセルに貼り付けます。

セル全体を、他のセルに貼り付ける画面
STEP

必要な部分のみを変更します。

文字列を変更する場合は、先に文字を追加してから、不要な文字を削除します(先に消すと装飾タグも消えてしまいます)。

タグの文字を変更する画面
STEP

次はリンクを貼ります。

セル全体を選択し、リンクの挿入 ボタンを押します。

リンク挿入画面
STEP

カテゴリーへのリンクを入力し、(適用)ボタンをクリックします。

リンクを入力する画面
STEP

すべてのセルにリンクを貼り終わったら、改行を入れます。

アイコンコードと文字の間にカーソルを置き、Shift + 改行 を行います(通常の改行では幅が広すぎるので、必ずShiftを押しながら行ってください)。

Shift + 改行で改行する画面
STEP

すべて改行したら、HTML表示します。

> HTMLとして編集 をクリックします。

HTMLとして編集を選択する画面
STEP

HTMLをすべてコピーします。

コードを全選択してコピーする画面
STEP

ブラウザで別ウィンドウを開き、WordPressの管理画面から 外観 > ウィジェット を選択します。

カスタムHTML」のウィジェットを、「共通サイドバー」内にドラッグします。

ウィジェットでカスタムHTMLを挿入する画面
STEP

カスタムHTMLのボックス内に、先ほどコピーしたHTMLコードをペーストし、保存 をクリックします。

HTMLコードをペーストして、保存をクリックする画面
STEP

サイドバーにボックスメニューが表示されました!

ボックスが完成した画面

基本的な作り方は以上になります。

ご注意

2021年9月追記

マウスオーバーすると、文字列下に下線が引かれてしまいます

以前は、「text-decoration: none;」を追加すると下線を削除できましたが、「WordPress」または「SWELLテーマ」の仕様の変更により、HTML上では下線を削除できなくなってしまいました

文字下に下線が残りますが、ご了承ください。

これを変更したい場合は、CSSコードの修正が必要になりますので、ここでは解説いたしません。

よかったらシェアしてね!
目次
閉じる