WordPressのブロックエディタ拡張：Getwidについて解説(5)Icon

  • 投稿日
  • 更新日
  • 著者 takanashi
  • カテゴリー WordPress

タナビーの高梨です。

今回はGetwidのIconブロックに関する設定を解説していきます。

全般設定については こちらをご覧ください。

Icon概要

Iconブロックとは公式ページの引用では

カスタマイズ可能なアイコンを使って、効果的でわかりやすいユーザーインターフェイスを作成

公式ページ（翻訳 by DeepL先生）

だそうです。

なにやらアイコンが準備されていていろいろ遊べそうですね。

さっそく見ていきましょう！

ブロックの設定

Settings

Icon：表示するアイコンを選択します。めちゃめちゃ大量にあります。1ページ12個のアイコンが199ページ分あります。全て探すのは大変なので、Search Iconsと書かれたところにキーワードを入れて検索するか、その下の分類から選ぶか、ページを直接入力するかのいずれかで検索するのがよさそうです。ただ、ページは結局何ページにあるのか分からないので、あまり使えない気がします。分類は以下リストの通り。

どうやらfontawesome iconを使っているようなので、調べる方法としては、ここのアイコン一覧で欲しいアイコンを探し、名前で検索するのが一番効率的だと思います。

  • Show from all（全部表示）
  • Brands（企業などブランド）
  • Accessibility（障碍者関係？）
  • Animals（動物もの）
  • Arrows（矢印）
  • Audio & Video（オーディオ、ビデオ）
  • Automotive（車関係）
  • Autumn（秋？）
  • Buildings（ビル）
  • Business（ビジネス）
  • Charity（お金、チャリティー）
  • Chat（吹き出し、チャット）
  • Chess（ゲームのチェス）
  • Code（プログラミングとかのコード）
  • Communication（通信）
  • Computers（コンピューター）
  • Currency（金融、お金関係）
  • Date & Time（時計、カレンダー）
  • Design（デザインの道具など）
  • Editors（エディターによくある編集マークなど）
  • Education（教育）
  • Emoji（顔文字）
  • Files（ファイル）
  • Genders（オスメスマーク）
  • Halloween（ハローウィン）
  • Hands（手）
  • Health（病院、医療、健康）
  • Images（図形とか画像）
  • Interface（インターフェースということですが、リストを見ても意味が分かりません）
  • Logistics（運輸、荷物）
  • Maps（地図ということですが、リストを見ても意味が分かりません）
  • Marketing（リストを見ても意味が分かりません）
  • Mathematics（計算機、演算子、数式）
  • Medical（医療、薬）
  • Moving（運搬）
  • Objects（物体ということですが、リストを見ても意味が分かりません）
  • Payments & Shopping（支払い、ショッピング）
  • Political（政治的ということですが、リストを見ても意味が分かりません）
  • Religion（宗教）
  • Shapes（吹き出し、星形、矢印など図形）
  • Spinners（何となくくるくる回転しそうなものですが、よく分かりません）
  • Sports（スポーツ）
  • Status（ステータスなんでしょうが、どういう基準で選択されているかよく分かりません）
  • Tabletop Gaming（カードゲームとかボードゲームとか）
  • Travel（旅行）
  • Users & People（人の形）
  • Vehicles（乗り物）
  • Wether（天気）
  • Writing（書き物）

Layout：表示形式を「Icon（アイコンのみ）」、「Background（背景色あり）」、「Outline（枠線で囲まれる）」から選択します。

Icon（アイコンのみ）

Background（背景色あり）

Outline（枠線）

Icon Color：アイコンの色を指定します。パレットから、または、カスタムカラーでカラーピッカーか直接RGB数値入力で設定します。

Background Color：LayoutでBackground Colorを選択すると表示されます。背景色を指定します。パレットから、または、カスタムカラーでカラーピッカーか直接RGB数値入力で設定します。

Icon Size：アイコンの大きさを数値設定します。単位は「px」、「em」、「%」、「vh」、「vw」から選択できます。

Space Around Icon：アイコンの周りにどれだけスペースを取るかを数値(px)で設定します。要するにpaddingです。

Border Width：LayoutでOutlineを選択すると表示されます。枠線の太さを数値(px)で設定します。

Border Radius：LayoutでBackgound ColorかOutlineを選択すると表示されます。枠の角を丸める数値を%で設定します。

Link：アイコンをクリックしたときにLink先に飛ばしたい場合にURLを設定します。また、Open in New TabをONにすると、新しいウィンドウが開いてリンク先を表示します。

Link Rel：リンクする際の<a>タグのRel属性を設定します。

Icon Hover Animation：マウスでホバーした時のアニメーションを設定できます。選択肢は以下の通り。

  • None
  • Bounce
  • Flash
  • Pulse
  • Rubber Band
  • Shake
  • Head Shake
  • Swing
  • Tada
  • Wobble
  • Jello
  • Jack In The Box
  • Slide Top
  • Slide Bottom
  • Slide Left
  • Slide Right
  • Zoom Small
  • Zoom Big

下記アイコンにホバーすると実際の動作が見れます。

Bounce

Flash

Pulse

Rubber Band

Shake

Hand Shake

Swing

Tada

Wobble

Jello

Jack In The Box

Slide Top

Slide Bottom

Slide Left

Slide Right

Zoom Small

Zoom Big

Margin

Margin Top：margin-topを数値で設定します。単位は「px」、「em」、「%」、「vh」、「vw」、「Auto」から選択できます。「Auto」の場合は数値は無視されます。

Margin Bottom：margin-bottom を数値で設定します。単位は「px」、「em」、「%」、「vh」、「vw」、「Auto」から選択できます。「Auto」の場合は数値は無視されます。

Margin Left：margin-left を数値で設定します。単位は「px」、「em」、「%」、「vh」、「vw」、「Auto」から選択できます。「Auto」の場合は数値は無視されます。

Margin Right：margin-right を数値で設定します。単位は「px」、「em」、「%」、「vh」、「vw」、「Auto」から選択できます。「Auto」の場合は数値は無視されます。

まとめ

設定個所は以上です。

fontawesome iconを手軽に使えるという認識でよさそうです。

ただ、ブロックとしてdivで囲われるので、段落の途中にアクセントとして使うなどの使い方は気軽にできません。

Getwid