Cosmic Blocks:Gutenbergに47種類の独自ブロックを追加できる

2019年12月29日

Gutenberg に様々なブロックを追加できる WordPress 用プラグインの紹介です。
それは「Cosmic Blocks」です。
その導入手順から日本語化・使い方と設定などを解説していきます。

Cosmic Blocks

Cosmic Blocks - WordPress.org

Cosmic Blocks は、Gutenberg エディターに 47 種類の様々な独自ブロックを追加できます。
Cosmic Blocks では、以下の機能をもつブロックを追加できます。

  • Accordion:最大 3 列まで並べられるアコーディオンブロックを配置できます。
  • Advantages:商品の特徴を最大 6 列まで並べて表示できるブロックを配置できます。
  • Brands:ブランドイメージを 2 から 5 列に並べることができます。
  • Buttons (call to action):ボタンを 2 から 5 個まで並べることができます。
  • Classifieds List:募集広告や告知をリスト形式で表示できます。
  • Classifieds Tiles:募集広告や告知をタイル形式で表示できます
  • Contacts List*:連絡先をリスト形式で表示できます。
  • Contacts Tiles*:連絡先をタイル形式で表示できます。
  • Contacts Target Bar*:連絡先ターゲットバーを表示できます。
  • Container内部に他のブロックを追加できるコンテナブロックを配置できます。
  • Countdown:目標日時を設定して、その日時までのカウントダウンを表示できます。
  • Count Up:目標の数値を設定して、その数値までアニメーションでカウントアップしていくブロックを配置できます。
  • Date List:イベントリストを日付順にリスト形式で表示できます。
  • Date Tiles:イベントリストを日付順にタイル形式で表示できます。
  • Deals:仕事の内容と価格をリスト表示できます。
  • Donations:寄付を募ることができます。
  • Employee List:従業員リストを表示できます。
  • Employee:従業員を最大 3 人までソーシャルリンク付きで表示できます。
  • Events List*:イベントをリスト形式で表示できます。
  • Events Tiles*:イベントをタイル形式で表示できます。
  • Events Upcoming List*:開催予定のイベントをリスト形式で表示できます。
  • Events Upcoming Tiles*:開催予定のイベントをタイル形式で表示できます。
  • Facts:事実などを表示する際に便利なブロックを配置できます。
  • Foreword:序文を表示するのに便利なブロックを配置できます。
  • Greeting:会社の代表などの挨拶文を載せるのに便利なブロックを配置できます。
  • Image:画像を表示できます。
  • Inline Notice:インラインメッセージを表示できます。
  • Launch:画像をクリックするとアニメーションを開始することができるブロックを配置できます。
  • Like/Dislike:好きなもの・嫌いなものなどを並べて表示したい場合に便利なブロックを配置できます。
  • Links Download:ダウンロードリンクを表示できます。
  • Links Icon:リンクアイコンを表示できます。
  • Links Image:画像を 1 から 6 列に並べて表示できます。
  • Posts List:投稿をリスト形式で表示できます。
  • Posts Grid:投稿をグリッド形式で表示できます。
  • Pricebox:価格表を表示できます。
  • Pricelist:価格表をリスト形式で表示できます。
  • Progress:プログレスバーを表示できます。
  • Separator:セパレーターを表示できます。
  • Showcase:ショーケースを表示できます。
  • Social Share:SNS へのシェアボタンを設置できます。
  • Split List:分割リストを表示できます。
  • Statements:ステートメントブロックを配置できます。
  • Steps:ステップ形式で表示できるブロックを配置できます。
  • Testimonial:お客様の声などを表示できます。
  • Title & Intro:タイトル、サブタイトル、イントロを表示できます。
  • Voting Slogans:スローガンを表示できます。
  • Wanted:タイトルと説明をリスト形式で表示できます。

独自ブロックを追加できるプラグインは沢山あるので、
文字色・背景色・枠線の色などよく使う色があるのであれば、
色を一元管理できるプラグイン「Central Color Palette」があると乗り換え時等に便利かも。
Central Color Palette の使い方 – WordPress 活用術

記事を作成もしくは更新時点でのバージョン:0.42

Gutenberg エディターでの動作

Gutenberg エディターに専用ブロックが追加されます。

インストール手順

下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Cosmic Blocks – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Cosmic Blocks」と入力します。

WordPressプラグイン「Cosmic Blocks - Gutenberg Blocks」のスクリーンショット

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Cosmic Blocks を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

有効化すると

WordPressプラグイン「Cosmic Blocks - Gutenberg Blocks」のスクリーンショット

専用メニュー

WordPressプラグイン「Cosmic Blocks - Gutenberg Blocks」のスクリーンショット

ダッシュボードの「設定」メニューの下に追加されています。

使い方

投稿もしくは固定ページを Gutenberg エディターで開きます。

WordPressプラグイン「Cosmic Blocks - Gutenberg Blocks」のスクリーンショット

あとは、必要な場所にブロックを追加して必要な設定を行うだけです。

設定(Settings)

WordPressプラグイン「Cosmic Blocks - Gutenberg Blocks」のスクリーンショット

不要なブロックを無効化できます。

WordPressプラグイン「Cosmic Blocks - Gutenberg Blocks」のスクリーンショット

WordPressプラグイン「Cosmic Blocks - Gutenberg Blocks」のスクリーンショット

WordPressプラグイン「Cosmic Blocks - Gutenberg Blocks」のスクリーンショット

WordPressプラグイン「Cosmic Blocks - Gutenberg Blocks」のスクリーンショット

WordPressプラグイン「Cosmic Blocks - Gutenberg Blocks」のスクリーンショット

URL

Cosmic Blocks – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています

ブロック追加

Posted by 管理人