PR

Otter Blocksプラグインの活用(Icon List編)

構築(主にWordPress関連)
スポンサーリンク

Otter Blocksプラグインは簡単にブロックにアニメーション(エフェクト)を付けられる以外にも便利が良いと感じた部分があったので備忘録。

リスト表示したい時リストマーカーを簡単に設定できる

デフォルトのリストブロックは至ってシンプル。それでほとんど事足りるのだが、Otter BlocksプラグインのIcon Listブロックは、Iconブロックと合体したようなブロックなので、リストマーカーを点や数字以外にしたい時に非常に便利

通常のリストブロックのリストマーカーは、

デフォルトとリストブロック

点か数字のみ。

数字

Icon Listブロックは、リストマーカーを数多くのアイコンから選択出来たり、オリジナル画像にも設定出来たりする。

Icon Listブロック

ブロックを選択すと、3項目サンプルとして挿入される。

リストマーカーを、

簡単に好きなアイコンに設定できる。

ただし、項目毎アイコンを指定出来るのだが、リスト項目全部のリストマーカーをまとめて設定することが出来なかった。私だけか??

1項目ずつアイコンを選択するのはちょっと面倒かな・・・

項目を増やしたい時は、右下+をクリックする。

+をクリック

増える。

項目が増える

色やサイズ、間隔を簡単に設定できる

細かい設定が簡単に出来る。

  • アイコン、テキストの色をそれぞれ設定出来る
  • テキストサイズを設定
  • アイコンサイズを設定
  • 項目間のスペースを設定
  • アイコンとテキストのスペースを設定

横並びリストも可能

あまり使うことはなさそうだが、水平並びのリストも可能。

通常は垂直(Vertical)リストだが、

垂直並び選択
垂直並びリスト

水平(Horizontal)並びにしたい時はこうなる。

水平並びを選択
水平並びリスト

オリジナル画像のリストマーカー

CSSでオリジナルリストマーカーを設定する必要がなく楽である。

例えば、このブログのサイトアイコンをリストマーカーに設定してみる。

Custom Lmageを選択し画像を指定する

こんな感じになる。

サンプル

結論

リストを賑やかにしたい時、とても便利なブロックである。

OtterBlocks
Otter Blocksプラグインの活用方法。主なブロックの説明をしてます。
Amazon.co.jp
タイトルとURLをコピーしました