Snow Monkey Blocksで挿入できるパーツ一覧

WordPressのビジュアルエディター(Gutenberg)は、前回紹介した標準のパーツ(ブロック)の他に、プラグインなどでパーツを増やすことができます。H2O spaceの、ウェブサイト活用サポートで利用している Snow Monkeyには、公式のプラグイン「Snow Monkey Blocks」で、たくさんのパーツを追加することができます。ここでは、その各種類を紹介しましょう。

目次

ページ内に設定した見出しを自動的に目次にして表示してくれます。この記事の先頭にも設置しています。

アコーディオン

クリックで開閉できるエリアを設置できます。大量のコンテンツを分かりやすく紹介できます。

タイトル1

項目1

タイトル2

項目2

アラート

アイコンを付加した、目立つ領域を設置できます。注意喚起などに利用できます。色やアイコンを変更できます。

ノーマルアラート

アラートの内容です。アイコンも変更できます。

ワーニングアラート

背景やアイコンが赤になります

サクセスアラート

背景やアイコンが緑になります

リマークアラート

背景やアイコンがグレーになります

吹き出し

セリフ調の装飾を加えることができます。

たにぐち まこと

アイコンや名前を設定することもできます。

ゲスト

逆側の吹き出しも設定できます

ボックス

コンテンツの内容を枠で囲むことができます。

ボックス内には、各パーツを挿入できます。

ボタンボックス

ボタンと見出しなどを設定できます。ページ最後の誘導などに利用できます。

ボタンボックスのタイトル
注釈を入れることもできます
フルサイズボタン

ボタン

ページ内にボタンを設置することができます。

カテゴリー一覧

「投稿」に設定しているカテゴリーのリンクリストを表示できます

このページの子ページ

固定ページを作った時に、「子ページ」が存在する場合に、その子ページのリストを表示することができます。

コンテナ

いくつかのパーツをグループにすることができます。

カウントダウンタイマー

時間を設定し、カウントダウンを開始することができます。イベント開始までのカウントダウンなどに利用できます。

  • 時間

ディレクトリ構造

ディレクトリ項目と、ファイル項目を追加しながらディレクトリー構造を提示することができます。

フォルダー1

ファイル1

ファイル2

サブディレクトリー

ファイル1-2

フォルダー2

星評価

0から5の数字を設定し、星のアイコンで評価などを示すことができます。

3.5

FAQ

Qと Aを入力して、よくある質問を掲載できます。

Q
質問です
A

回答です。冒頭の Qと Aは変更も可能です。

項目

画像や見出し、リンクなどのセットを並べることができます。

いいね!ボックス

Facebookページへの「いいね!」を促すエリアを設置できます。(以下は、Snow Monkeyの Facebookページです)

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

期間限定の表示

開始日時と、終了日時を指定してコンテンツを表示できます。

アイコンリスト

リスト項目を追加し、アイコンを変更することができます。

  • リスト1
  • リスト2

メディアと文章

画像と文章を左右で掲載できます。

画像の隣にコンテンツを展開できます。

画像の位置は左右や大きさは変更できます。

画像のキャプション

パネル

画像やリンクを、パネル調の装飾で表示できます。

ピックアップスライダー

「pickup」というタグをつけた投稿の一覧を作ることができます。

価格メニュー

価格を表示しやすいボックスを挿入できます。

商品1
1,000
商品2
3,000

価格表

1, 2件の価格を大きく提示できます。

商品1
\1,000
リード文
  • 項目1
  • 項目2

レーティングボックス

項目名と、そのレベルを設定できます。

項目1
6
項目2
3

最近の投稿

投稿を最新順に並べることができます。

スライダー

大きな画像を表示するスライダーを表示できます。

キャプション
キャプション2

ステップ

順を追って説明する内容を、数字の装飾などと共に掲載できます。

ステップ1

ステップ1の内容

ステップ2

ステップ2

任意のタクソノミー

カテゴリーやタグ、カスタムタクソノミーなどで絞り込んでリストを表示できます。

お客様の声

写真などを伴って、レビュー内容などを掲載できます。

お客様の声の内容です
たにぐち まこと
リード文

サムネイルギャラリー

画像のリストを表示できます。

以上、これらのパーツ(ブロック)を組み合わせて、自由にページをデザインすることができます。使いこなしていきましょう。

この記事を書いた人

谷口 允(たにぐち まこと)

エイチツーオー・スペース代表。関連会社でオンライン教育コンテンツ制作会社「ともすた」代表も勤める。

「ウェブをちゃんと」をテーマに、ウェブや動画を「ちゃんと」活用するためのアドバイスなどを行う。
主な著書に「よくわかるPHPの教科書」や、「マンガでざっくり学ぶプログラミング(監修)」など。