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

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

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

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

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

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

目次

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

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

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

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

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

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

事前準備

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

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

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

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

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

②テーマカラーを調べる

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

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

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

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

  • 独自画像

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

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

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

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

STEP

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

STEP

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

STEP

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

STEP

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

STEP

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

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

STEP

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

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

border: 1px solid #000000;
STEP

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

STEP

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

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

  • SWELLの独自アイコンを使う場合の例:
[icon icon-home]ホーム
  • Font Awesomeのアイコンを使う場合の例:
[icon class="fas fa-home"]ホーム
STEP

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

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

STEP

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

STEP

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

STEP

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

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

STEP

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

STEP

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

STEP

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

STEP

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

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

STEP

次はリンクを貼ります。

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

STEP

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

STEP

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

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

STEP

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

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

STEP

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

STEP

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

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

STEP

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

STEP

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

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

下線が引かれてしまう場合の対処

SWELLでは、「リンクに下線を付ける/付けない」を選択できます。
外観 > カスタマイズ > 投稿・固定ページ > コンテンツのデザイン(下部))

リンクに下線を付ける」設定にしてある場合、ボックスメニュー内にも下線が引かれてしまいます。

これを避けるために、リンク内に追加のコードを設定します。

STEP

先ほどウィジェットに貼り付けたコードを、メモ帳に貼り付けます。
(Windowsのメモ帳のような、横幅を無制限に表示できるエディタが見やすいです)

中ほどにある <a href= ~> 内に、追加のコードを挿入します。
(タグ内の最後の部分 「;」のあと、「”>」の前)

STEP

次のコードをコピペで挿入します(最初にスペースあり)。

 text-decoration:none;

挿入すると、以下のようになります。

STEP

コードを修正したら、すべてをコピーして、先ほどのウィジェットに貼り付けます。最後に 保存 を押します。

STEP

マウスオーバーしても、下線が表示されなくなりました。

これでボックスメニューの作成は終了です。

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