SWELLでアイコンをショートコードを使わずに(使って)呼び出す
2024
7/12
SWELLでアイコンを使う方法を教えてほしいです。
こういった悩みにお答えします。
アイコンをショートコードを使わずに呼び出す方法
アイコンをショートコードを使って呼び出す方法
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能 の記事をまとめていますので、良ければご覧ください。
あわせて読みたい
【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ
SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
本記事の内容
SWELLでアイコンをショートコードを使わずに呼び出す
ブロックツールバーのアイコンから選択して呼び出す
トップツールバーから、「 (アイコン)」を選択します。
アイコンを選択から、「 」>「ロゴ」>「 」を選択します。
が表示されました。
アイコンの一例
Regular
SVGタグを直接入力して呼び出す
下記画像の赤枠部分にSVGタグを入力することでアイコンを表示できます。
表示させたいSVG画像をクリックしてから、「このアプリケーションで開く」>「テキストエディット.app」を選択します。
「テキストエディット」はMacに標準搭載されているテキストエディタで、Windowsでは「メモ帳」になります。
以下の方法でもSVGタグを表示させることはできますがインストールや設定が必要です。
方法①
表示させたいSVG画像をクリックしてから、「このアプリケーションで開く」>「Visual Studio Code.app」を選択します。
方法②
表示させたいSVG画像をクリックしてから、「クイックアクション」>「Open with Code」を選択するとVisual Studio Code.appで開きます。
SVGタグ
あわせて読みたい
【Macは超簡単】VSCodeをインストールと日本語対応する方法
【Macは超簡単】VSCodeをインストールと日本語対応する方法を知りたいですか?本記事では、VSCodeをインストールする方法から日本語対応させる方法までを解説しています。VSCodeをインストールと日本語対応する方法を知りたい方は非是ご覧ください。
あわせて読みたい
【VSCode】MacのFinderでクイックアクションを実行する
【VSCode】MacのFinderでクイックアクションを実行する方法を知りたいですか?本記事では、Finderでクイックアクションを実行するために必要なワークフロー(「クイックアクション」>「Open with Code」)の作成や削除方法を解説しています。MacのFinderでクイックアクションを実行する方法を知りたい方は是非ご覧ください。
SVGタグをコピペ後、「決定」をクリックします。
SVG画像が表示されます。
SVGタグを直接入力して呼び出せない時の対処法
こちらの記事を参考にしてみて下さい。
あわせて読みたい
WordPressでSVG画像をアップロードする【SWELL可】
WordPressでSVG画像をアップロードする方法を知りたいですか?本記事では、functions.phpにコードを書く方法とプラグインを入れてアップロードする方法を解説しています。WordPressにSVG画像をアップロードしたい方は是非ご覧ください。
SWELLでアイコンをショートコードを使って呼び出す
IcomoonやFont Awesomeのアイコンをショートコードを使って呼び出すこともできます。
詳しくはこちらの記事で解説しています。
あわせて読みたい
SWELLで用意されているショートコードの使い方【大全】
SWELLで用意されているショートコードの使い方を知りたいですか?本記事では、「ブロック化されていない」「ブロック化もされている」「アイコン」全てのショートコードについて解説しています。SWELLで用意されているショートコードの使い方を知りたい方は是非ご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能 の記事をまとめていますので、良ければご覧ください。
あわせて読みたい
【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ
SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
今回は以上です。
※ PS:本記事で「悩みが解決した 」「参考になった 」方は、是非 (旧Twitter)でシェア をお願いします!