※モバイル機器のみ作動→PC表示に切替 モバイル表示に切替

【Volar】に搭載されてるオリジナル機能に関してはデザインモードではなくデフォルトの編集画面でのご利用を前提としてます。

特に記載がない限り、ご紹介する機能は【Volar】及び【Volarデザイン】に共通搭載となります。

FontAwesomeでアイコン表示

キャプチャ画像

SIRIUSテンプレート【Volar】では、画像ではなく文字として扱えるFont Awesomeを利用して、ちょっとしたワンポイントアイコンを表示させています。

Font Awesomeというのは、一見すると画像のようなアイコンを文字として扱えるようにしたオンラインツールのことで、無料で利用することができます。

(より高機能な有料版もあります)

 

画像でアイコンを貼るのと違って拡大してもボヤけませんし、テキストベースなので色やサイズも簡単に変えることができます。

【Volar】にはFont Awesomeをすぐに使えるようベースとなる設定を組み込んであります。


Font Awesomeの概要

たとえば【用語解説】という小見出しがあったとします。

 

このままだとテキストだけなので、見た目のインパクトがちょっと弱い感じがしてさらっと流されてしまいそうです。

 

そこで文字の先頭にアクセント的なアイコンを付けてみることにします。

 

ただ画像でのアイコンにすると、画像作成から画像位置の調整までそこそこ手間がかかります。

 

しかしFont Awesomeなら、アイコンとして使いたい文字をオンライン上で探し、決められた形式で記述するだけで簡単に画像のようなアイコンを添付することができます。

 

サンプルとしてFont Awesomeを使って【用語解説】の前に、インフォメーションなんかでよく使われる「○にi」マークを付けてみます。

 

まずFont Awesomeのページでそれらしきアイコンを選びます。

 

たとえばコチラの”アイコン”を選んだ場合、具体的には発行されるコードをコピーして、

 

キャプチャ画像

 

<i class="fas fa-info-circle"></i>【用語解説】

とこんなふうに【用語解説】の前にペーストするだけで、コチラ↓のようなアイコンが先頭に付いて表示されます。

【用語解説】

 

このアイコンに色を付け、もう少し大きくしてみます。

【用語解説】

 

こちらの書き方は、先ほどの形式に要素をちょっとだけ足したものです。

<i class="fas fa-info-circle fa-2x skyblue"></i>【用語解説】

 

”fa-2x”というのが大きさ2倍指定のFont Awesome固定のclass、”skyblue”というのはコチラで新たに設定した(フォント色をブルーにする)classになってます。

 

Font Awesomeならこういった感じのものがわずか数分でできちゃいます。

 

もちろんこういった設定はテンプレートに組み込み済みなので、Font Awesomeを使ってあなたがカスタマイズする必要は基本的には必要ありません。

SIRIUSに元々組み込まれているアイコンに関しては画像の場合もあります。

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア 
キャプチャ画像