ブロックエディタ拡張プラグイン「CoBlocks」全30ブロック解説、表示例付き

＜表示例＞

このアコーディオンカスタマイズは、企業ページでは実績紹介や、メンバー紹介などに使うとキレイに整理されたページに見えます。

２．アラート

「情報」「警告」など、出したいメッセージに合わせて登録しておいた背景色やテキスト色をスタイルを呼び出せます。

アラートブロックを挿入後、サイドメニューからスタイルを選択します。

＜表示例＞

記事に背景色付きのアラートブロックが挿入されます。
必ず同じ背景色で挿入できるので、共通化する部分はこういった設定のあるブロックを使うと間違いがなくていいですね。

３．投稿者

記事のauthor、投稿者を表示するブロックを追加します。
WordPressのユーザー名に関わらず、記事毎に自由入力で投稿者名やプロフィール画像を表示できます。

実際に記事を書いたユーザー名にとらわれず、毎回自由に作者登録ができるのがいいですね。

・プロフィール画像
・名前
・詳細
・リンク
この4つが入力項目として現れます。

＜表示例＞

背景色、リンクを囲むボタンの形はサイドメニューから変えられます。

４．カルーセル

複数の画像を入れ替えながら表示するカルーセルスライダーです。
記事毎に入れることで、その記事の内容をより効果的に伝えることができます。

旅行記の写真を入れたり、パワーポイントのスライドを入れたりなど、用途は幅広いです。省スペースでたくさんの画像を見せられるのがメリットです。

カルーセルの配置はスライダーのように大きい画像をつなげて見せたり、コラージュにして画像を複数可位置したり、選ぶことができます。

＜表示例＞

スタイルの一つ【コラージュ】では複数枚のサイズの違う画像がきれいに並びました。写真を1つずつ加工せずとも並べられるので表現の幅が広がりますね。

５．クリックしてツイート

記事の中に、Twitterへ投稿するリンクの埋め込みができるブロックです。
引用リツイート用の文章や、ツイートに含めるアカウント（＠〜〜）も指定できます。

「引用を追加してツイートする」というのが分かりづらいですが、「登録した文章と、該当記事のリンク、アカウント名」をツイートにまとめられます。

＜表示例＞

設定したボタンを押すと、Twitterの画面が開き、「登録した文章と、該当記事のリンク、アカウント名」がツイート画面に自動入力されています。Twitterへのリンクボタンを入れるのは様々なプラグインで可能ですが、引用リツイート用の文章まで登録できるのは珍しいです。SNSとの連携を考えならとても便利です。

６．コラージュ

画像をタイルのように複数配置できます。配置の形はサイドメニューから変更できます。

画像にキャプションを付けたり、リンクの挿入をしたりできます。

画像加工する手間なく、複数枚を一度に見せられます。

７．動的HR

HRとは、Horizontal Ruleの略で水平線を表すHTMLタグです。
このブロックを挿入すると、自由な幅の水平線（点にも変更可能）を入れられます。記事内で少し空白を作りたいときに使います。

水平線、点、全幅（水平線が画面の両端まで）と選べます。

＜表示例＞

デフォルトの背景色はグレーですが、色はサイドメニューで選べます。
HTMLタグで水平線を入れなくていいのは楽ですね。

８．イベント

イベントの告知スペースに使えるブロックが挿入できます。
日付、イベント名、イベント概要などが入力できます。

ただ月日の表示が日本式でないため、わかりづらいかもしれません。

＜表示例＞

英語の日付表記のため、日＞月＞年の順に並びます。それは少し慣れていない人には分かりづらいかもしれませんが、スタイルシートを使わなくても、これだけ形が整っているのは便利ですね。

９．機能

ブロック名は【機能】ですが、特集用のブロックです。
アイコンと説明文を入れて、特集ページや資料請求などの目立たせたいページへリンクを貼る用途に使えます。

サイドメニューからアイコンを変更したり、リンクを追加したりできます。

＜表示例＞

メインのページへはリンクだけでなく、このようなアイコンと説明文で目立たせるとアクセスを集めやすいですね。記事下に貼ったり、関連する記事内から誘導したりと使い勝手が良いです。

１０．Food＆Drink

飲食店のメニュー表示に使いやすいブロックです。
メニュータイトル、商品名、価格などが入れられます。サイドメニューより”画像”をONにすると画像も入れられます。

直感的に作業できる、わかりやすいブロックです。

＜表示例＞

きれいにレイアウトされたメニュー表ができました。
枠は下に追加できるので、複数のメニューを掲載できます。

１１．フォーム

お問い合わせフォームのような入力して送信する機能を追加できるのがフォームブロックです。

・お問い合わせ
・返信依頼
・Event（イベント）
3種類のフォームを選べます。返信やEventは告知記事につけて、申込みをそのフォームで受け付けることに適した項目が入ったものがつくられます。

■お問い合わせフォーム

１４．ヒーロー

ヒーローとは、”ヒーローイメージ”と呼ばれるもので、ページの最上部で使用することが多いコンテンツです。資料請求や問い合わせなど、訪問者に具体的な行動をうながすための導線として使うことが多いです。

資料請求ページへの動線を貼りたい場合は以下のように文言を入れます。
プライマリボタン、セカンダリボタンと2種類のボタンが挿入できるので、2箇所へリンクが貼れます。

＜書き込み例＞

１６．アイコン

アイコンを挿入するブロックです。
アイコンはサイドメニューから検索して、必要なデザインのものを見つけて使います。

アイコンにはリンクも挿入できます。
アイコンサイズも選べますが、大きいほうが記事の見た目が締まりますね。

１７．ロゴ＆バッジ

公式を示すサービスのロゴや、認証バッジなどを挿入するためのブロックです。
ただ、画像が記事に挿入されるだけなので、わざわざブロックを呼び出して使う必要はないかもしれません。

２０．メディアカード

リンクと文章、画像をセットにしたカード型表示ブロックです。
左に画像を入れて、右に文章を入れたいときなどに使うときれいにレイアウトされます。

２２．投稿

過去の投稿を表示できます。
ブログ内の記事だけでなく、RSSフィードで引っ張ってきたコンテンツの表示もできます。

ブロック内には投稿記事の文章がたくさん読み込まれますが、実際に表示されるときは画像＋冒頭の文章が少しです。投稿記事を表示させるスタイルは並列に並べる「スタック」か縦に並べる「水平」か、2パターン選べます。

＜表示例＞

スタイル「水平」で表示させると、右側にアイキャッチを呼び込み、左側に記事タイトル、日付、冒頭文章が読み込まれます。関連する記事をちょっと表示させたいときに使えるブロックです。

２３．投稿カルーセル

↑22の投稿ブロックに、もっと複数の記事をたくさん表示させたいときに使います。投稿数は1〜20記事まで設定できます。スライダーが表示され、記事が並びます。

横に並べる記事の数は、「カラム」設定から。

２４．価格表

サービスの価格や、グレードの価格表記ができるブロックです。
「今すぐ購入」ボタンからリンクが貼れます。

スマホ閲覧時はこの通りに表示されず、縦になってしまうこともありますが、パソコン表示時は美しいレイアウトが可能になります。

２６．サービス

自社サービスの紹介などに適したブロックです。
商品やサービスを販売していなくても、例えば、いくつもメディアを持っている場合にそれらの紹介枠として活用することも。

カラムの数、余白などサイドメニューより調整できます。
「表示ボタン」をONにすると”資料請求ページへ”などの誘導ボタンも追加できます。

２７．シェイプ区切り

記事の最後など、画像で区切りを付けたいときに使うブロックです。

画像の形はサイドメニューの「スタイル」から。山の高さなど形も変えられます。最後にこのような画像があると記事が締まりますね！

２８．シェア

SNSへの導線づくりに、シェアボタンを様々なスタイルで表示するブロックです。

よくあるアイコンだけの表示以外にも、「〜〜でシェア」とテキストが入ったものを選べるのが珍しいです。

SNSで投稿リンクがシェアされるのは、直接SEO効果があるわけではないといわれていますが（参考：SNSのSEO効果について）、広く知ってもらうためにはSNSでシェアされて記事への入口が広がるのはメリットが大きいです。

２９．ソーシャルプロフィール

自身のSNSアカウントへリンクを貼れます。
アイコンやボタンの上に直接リンクボックスが出るので、URL入力が簡単です。

アイコンはたくさん表示されますが、リンクを付けないものは記事上で表示されません。使っているSNSにだけリンクをつければOKです。

３０．スタック

このブロックも画像表示用ブロックです。コラージュ、Masonry、オフセットと画像表示用がいくつもありますが、スタックは画像が縦に並ぶだけです。ただこのブロックで管理すると、WordPressのギャラリー（関連性のある画像を1つのまとまりとして登録すること）として認識されます。その中で画像の入れ替えをしたり削除したりと管理が簡単になります。