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

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

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

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

ブロックの使い方

ブロックをコピー

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

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

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

ブロックを貼り付け

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

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

設定項目の解説

のじはた
のじはた

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

アイコン

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

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

アイコンサイズ・余白

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

アイコン色・背景色

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

角丸の大きさ(%)

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

前後の余白(em)

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

アイコンの影

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

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

アイコン表示位置

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

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

リンク設定

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

まとめ

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

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

それではまた。

( 。•ᴗ• )੭⁾⁾

2 COMMENTS

りつ

はじめまして!
のじはた様のサイトで勉強中の者です。
とても分かりやすいので、知識の浅い私でも楽しくカスタマイズができています!

のじはた様のサイトの、トップページ「おすすめ記事」の部分のように、PCでは4カラム、スマホでは2カラムに表示するにはどうすればよろしいのでしょうか?

お忙しい中申し訳ございませんが、ご教授頂けないでしょうか。

返信する
のじはた

コメントありがとうございます。
トップページは「記事一覧ブロック」を使って3カラムにしています。

この機能はSANGOバージョン2(旧版)をお使いの場合3系にアップデートする必要があります。
よろしくお願いします。

返信する

コメントを残す

コメント欄は記事内容の質問などにご活用ください。すべての質問にはお答えできませんので予めご了承ください。
テーマのリクエストや機能の質問はSANGOフォーラムに直接ご質問ください。