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

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

体ぶっ壊して死にかけたので人生RESET中。

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

Some visuals are licensed via Canva Pro (includes commercial rights).
Usage complies with Canva’s license terms at the time of use.
License policy: canva.com/policies/content-license-agreement

X
     この記事はプロモーションを含みます
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をコピーしました!

この記事を書いた人

makotoのアバター makoto Blogger&YouTuber

サーバー管理者として17年ほど仕事でサーバー触ってました。
www,mail,dns,sql各鯖をすべてFreeBSDで運用してましたが現世ではかなりレアなタイプになるみたいですね笑

viやシェルスクリプトとかperlとかgccとかFreeBSDとか実はbashよりtcshが好きとか時々寝ぼけるのは
その名残でしょう。

今まで縁の下の力持ち的な他人のためにプログラムを書き他人のためにサーバー構築し他人のためにWEBサイトを創る的な世界から
自分の好きなことに集中できる環境は実に気持ち良いですね。
現役は引退済みなので難しいことはやりませんしやれません。

現在 ほぼ自由人。

contents