文字として扱えるアイコンを採用

キャプチャ画像

オリジナルテンプレート【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】です。

入手方法についてはコチラ↓をご覧ください

(※「SIRIUSでホームページ作成」という姉妹サイトの専用ページが開きます)
 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替