Menu/Prof
翻訳
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。
\ ポイント最大10倍! /

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

contents

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

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

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

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

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

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

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

用意されていないアイコンについて

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

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

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

いくつか混じってます。

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

コレを使用します。

FontAwesomeでアイコン一覧みてみよう

https://fontawesome.com/search?m=free (FontAwesome一覧ページ)

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

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

ページ上部の検索欄に apple で検索できます。

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

この画面の中の </> をクリックすると 該当アイコンのSVGを取得できます。

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

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

こんな感じでペースト。

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

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!
contents