WordPressのブロックエディタをもっと自由に活用したい。そんな方におすすめなのが無料プラグイン「Snow Monkey Blocks」です。

アコーディオン・スライダー・ステップ表示など、標準ブロックでは実現しづらい多彩なデザインをノーコードで追加できます。

本稿では、Snow Monkey Blocksの概要・ブロック一覧・使い方などを徹底解説します。

WordPressテーマ「GLUE」
WordPressテーマ「GLUE」
無料で高機能なWordPressテーマが手に入る。

Snow Monkey Blocksとは?

Snow Monkey Blocks

Snow Monkey Blocksは、WordPressのブロックエディタ(Gutenberg)を拡張するための無料プラグインです。

アコーディオンやステップ、スライダーなど、標準のブロックでは実現しにくい表現をノーコードで追加できるのが特徴です。

ブロックだけで簡単に実装できることから、初心者から上級者まで幅広く利用されています。また、日本語での情報やサポートが充実している点も安心材料となっています。

開発者のTakashi Kitajimaさんは、「Snow Monkey Forms」という問い合わせフォームプラグインやWordPressテーマも作っている方です。

Snow Monkey Blocks

メリット

  • ノーコードでデザイン可能:コードを書かずに高度な表現を実装できる
  • 豊富なブロック:アコーディオン・ステップ・スライダーなど実用的な機能を搭載
  • 国産プラグインで安心:日本語対応・情報が豊富で初心者にも使いやすい
  • 無料で利用可能:基本的な機能をすべて無料で使える

デメリット

  • ブロック数が多く迷いやすい:初心者はどのブロックを使えばよいか分かりにくい
  • 細かい調整はCSSが必要:標準機能だけでは思い通りのデザインにならないこともある
  • 特定のテーマでのデザイン崩れ:特定のテーマでは、デザイン崩れが起きる場合がある
  • 汎用性がやや限定的:他テーマとの互換性やカスタム性で制約がある

Snow Monkey Blocksのブロック一覧

使い方の概要は動画もありますので、よろしければご覧ください。

テキスト・装飾系

基本的な装飾

  • アラート:注意やお知らせを強調表示(複数のデザインを選択可能)
  • ボックス:枠付きボックスで内容を整理
  • 情報:イベント情報やお知らせ枠を作成

Snow Monkey Blocksの装飾ブロック

アイコン・リスト

  • アイコンリスト:アイコン付きの箇条書き
  • ディレクトリ構造:フォルダ・ファイル構造を表現

Snow Monkey Blocksのアイコン・リストブロック

操作・表示切替え系

開閉・切り替え

  • アコーディオン:開閉式のQ&Aや詳細情報を作成
  • タブ:タブ切り替えで複数コンテンツを整理

Snow Monkey Blocksの開閉・切り替えブロック

スライダー・動き

  • スライダー:複数の画像を横スライド表示
  • コンテンツスライダー:テキストや画像などの複数コンテンツをスライダー形式で表示
  • ピックアップスライダー:任意の記事をスライダー表示(タグに「pickup」の入力必須)

※コンテンツの切り替えができる白色の「<」「>」ボタンは、色の指定ができません。カスタマイズする際はCSSでの調整が必要です。

Snow Monkey Blocksのスライダーブロック1

Snow Monkey Blocksのスライダーブロック2

Snow Monkey Blocksのスライダーブロック3

コンテンツ紹介系

レビュー・評価

  • 吹き出し:吹き出しデザインで会話形式を表現
  • お客様の声:お客様の声やレビューを掲載
  • レーティングボックス:評価点数を星や数値で表現
  • 星評価:星マークで評価を表現

Snow Monkey Blocksのレビュー・評価ブロック

記事・情報表示

「Pro」と記載されているブロックは有料版ではなく、Snow Monkeyテーマ専用のブロックです。Snow Monkey Blocks単体では利用できません。

  • 最近の投稿(Pro):最新記事一覧を表示
  • 任意のタクソノミーの投稿(Pro):特定カテゴリーやタグの記事を表示
  • カテゴリー一覧:指定したカテゴリー内の記事を一覧で表示
  • 目次(Pro):記事の目次を自動生成
  • このページの子ページ(Pro):下層ページ一覧を表示
  • タクソノミー(Pro):タクソノミー情報を表示
  • RSS(Pro):RSSフィードを表示

Snow Monkey Blocksのカテゴリーブロック

商品・サービス紹介

  • 価格表:料金プランを横並びの表で表示
  • 価格メニュー:メニュー表と料金を表示
  • 項目:複数アイテムを並べて紹介

Snow Monkey Blocksの商品・サービス紹介ブロック

レイアウト・デザイン系

レイアウト枠

  • コンテナー:レイアウト用の入れ物ブロック
  • フレックス:柔軟なレイアウトを実現(Flexbox対応)
  • グリッド:複数要素をグリッドで整列
  • パネル:タイル/カード型で情報を並べる
  • メディアとテキスト:画像+テキストを並べて表示
  • ヒーローヘッダー:ページ上部に大きな見出し+画像を表示

Snow Monkey Blocksのレイアウトブロック1

Snow Monkey Blocksのレイアウトブロック2

Snow Monkey Blocksのレイアウトブロック3

ボタン

  • ボタン:シンプルなボタン設置
  • ボタンボックス:説明文(マイクロコピー)付きのボタン

Snow Monkey Blocksのボタンブロック

※動作確認を行ったところ、TCDテーマの種類によってはボタンのデザインが崩れる場合があります。その場合は、TCDクイックタグのボタンをご活用ください

特殊機能系

  • FAQ:質問と回答をセットで表示
  • ステップ:手順や流れをステップ形式で表示
  • 期間限定の表示:指定日時のみコンテンツを表示
  • カウントダウンタイマー:終了までの残り時間をカウントダウン表示
  • パターンの挿入(ベータ版):あらかじめ作成したパターンを挿入

Snow Monkey Blocksの特殊機能1

Snow Monkey Blocksの特殊機能2

※TCDテーマの種類によっては、カウントダウンタイマーのブロックを使用するとデザインが崩れる場合があります。別の表示方法やプラグイン等をご検討ください。

※カウントダウンタイマーの使用方法によっては、ダークパターンと判断される場合があります。使用方法や前後の文章表現にご注意ください。

参考:ダークパターンとは|国民生活センター

セクション系

  • セクション:基本的なセクション(背景の色や形の選択が可能)
  • セクション(ブロークングリッド):グリッドを崩しレイアウトするセクション
  • セクション(サイド見出し):横見出し付きのセクション
  • セクション(背景画像 / 動画):背景画像や動画付きのセクション
  • 続きを読む:記事を途中まで表示し、クリックすると全文を表示

Snow Monkey Blocksのセクションブロック1

Snow Monkey Blocksのセクションブロック2

Snow Monkey Blocksのセクションブロック3

Snow Monkey Blocksのセクションブロック4

Snow Monkey Blocksのセクションブロック5

Snow Monkey Blocksの使い方

ここでは、Snow Monkey Blocksの主なブロックの使い方を解説します。

インストール方法

  1. WordPress管理画面 > プラグイン > プラグインを追加
  2. 検索窓にSnow Monkey Blocksと入力
  3. 今すぐインストール > 有効化

以下のリンクからプラグインをダウンロードして、インストールすることもできます。

Snow Monkey Blocks

初期設定

設定 > Snow Monkey Blocksのページから、不要なブロックをオフにすることができます。

そのままで問題ない場合は、投稿や固定ページのエディタ画面からブロックを使用します。

Snow Monkey Blocksの設定

ブロックの探し方

利用するには、投稿画面の左上や一行目の右側にある「+」からSnow Monkeyのブロックを探します(クリックすると「✕」になります)。

Snow Monkey Blocksの探し方

「snow」などでブロック検索するか、ブロック一覧を表示してスクロールすると、赤いアイコンの該当ブロックが表示されます。

アコーディオンの使い方

エディタでアコーディオン・ブロックを選択し、グレーの部分に主題や質問、その下に本文や回答を入力します。

Snow Monkey Blocks アコーディオンの使い方1

表示させると、主題や質問の右側に「∨」が表示され、クリックすると本文や回答が表示されます(「∨」をクリックすると表示が「∧」になります)。

Snow Monkey Blocks アコーディオンの使い方2

ステップの使い方

  1. ステップ・ブロックを選択
  2. ステップのタイトルを入力し、「+」から段落や画像のブロックを選択して入力
  3. 必要に応じてブロック設定で、タイトルをdivまたはh2h4の見出しでマークアップ

Snow Monkey Blocks ステップの使い方1

入力が終わったら、ブロック右下の「+」をクリックすると、2番目のステップの入力欄が表示されます。ただし、右下の「+」をクリックすると、ブロック選択の画面が出てしまう場合があります。

その場合は、1番目のステップの下にある行を一旦クリックし、キーボード右上のBackspaceキーまたはDeleteキーを押します。

Snow Monkey Blocks ステップの使い方2

その状態で、1番目のステップの右下にある「+」をクリックします。

Snow Monkey Blocks ステップの使い方3

すると、2番目のステップの入力欄が表示されます。3番目以降も同様の操作でステップを増やしてください。

Snow Monkey Blocks ステップの使い方4

実際に表示すると、番号と番号の間に縦線が入り、使い方や操作手順などの説明をしやすくなります。また、見出し・フォントサイズ・色の設定もできます。

Snow Monkey Blocks ステップの使い方5

スライダーの使い方

スライダーブロックを挿入し、画像を「アップロード」または「メディアライブラリ」から複数選択します。

Snow Monkey Blocks スライダーの使い方1

右側のブロック設定から、以下のようなスライドの詳細設定を行うことができます。

  • 画像のアスペクト比:画像の縦横比を16:9と4:3を選択
  • デフォルト:標準の設定に戻すオプション
  • 矢印を表示:スライドを切り替える「<」「>」の矢印を表示するか選択
  • ドットを表示:スライド下部の「●」インジケーターを表示するか選択
  • フェード:スライド切り替えを「横移動」ではなく「フェード効果」にする
  • スライドをシャッフル:スライドの順番をランダム表示
  • スライダーをずらす:隣のスライドを少し見せて「横に続きがある」デザインにする
  • キャプションを表示:画像に設定したキャプション(説明文)を表示
  • 自動再生の間隔(秒):スライドを自動で切り替える秒数を設定(「0」にすると自動再生しない)
  • アニメーションの速さ(秒):スライド切り替えの速度を設定(「0」にすると標準速度になる)
  • パソコン・タブレット・スマホのアイコン:端末ごとに「同時に表示するスライド数」を指定

ページをプレビューしたり公開すると、以下のように表示されます。

Snow Monkey Blocks スライダーの使い方2

なお、スライドを切り替える矢印は白色になっており、プラグイン側で色設定ができません。矢印自体の色やサイズを変更したい場合は、CSSでの調整が必要となります。

Snow Monkey Blocksが表示されない場合の対処法

  • キャッシュ削除:サーバー・プラグイン・ブラウザのキャッシュをクリア
  • テーマ側CSSの影響:子テーマや追加CSSで上書きされていないか確認
  • バージョン確認:WordPress・Gutenbergを最新にアップデート
  • 条件付き表示:権限や条件設定を誤っていないか確認
  • 最適化設定の見直し:JS/CSSの結合・圧縮・遅延をオフにして確認
  • プラグイン競合:一時的に他プラグインを停止し、原因を切り分け

サーバー・テーマ・プラグイン側の設定で、ブロックの動作に必要なJS/CSSが結合・圧縮(ミニファイ)・遅延読み込み(defer/async 等)されている場合があります。

もし、問題が出る場合は、該当スクリプトの除外や設定の調整をしてください。

よくある質問(FAQ)

Q. 商用サイトでも無料で利用できますか?

A. はい、WordPress公式ディレクトリから配布されているため、商用・非商用を問わず無料で利用できます。

Q. どんなテーマでも問題なく動作しますか?

A. 多くのテーマで利用できますが、テーマによってはデザイン崩れやスタイルの競合が起きる場合があります。導入後はプレビューや検証環境で確認し、必要に応じてCSSを調整してください。

Q. 速度の最適化プラグインと併用できますか?

A. 併用可能ですが、結合・圧縮・遅延設定が原因で動作が不安定になる場合があります。該当スクリプトを除外するか、設定を段階的にオフにして原因を切り分けてください。

Q. 表示されないときはどうすれば?

A. キャッシュ削除、最適化除外設定、プラグイン競合確認、テーマCSS調整などを行ってください。

まとめ

Snow Monkey Blocksは、豊富なブロックを使ってWordPressサイトを直感的にデザインできる便利なプラグインです。

実用的な機能をコード不要で実装できる一方、テーマによってはデザイン崩れが起きる可能性もあるため、必要に応じてCSS調整やテーマ側の設定確認が重要です。

ノーコードでエディターの表現力を高めたい方は、ぜひご利用ください。エディタ拡張プラグインは「TCDクラシックエディタ」もございますので、こちらもよろしければどうぞ。

世界最高品質のデザインの
WordPressテーマ集
WordPressテーマ「FAKE」
WordPressテーマ「FAKE」
イケてる企業サイトを低コストで構築する。
WordPressテーマ「GENESIS」
WordPressテーマ「GENESIS」
スタイリッシュな企業サイトの決定版。
WordPressテーマ「NANO」
WordPressテーマ「NANO」
中堅以上も使える企業系テーマのロングセラー。