【SANGOカスタムブロック】アイコンブロックの使い方

この記事ではSANGO Landで配布しているアイコンブロックの使い方を解説していきます。

👆アイコンブロックは名前の通り、Font Awesomeの好きなアイコンを自由に表示することができるブロックです。セクションのワンポイントや、リンク先を示したいときなどにもお使いいただけます。

アイコンブロック自体にリンクを設置したり、影を付けたりなど豊富なオプションを用意しています。

ブロックの使い方

ブロックをコピー

まずはSANGO Landにアクセスしてブロックをコピーしましょう。

右上のコピーボタンをクリック!

右上のコピーボタンからブロックをコピーします。

ブロックを貼り付け

使いたいページの編集画面で右クリックして貼り付け、もしくはCtrl + Vまたは⌘ + Vします。

これでアイコンブロックの設置は完了です。次は詳しい操作手順を見ていきましょう。

設定項目の解説

のじはた
のじはた

ここからはブロックの設定項目を見ていきます。

アイコン

アイコンピッカーから好きなアイコンを選択することができます。

またクラス名がわかる場合は検索することも可能です。

アイコンサイズ・余白

アイコンの大きさ、余白をpx単位で設定します。

アイコン色・背景色

アイコン色ではアイコン自体の塗りつぶし色を、背景色ではアイコンの背面の色を指定します。

角丸の大きさ(%)

角丸の大きさをパーセント単位で指定します。0%で真四角、50%以上にするとまるで表示されます。

前後の余白(em)

前後の余白をem単位で指定します。初期値は1.5emです。

アイコンの影

アイコンに影を付けるかの設定です.なしから大きめの影まで設定可能です。

  • なし
  • 影(小)
  • 影(中)
  • 影(大)

アイコン表示位置

アイコンの表示位置の設定です。

  • 左寄せ
  • 中央寄せ
  • 右寄せ

リンク設定

URLや別タブで開くかの設定、rel属性を指定することができます。

まとめ

今回はSANGO テーマで利用できるアイコンブロックの使い方を解説しました。

このブロックに関する質問・問題・要望はSANGO Landのコメント、もしくはTwitterまでどうぞ!

それではまた。

( 。•ᴗ• )੭⁾⁾