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

WordPress

2020年09月20日

「WordPressでもっと記事を書きやすくしたい」
「投稿記事、固定ページでフォントや色、ページレイアウトをスピーディーに変えたい」

この記事は、WordPressできれいな見た目の記事ブロックエディタをもっと活用したいと思っている皆さまの参考になるようまとめた記事です。

さて、WordPressのエディタ(投稿や固定ページを書く画面)はバージョン5.0からブロックエディタ(Gutenberg)へ変わりました。ブロックエディタで記事を書くと、ブロックごとに動かしたり、画像やコードの埋め込みなども簡単にできたり、複数のブロックを登録して別記事でも呼び出せたりと、これまでのエディタと比較して投稿者が記事を書きやすいよう工夫されています。カスタムフィールドが不要になったとの声もあります。

さらにブロックエディタを拡張できるプラグインを使うと、もっと機能が増えて書きやすさが増します。今回解説するプラグイン「CoBlocks」はフォントやレイアウトも手早く変えられるので、デフォルトのままのエディタよりもっと記事が書きやすくなります。

WordPressのカンファレンス「WordCamp Osaka 2019」でも、多くの登壇者がブロックエディタの活用を進めるセッション(講義)を行いました。その一つ、「ブロックエディタで誰でもカンタンに運用しやすいサイトを作ろう!」はスライドも公開されており、ブロックエディタ活用の基礎学習ができます。ぜひご一読をオススメします。


スライド:ブロックエディタで誰でもカンタンに運用しやすいサイトを作ろう!

さて、今回は記事を書きやすくなる機能が多く入っている「CoBlocks」を解説しますが、ネットショップとの連携やLPが作りやすいプラグイン「Advanced Gutenberg」は過去記事で解説を書いています。機能を比較し、どちらのプラグインがご自身の使い方に合っているかご検討ください。

「CoBlocks」は初期設定は必要なく、インストールしてすぐ利用可能なプラグインです。2020年9月現在でインストールするとエディタで使えるブロックが30個増えます。そのブロック、1つひとつの表示例と使い方を解説していきます。ブロックエディタの基本的な挿入方法は、「Advanced Gutenberg」の解説に書いてありますのでそのからご参照ください。

1.アコーディオン

コンテンツ(本文)部分を折りたためるアコーディオン表示をブロック追加で可能にします。
動きが出ますし、少ないスペースで多くの文章を載せられます。


タイトル>本文(アコーディオンで隠れる部分)を繰り返し記載していきます。
記事にはタイトル部分だけが見えて、本文は隠れています。

<表示例>

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

2.アラート

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


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

<表示例>

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

3.投稿者

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


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

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

<表示例>

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

4.カルーセル

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


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

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

<表示例>

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

5.クリックしてツイート

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


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

<表示例>

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

6.コラージュ

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


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


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

7.動的HR

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


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

<表示例>

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

8.イベント

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


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

<表示例>

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

9.機能

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


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

<表示例>

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

10.Food&Drink

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


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

<表示例>

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

11.フォーム

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


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

■お問い合わせフォーム

■返信機能

■Event

日本のWEBサイトでは、お問い合わせフォーム以外は利用する頻度は多くなさそうです。気軽に記事内に入れられる問い合わせフォームとして利用すると便利ですね。

12.GIF

SNSで使うような動くスタンプ(GIF)を挿入できます。
アメリカのGIF検索エンジンGIPHYと連携していて、ちょっとアメリカンギャグというか、面白いGIFが多く見つかります。検索は日本語対応です。

13.Gist

ソースコードを共有するホスティングサービス「GitHub」と連携した機能です。
GitHubGistのURLをブロックに入れると、ファイルを呼び出して表示させます。


リンクを貼るだけだと離脱されてしまいますが、このブロックを活用すれば自分のページ内でコードを読んでもらえるのがメリットです。

14.ヒーロー

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


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

<書き込み例>

<表示例>

デフォルト設定では見た目が地味ですが、背景色を変えたり、フォントサイズを変えたり、サイドメニューから調整できます。

15.ハイライト

蛍光ペンでマーカーを引いたように、文章を目立たせる装飾ができます。
デフォルトは黄色ですが、色はサイドメニューから変更できます。


ブログなどでよく使われる機能なので、これは直感的に使うことができますね。

16.アイコン

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


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

17.ロゴ&バッジ

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

18.地図

住所を入力してGoogleMAPを記事内に挿入します。
住所を入れると、MAPが記事内に呼び出されます。地図をもっと拡大して表示したいときはズームレベルの数字を大きくし、広く表示したいときはズームレベルの数字を小さくします(ズームレベル5で日本列島が表示されるレベル感)。

19.Masonry

ブロックを積み重ねるように画像をレイアウト表示できるブロックです。
画像のサイズなどはサイドメニューから変更できます。

・サイズ=大or特大
・ガター=画像間の余白
・角丸=画像の角を丸く


たくさんの画像をギャラリーのように表示できます。

20.メディアカード

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

<表示例>

記事にちょっと画像を入れたいと思っても、右寄せ、左寄せなどCSSで都度設定するのは大変ですのでブロックを活用しましょう。また、ブロックで表示させておくとスマホ閲覧時でも画像の位置が予想外にズレるなどの不安もありません。

21.オフセット

レンガのように画像を組み合わせて表示できます。
印刷で使う用語にもオフセットがありますが、ここでいうオフセットとは意味が異なります。

画像表示ブロックは、コラージュやMasonryなど他のブロックもありますが、オフセットはコラージュより整然と表示できます。また、Masonryは角丸設定ができますがオフセットではできません。


画像を並べて表示するということだけに注目すると、Masonryブロックも、オフセットブロックも変わりませんが、角丸のように少し設定できる項目が違います。

22.投稿

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


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

<表示例>

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

23.投稿カルーセル

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


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

24.価格表

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

<表示例>

少しデザイン的には味気がないかもしれませんが、必要な情報は書き込めます。

25.行

ブロックを横に並べるためのブロックです。


レイアウトを選ぶとブロックが区切られます。そのあと、それぞれのブロックごとに情報を追加します。マップと画像を並べたいときなどに使えますね。


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

26.サービス

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


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

27.シェイプ区切り

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


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

28.シェア

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


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

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

29.ソーシャルプロフィール

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


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

30.スタック

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

まとめ

「CoBlocks」を使うメリットは、記事内の画像管理が簡単になること、レイアウトがかなり自由に組めるようになること、バラバラに書き込むよりスマホ閲覧時にキレイに並ぶことなどが上げられます。

ブロックエディタ拡張プラグインは複数あり、それぞれに特徴があります。「CoBlocks」は特に画像、SNSに関連するブロックが多く、オウンドメディア内やブロガーさんが使うと便利な機能がたくさんありました。

他のブロックエディタ拡張プラグインもありますので、比較検討して入れるプラグインを選んでくださいね。

今すぐ無料で見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」
そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。