SWELLの新機能ボックスメニューで用意されてないアイコンを使う方法

contents

SWELLの新しい機能のボックスメニューを試す

ver2.6.1 新しく追加された機能を使って早速BOXメニューを作ってみました。

自分が以前から使っているものと色を変えて同じものを作ってみました。

＊実際に動作するのでジャンプ注意

SWELL 新MENU

旧MENU

SWELLの高速化オプションでコンテンツに合わせて必要なCSSだけ読み込むがONなっていると
この新機能のボックスメニューは動きませんのでご注意を。

v.2.6.1.1
ボックスメニューブロックの表示が「コンテンツに合わせて必要なCSSだけを読み込む」をONにしたときに崩れる不具合を修正しました。

さすがSWELL。ツイッターで呟いたら速攻で修正されてます。いつもありがとうございます！

ブロックメニューから色々便利に設定できてまったく言う事ないのですが

用意されているアイコン以外を使う方法をわかりやすく説明しますね。

見ての通りですが私の使用しているアイコンは元々ブロックメニューの中に用意されていないものが

いくつか混じってます。

設定項目の中に「HTMLでsvgを記述する」があるのをお気づきの方も多いと思います。

コレを使用します。

ここで好みのアイコンを探します。

試しに apple のロゴを探してみましょう

appleのアイコンをクリックするとこうなります。

copied と表示されれば自分のクリップボードにSVGがコピーされてますので

SWELLのエディター画面に戻り

こんな感じでペースト。

これでSWELLの一覧にないアイコンも表記することが可能になります。

シェアしてくれると喜びます