(v3.2.0以降)アイコンのブロック・ツールバーの使い方

LP Creator Blocksで提供しているSVGアイコンブロックの解説をします。

← このようなアイコンを追加できます。

このブロックは、Font Awesomeバージョン7.0.0のみに対応しています。
※ 今後、他サービスのアイコンにも対応する予定です。

Font Awesomeの <i> タグを入力するだけで、保存時に自動でSVGに変換されるため、
フロントページ表示時にはWebフォントを読み込む必要がなく、SEOを考慮した構成になっています。

また、よく使うアイコンをお気に入りにストックすることで、他のブロックにも使い回しもできます。

Freeアイコンのみで、Proアイコンには対応しておりません。

ご注意

Font Awesomeのスクリプトファイルをすでに読み込んでいる場合や、Font Awesome公式のプラグインや、その他のFont Awesome関連のプラグインを有効にしている場合、正しく機能しません。

利用する際は、必ずこれらのスクリプトやプラグインを無効化してご利用下さい。

アイコンの追加方法

(1)アイコンを入れたい箇所を選択して、左パネルの「【LPC】コンテンツ」から「SVGアイコン」を選択してください。

(2)下記のリンクボタンを押すと、新規ウィンドウでFont Awesomeの公式ページが開きます。

(3)利用したいアイコンを選択しましたら、赤矢印の箇所に、<i>タグがでてきますので、それを押してコピーします。

(4)コピーしましたら元の画面に戻り、赤矢印の「ペースト」ボタンを押すとSVGイメージが挿入されます。

※ 青矢印の「お気に入りに追加」でお気に入りにストックすることができます。

お気に入りに登録すると、ボタンやリストのブロックでご利用いただけますので、ご活用下さい。

(5)オプションについて

アイコンには下記などのオプションがあります。利用用途に合わせてご活用ください。

  • アイコンを丸や四角で囲う
  • アイコンの色変更
  • 360度の回転と、反転
  • リンク追加

※ ブランドロゴは、各ブランドのガイドラインに従い、自己責任でご利用ください。反転と回転は利用できません。

インライン書式のアイコン追加と変更方法

(1)ツールバーからアイコンを追加する

(1)アイコンを入れたい段落にカーソルを置いて、下記、青枠のアイコンをクリックします。

(2)ブロックと同じようにFont Awesomeのリンクをクリックして、公式サイトに移動します。

(3)利用したいアイコンをクリックして、<i>タグを取得して、ペーストボタンを押して貼り付けします。

※ ツールバーから追加したアイコンは、丸や四角で囲むことはできません

※ アイコンの下に「Edit」が表示されます(編集ページのみ)

(2)ツールバーから追加したアイコンを変更する

(1)追加したアイコンをクリックして選択状態にします。

(2)ツールバーが表示されますので、下記のアイコンマークをクリックすると編集のポップアップが表示されます。

(3)変更したい場合は別のアイコンの<i>タグをペーストします。

(4)ここでお気に入りに追加したり、回転や反転等のオプション追加もこちらで行います。

(5)編集が終わったら「確定」ボタンを押すと、アイコンが変更されます。
 「キャンセル」ボタンを押すと編集が取り消しされます。

(3)ツールバーから追加したアイコンのスタイルを装飾する

(1)追加したアイコンをクリックして、選択状態にします。

(2)もしくは、アイコン以外の文字も合わせて変更したい場合は、下記のようにアイコン以外の文字も選択状態にします。

 ※ アイコンは選択状態にならないのですが、選択されています。

(3)他の書式と同じように、色味やフォントサイズ、マーカーなどで装飾します。

 ※ アイコンには、グラデーションや縁取り、文字間隔は使えません

(4)ツールバーから追加したアイコンを削除する

(1)削除したいアイコンをクリックして選択状態にし、ツールバーのアイコンマークをクリックします。

(2)ポップアップが表示されますので、下記、赤矢印の指す箇所に「アイコンを削除」がありますので、そちらをクリックして削除してください。

※ キーボードのバックスペースキーやDeleteでも削除ができますが、書式が複数設定されている場合など、うまく削除されないことがあります。できるだけこちらの削除機能をご利用下さい。

お気に入りに追加したアイコンの活用方法

お気に入りの数に制限は設けておりません。(今のところ)

お気に入りに追加したアイコンはボタンやリストで活用いただけます。

青矢印の箇所のアイコンを、標準のアイコンだけでなく、お気に入りアイコンから設置できます。


マニュアルTOP