WordPressを使っていると「もう少しだけ使えるブロックの幅を広げたい」と思うことがあるでしょう。
そんなときに便利なのが、CoBlocksというプラグイン。CoBlocksは、アコーディオン・カルーセル・プロフィールといった便利コンテンツが使える、ブロックエディタ拡張プラグインです。
専門知識がなくても、色んなコンテンツを記事上で使えるようになります。テーマに搭載されているブロック機能に物足りなさを感じている方は、CoBlocksを使ってみるとよいでしょう。
本記事では、CoBlocksで使えるブロック機能をサンプル付きで紹介します。
目次
- CoBlocksとは
- CoBlocksの使い方：全ブロックをサンプル付きで紹介
- Accordion（アコーディオン）
- Carousel（カルーセル）
- Shape Divider（シェイプディバイダー）
- Social Profiles（ソーシャルプロフィール）
- Stacked（スタック）
- Posts（ポスト）
- Post Carousel（ポストカルーセル）
- Map（マップ）
- Counter（カウンター）
- Dynamic Separator（ダイナミックセパレーター）
- Events（イベント）
- FAQ
- Features（フィーチャー）
- Form（フォーム）
- Click to Tweet（クリックトゥツイート）
- Collage（コラージュ）
- Food & Drink（フードアンドドリンク）
- Logos（ロゴ）
- Masonry Gallery（メイソンリーギャラリー）
- Pricing Table（プライシングテーブル）
- Row（ロウ）
- Service（サービス）
- Offset（オフセット）
- OpenTable（オープンテーブル）
- Icon（アイコン）
- Gif
- Hero（ヒーロー）
- Highlight（ハイライト）
- まとめ
CoBlocksとは
CoBlocksはWordPressのブロックエディタで使える無料のプラグインです。全部で28種類のブロック機能を追加できます。面倒な初期設定はなく、インストールが完了すると即利用できる手軽さが魅力です。
各機能はそこまで高機能ではありませんが、動作も軽いので入れておいて損はないプラグインかなと感じました。
テーマの外観は気に入ってるものの、ブロック機能がシンプルすぎると感じている方に最適なプラグインと言えるでしょう。
CoBlocksのインストール方法
管理画面のプラグイン追加ページから「CoBlocks」と検索してインストールするか、下のボタンから直接ダウンロードすることも可能です。
プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
プラグインのインストール方法については、下記記事で詳しく解説しています。
2021/2/16 情報を更新いたしました。 WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインス...
CoBlocksの基本的な使い方
インストールが完了したら、投稿画面を開いて左上の「+」マークをクリックしてください。
下にスクロールすると「CoBlocks」の全ブロックが見つけられます。
いずれかのブロックをクリックすると、エディタ内に挿入されます。
挿入したブロックを選択した状態で、右上の「設定」ボタンをクリックするとCoBlocksの細かい設定が可能です。
以上がCoBlocksの基本操作です。
CoBlocksの使い方：全ブロックをサンプル付きで紹介
CoBlocksの全ブロックの使い方について紹介します。
- Accordion（アコーディオン）
- Carousel（カルーセル）
- Shape Divider（シェイプディバイダー）
- Social Profiles（ソーシャルプロフィール）
- Stacked（スタック）
- Posts（ポスト）
- Post Carousel（ポストカルーセル）
- Map（マップ）
- Counter（カウンター）
- Dynamic Separator（ダイナミックセパレーター）
- Events（イベント）
- FAQ
- Features（フィーチャー）
- Form（フォーム）
- Click to Tweet（クリックトゥツイート）
- Collage（コラージュ）
- Food & Drink（フードアンドドリンク）
- Logos（ロゴ）
- Masonry Gallery（メイソンリーギャラリー）
- Pricing Table（プライシングテーブル）
- Row（ロウ）
- Service（サービス）
- Offset（オフセット）
- OpenTable（オープンテーブル）
- Icon（アイコン）
- Gif
- Hero（ヒーロー）
- Highlight（ハイライト）
Accordion（アコーディオン）
アコーディオン機能は三角のアイコンをクリックすると、内部が展開される仕組みを投稿内に挿入できます。
編集画面に挿入すると下画像のようなブロックが表示されます。
- Write accordion item title…
アコーディオンのタイトルを入力する箇所 - Type / to choose a block…
アコーディオンの中に挿入するテキストを入力 - 「+」
アコーディオンを追加する
編集画面の左側にはアコーディオンを既存で開いておくかや、背景色などを設定可能です。
設定が完了すると以下のようになります。
三角形のアイコンをクリックすることで、内包されているテキストが表示されます。
Carousel（カルーセル）
カルーセルは投稿内にカルーセルブロックを挿入できます。
ブロックを挿入すると、下画像のような項目が表示されます。
- Thumbnails
一般的なサムネイル - Full Autoplay
自動再生 - Full Scroll
スクロール機能付き - Lightbox
画像をクリックすると拡大
いずれかを選択すると、該当するブロックが追加されます。
編集画面の設定ボタンをクリックすると、画像のサイズや角の丸みなどを設定可能です。
プレビューを見ると以下のようにカルーセルブロックが挿入されていることが確認できます。
スクロールなしで複数の画像を見せたいときに最適なブロックです。
Shape Divider（シェイプディバイダー）
シェイプディバイダーは、投稿内にCoBlocksに内臓されているグラフィックを挿入できます。
ブロックを選択した際に表示されるメニューの左側のアイコンをクリックすると、グラフィックの種類を変更可能です。
設定画面でもグラフィックの種類や大きさ、カラーなどを変更できます。
プレビューで確認すると、下画像のようにグラフィックが挿入されていることが確認できます。
投稿内でアクセントを入れたいときに便利な機能です。
Social Profiles（ソーシャルプロフィール）
ソーシャルプロフィールは、投稿内にSNSボタンを挿入できるブロックです。
ブロックを挿入すると、各種SNSのアイコンが表示されます。挿入したいSNSのアイコンをクリックしてアカウントのURLを入力してください。
設定画面ではアイコンのスタイルやカラー、別タブで開くかどうかなどを設定できます。
設定が完了すると、下画像のようにSNSボタンが挿入されます。
Stacked（スタック）
スタックは、投稿内に画像を連続表示できます。
画像をアップロードするかメディアライブラリから選択して画像を選択してください。
設定画面では画像をクリックした際に拡大表示するかや、キャプションを表示するかなどを選択できます。リンクの挿入も可能です。
プレビューを確認すると、画像が挿入されていることがわかります。
画像を連続で表示しつつ、リンクを挿入しておきたいときなどに使えます。
Posts（ポスト）
ポストは投稿内に新着記事を挿入できるブロックです。
ブロックを挿入したら、設定画面より表示方法やカラム数などを細かく設定できます。
設定が完了してプレビューをチェックすると、投稿内に新着記事を挿入できていることが確認できます。
「新着記事はこちら」のような感じで見せたいときに重宝するブロックです。
Post Carousel（ポストカルーセル）
ポストカルーセルは、投稿内に新着記事をカルーセル表示できます。
ブロックを挿入したら、設定画面よりカラム数や投稿日、詳細の表示の有無などを設定してください。
設定が完了すると、下画像のように新着記事がカルーセル表示されます。
複数の記事を横スクロールで見せたいときに使えるブロックです。
Map（マップ）
マップは投稿内にGoogleマップを挿入できます。
ブロックを挿入したら住所を入力して「Search」をクリックしてください。
住所を入力すると、設定画面から地図の大きさや拡大レベルなどを調整できます。
ブロックの挿入が完了すると、地図が表示されていることが確認できます。
キレイにGoogleマップを表示させたいときに便利な機能です。
Counter（カウンター）
カウンターは投稿内にカウントアップを表示できるブロックです。
ブロックを挿入したら、数値とテキストを入力しましょう。
「Show Icon Block」をクリックすると、アイコンを表示できます。
アイコンをクリックするとCoBlocksに内蔵されているアイコンから選択できます。
設定が完了した後にプレビューを表示するとゼロからカウントアップが始まります。
シェア率や登録者数などを表示する際に便利なブロックです。
Dynamic Separator（ダイナミックセパレーター）
ダイナミックセパレーターは、投稿内にスペースを入力できます。
ブロックを挿入すると、設定画面よりスタイルやスペースの高さなどを設定可能です。
プレビューを確認すると、指定したスタイルのスペースが挿入されていることが確認できます。
固定ページでLP風のページを作成する際に活用できます。
Events（イベント）
イベントは投稿内にイベントの日時や時間などを表示できるブロックです。
- Day：日
- Month：月
- Year：年
- Write event description：詳細
- Time：時間
- Location：場所
上記を入力しましょう。
設定画面ではテキストのカラーを変更できます。
設定が完了すると、投稿内に下画像のようにイベント詳細が表示されます。
海外製のプラグインのため日時の表示が逆になっていますが、整ったデザインなので視認性は高めです。
FAQ
FAQは、質問と回答を投稿内に挿入できます。
質問と回答を追加していきましょう。
設定画面では、テキストのカラーを変更できます。
プレビューを確認するとよくある質問が追加されていることがわかります。
質問と回答をスマートに表示できる便利なブロックです。
Features（フィーチャー）
フィーチャーは、アイコンとテキストを組み合わせて強調表示ができるブロックです。
ブロックを挿入するとデフォルトで2つのブロックが挿入されます。カラム数やアイコンなどを変更して、好みのデザインにカスタマイズしましょう。
下画像のようにブログのカテゴリーや、企業の特徴などを効果的に目立たせることができます。
固定ページで重宝するブロックです。
Form（フォーム）
フォームは投稿内に問い合わせフォームや参加可否のフォームなどを追加できます。
- Contact
問い合わせフォーム - RSVP
参加可否のフォーム - Event
イベント関連フォーム - Request a Quote
見積依頼フォーム
上記のいずれかを選択してください。
フォームが挿入されたら、各種の編集が可能です。
ボタンを含む各テキストや、枠線のカラーなども変更できます。
プレビューを確認すると、投稿内にフォームが挿入されていることがわかります。
効果的な導線を簡単に設置できる便利なブロックです。
Click to Tweet（クリックトゥツイート）
クリックトゥツイートは、投稿内に読者がX（旧Twitter）にツイートできるボタンをを埋め込むことができます。
ブロックを挿入したら、Xのユーザー名を入力して、テキストを設定しましょう。
プレビューを確認すると、投稿内にXが埋め込まれていることがわかります。
Twitterボタンをクリックすると、下画像のようにXの投稿画面が表示されます。
こちらで設定したテキストを挿入できるので、読者にシェアしてほしいときに便利です。
Collage（コラージュ）
コラージュは、投稿内に複数の画像を配置できます。
ブロックを挿入するとデフォルトで画像が配置されるので、右側の設定画面よりスタイルを選択しましょう。
メディアライブラリから画像を選択してプレビューを確認すると、タイル上に画像が配置されていることがわかります。
旅行系のブログやアート系のブログで使えそうです。
Food & Drink（フードアンドドリンク）
フードアンドドリンクは、投稿内に料理のメニューを表示できます。
- Menu title…
メニュー名 - Add description
説明 - Add title
料理名
上記を入力しましょう。
設定ではアイコンを表示したり、画像を表示したりなどの設定が可能です。
プレビューを確認すると、料理のメニューが表示されていることがわかります。
飲食店のHPで活用できる便利なブロックです。
Logos（ロゴ）
ロゴは名前の通り、投稿内にロゴを表示できるブロックです。
ただし、画像が表示されるだけなので、通常通り画像の挿入をするのと変わりません。
Masonry Gallery（メイソンリーギャラリー）
メイソンリーギャラリーは、画像にエフェクトをかけられます。
ブロックを挿入したら、画像を選択またはアップロードしましょう。
設定で画像のスタイルを選択できます。
複数の画像を設置して、ブロックのように並べることも可能です。
プレビューを確認すると、画像にエフェクト効果がかかっていることがわかります。
投稿内に表示する画像にアクセントを加えたいときに使えるブロックです。
Pricing Table（プライシングテーブル）
プライシングテーブルは、投稿内に金額や購入ボタンを設置できます。
ブロックを挿入したら必要事項を入力しましょう。
必要事項を入力してプレビューを確認すると、いい感じに価格とプランが表示されていることがわかります。
自社サービスの紹介ページを作るときに便利なブロックです。
Row（ロウ）
ロウは投稿ページを分割して、ブロックを配置できます。
ブロックを挿入したら、分割パターンを選択してください。
選択したパターンのブロックが挿入されたら、画像やテキストを配置していきましょう。
プレビューを確認すると、下画像のようにレイアウトされていることがわかります。
投稿ページを作り込みたいときに重宝するブロックです。
Service（サービス）
サービスは商品やサービスをキレイなレイアウトで表示できます。
ブロックを挿入したら、必要事項を入力していきましょう。
設定からリンクボタンを追加することも可能です。
プレビューを確認すると下画像のようにキレイにレイアウトされていることがわかります。
自社サービスの紹介ページなどを作るときに最適なブロックです。
Offset（オフセット）
オフセットはメイソンリーやコラージュと同じく、画像をキレイにレイアウトできます。
コラージュやメイソンリーとは設定できる項目が異なるため、使いたい機能によって最適なものを選択しましょう。
ブロックを挿入したら、投稿内に表示したい画像を選んでください。
画像を挿入したら、角丸やリンクなどの設定ができます。
プレビューを確認すると、画像がキレイに並べられていることがわかります。
ギャラリー的な投稿ページを作るときに便利です。
OpenTable（オープンテーブル）
オープンテーブルは、レストラン予約サービスのOpen Tableのウィジェトを追加できます。
アカウントを持っている方は、ログインしてウィジェットを追加しましょう。
投稿内にOpen Tableの予約フォームを挿入したいときに活用できます。
Icon（アイコン）
アイコンは投稿内にアイコンを設置できます。
ブロックを挿入したら、設定からアイコンを選択してカラーやサイズを変更可能です。
プレビューを確認すると、アイコンが挿入されていることがわかります。
投稿にアクセントを加えたいときに便利なブロックです。
Gif
GifはアニメーションGIFサービスであるGiphyから、GIFを呼び出して設置できます。
ブロックを挿入したら検索欄にキーワードを入力して、GIFを選択しましょう。
日本語での検索にも対応しています。
GIFを選択すると、編集画面に表示されます。サイズの変更も可能です。
プレビューを確認するとGIFが挿入されていることがわかります。
GiphyはおもしろGIFがたくさんあるので、ファニーな投稿を作成する際に重宝するでしょう。
Hero（ヒーロー）
ヒーローは、投稿内にテキストとボタンを手軽に設置できます。
ブロックを挿入したら、各項目を設定しましょう。
設定からは、配置や高さ、余白などをカスタマイズできます。
プレビューを確認するとテキストと2つのボタンが設置されていることがわかります。
ログインと会員登録など、並列でボタンを配置したいときに便利です。
Highlight（ハイライト）
ハイライトは、テキストにハイライト効果を追加できます。
「A」をクリックするとフォントやハイライトの高さなどを細かくカスタマイズできます。
プレビューを確認すると、下画像のように文字がハイライトされていることがわかります。
デフォルトのハイライト機能よりも細かく設定できるので、ここぞというときに使えるでしょう。
まとめ
CoBlocksは完全無料で独自のブロックを追加できる便利なプラグインです。
非常に多彩なブロックが選択できるので、カスタマイズ性が低いシンプルなテーマを使っている方には重宝するでしょう。動作も重くないので、操作しているときのストレスもありません。
また、CoBlocksはスマホで表示する際の設定もブロックごとに変更できます。
使いこなせるようになると、複雑なレイアウトも構築できるようになるので、ぜひCoBlocksを活用して魅力的なサイトを作ってみてください。
コメント