【初心者オススメ】GutenbergのカスタマイズならUltimate Addonsで決まり!

  • このエントリーをはてなブックマークに追加

一昨日「Snow Monkey Blocks」を導入したブログを投稿をしましたが、もっと良さそうなプラグインを導入したので乗り換えちゃいました😂
調子が良ければ完全に乗り換えようかな~なんて思っています。

紹介するのは「Ultimate Addons for Gutenberg」というプラグインなんですが、日本語での解説があまりないように思ったので記事を書いてみようと思います。

初めて使うので一通りのブロックをデモという形でご紹介します。

とてもなが~いブログになってしまいましたが、ぜひご覧ください!

Ultimate Addons for Gutenbergとは

Gutenberg用のカスタムブロック集です。
Ultimate Addonsからお気に入りのブロックを選択するだけで、誰でも簡単にビジュアルスタイルの設定とカスタマイズが可能になります。

WordPress5.0以上にアップデートしたけどエディターが変わってしまって使いづらくなってしまった方や、とりあえず見栄え良く記事を書きたい方など、様々な方におすすめです。

インストール

Ultimate Addons for GutenbergはWordPressの公式ディレクトリに登録されているのでダッシュボードのプラグインからインストールします。

検索窓から「Gutenberg Blocks – Ultimate Addons for Gutenberg」と検索しましょう。
※下のボタンからもダウンロードできます。

インストールできたら、プラグインを有効化します。
設定の中にUAGが入っていたら準備は完了です。

使ってみる

早速使ってみます。

現時点(2019年3月)で実装されているカスタムブロックは20種類以上あります。一通りすべてをご紹介するので、実際に使えそうなものを探してみて下さい!

基本(共通)操作

投稿画面でブロックを作るように⊕を押します。

するとこのようにブロックを選ぶ画面が表示され、その中に「Ultimate Addons Blocks」という項目が追加されているのが確認できます。これをクリックします。

適用できるカスタムブロックが表示されます。現時点では20個存在しています。

ブロックを追加すると画面右に各パラメータが変更できるようになるので、適当な値に変更します。

「ブロックを追加」→「右側の各パラメータを編集」と覚えましょう!

基本操作はこんな感じです。
各ブロックや、パラメータを編集することによって様々なデザインを作成することができます。

次は実際に各カスタムブロックを使ってみます。
デモページも用意したので、こんなことが出来るんだな~くらいに見てみて下さい!

Advanced Heading(高度な見出し)

見出しをカスタマイズすることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

Advanced Heading

見出しのタグ(h1~h6)や文字サイズ、文字色などを変更できます。
サブ見出しもこちらで変更することが出来ます。

区切り

区切り線のスタイルや太さ、長さ、色などを変更できます。

Spacing

各アイテムの間隔(スペース)を調整できます。

Advanced Columns(高度なカラム)

カラム(列)をカスタマイズすることができます。

Advanced Columnsは他のブロックと組み合わせることで様々なデザインを再現することができるので、とても良く使う重要なブロックになります。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

Layout

カラム数やカラムの間隔(スペース)を調整できます。
使用するHTMLタグなどの設定もできるので、HTML5の仕様に沿ったコンテンツの作成ができます。

Spacing

paddingやmarginを調整できます。

Background

背景を設定することができます。
設定できるタイプは、色、グラデーション、画像、動画が設定できます。

Shape Dividers

お洒落なデザインにすることができます。
説明が難しいので、ご自身の目で確かめてください。

Border

ボーダーのスタイルを設定することができます。

Blockquote

引用・転載であることを表します。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

Layout

Blockquote要素のレイアウトを調整することができます。
はじめはModemとQuotationの2つが用意されています。

Content

引用の文字サイズやQuoteのカラーの調整のほか、作成者の文字サイズやサムネイル写真の変更ができます。

Twitter Icon

Twitterアイコンの表示非表示を切り替えることができます。
表示する場合はデザインの調整などもできます。

Spacing

paddingやmarginを調整できます。

Call To Action

CTA(コールトゥアクション)を追加します。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

Layout

CTAボタンの位置を調整できます。

Content

見出し(h1~h6)の設定や文字サイズ、文字色などを調整できます。
説明文の文字サイズや文字色もここで調整します。

ボタン

ボタンのタイプや文字を調整することができます。
リンクやボタンのアイコンスタイルもここで調整します。

Spacing

paddingやmarginを調整できます。

Contact Form 7 Styler

Contact Form 7にスタイルを当てることができます。

CSSでカスタマイズすることが苦手な方も、直感的にデザインすることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

一般

任意のコンタクトフォームを設定します。

Field Style & Border

Contact Form 7の全体のデザインを調整できます。
ボーダー色や、フォームを選択している場合のボーダー色もここで調整します。

Content

見出し(h1~h6)の設定や文字サイズ、文字色などを調整できます。
説明文の文字サイズや文字色もここで調整します。

Radio&Checkbox

ラジオボタンとチェックボックスのデザインを調整できます。

Submit Button

送信ボタンのデザインを調整できます。

Success / Error Message

送信成功・失敗のメッセージデザインを調整できます。
バリデーションのメッセージデザインもここで調整します。

Spacing

paddingやmarginを調整できます。

Content Timeline

コンテンツをタイムライン表示することができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

一般

タイムラインコンテンツの数を設定します。

Date Settings

日付の表示非表示を切り替えることができます。
表示する場合はここで全て設定します。

Layout

タイムラインレイアウトを設定します。

Spacing

paddingやmarginを調整できます。

Timeline Item

見出し(h1~h6)の設定や文字サイズなどを調整できます。
コンテンツ内の文字サイズもここで調整します。

Connector

アイコンの設定をします。
FontAwesomeに収録されているアイコンが利用できます。

色指定

見出しやコンテンツ内の文字色の調整ができます。

Google Map

Google Mapをカスタマイズすることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

一般

住所を指定します(日本語可)。
マップの倍率などを調整できます。

Icon List

FontAwesomeにあるアイコンをリスト表示させることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

Icon Count

リストの数を設定します。

Icon設定

アイコンの設定をします。
FontAwesomeに収録されているアイコンが利用できます。
リストにリンクを設定する場合はここで設定します。

一般

並び方やアイコン・ラベルのサイズを調整できます。

Info Box

画像やアイコンと一緒にテキストコンテンツを表示することができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

Layout

レイアウトを設定します。

Spacing

paddingやmarginを調整できます。

Background

背景を設定することができます。
設定できるタイプは、色、グラデーション、画像、動画です。

Shape Dividers

レイアウトの上下にデザインを設定できます。

Border

ボーダーのスタイルを設定することができます。

Marketing Button

LPで見るようなボタンを表示することができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

一般

リンクやリンク位置を調整することができます。
アイコンを入れる場合はここで設定します。
アイコンにはFontAwesomeに収録されているアイコンが利用できます。

Content

タイトルの設定や文字サイズ、文字色などを調整できます。
説明文の文字サイズや文字色もここで調整します。

Background

背景を設定することができます。
設定できるタイプは、透明、一色、グラデーションです。

Border

ボーダーのスタイルを設定することができます。

Multi Buttons

ブロック内に複数のボタンを表示させることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

Button Count

ボタンの数を設定します。

ボタン設定

ボタンの設定をします。
ボタンのタイプや文字を調整することができます。
リンクやボタンの文字サイズ、文字色などはここで調整します。

一般

フォントの設定を行います。
GoogleFontsなどのWebフォントサービスからデータは取得しているようです。

Post Carousel

投稿などのコンテンツをカルーセルを表示させることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

一般

カルーセルに使用する投稿を設定します。
投稿や固定ページ、ギャラリー、カスタムポストに対応しています。
タクソノミーやカテゴリーで表示させるものを絞り込むこともできます。

Carousel

カルーセルのデザインや動きを調整することができます。

画像

画像の表示非表示を切り替えることができます。

Content

投稿者、日付、コメント、抜粋の表示非表示を切り替えることができます。

Read More Link

続きを読むボタンの表示非表示を切り替えることができます。
切り替える場合はボタンデザインの調整をすることができます。

Typography

見出し(h1~h6)の設定や文字サイズなどを調整できます。コンテンツ内の文字サイズもここで調整します。

Colors

コンテンツの背景やタイトルカラーなど、色に関する調整はここでできます。

Spacing

paddingやmarginを調整できます。

Post Grid

投稿などのコンテンツをグリッドレイアウトで表示させることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

一般

グリッドレイアウトに使用する投稿を設定します。
投稿や固定ページ、ギャラリー、カスタムポストに対応しています。
タクソノミーやカテゴリーで表示させるものを絞り込むこともできます。

画像

画像の表示非表示を切り替えることができます。

Content

投稿者、日付、コメント、抜粋の表示非表示を切り替えることができます。

Read More Link

続きを読むボタンの表示非表示を切り替えることができます。
切り替える場合はボタンデザインの調整をすることができます。

Typography

見出し(h1~h6)の設定や文字サイズなどを調整できます。
コンテンツ内の文字サイズもここで調整します。

Colors

コンテンツの背景やタイトルカラーなど、色に関する調整はここでできます。

Spacing

paddingやmarginを調整できます。

Post Masonry

投稿などのコンテンツをMasonry(隙間なくタイル状)で表示させることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

一般

使用する投稿を設定します。
投稿や固定ページ、ギャラリー、カスタムポストに対応しています。
タクソノミーやカテゴリーで表示させるものを絞り込むこともできます。

画像

画像の表示非表示を切り替えることができます。

Content

投稿者、日付、コメント、抜粋の表示非表示を切り替えることができます。

Read More Link

続きを読むボタンの表示非表示を切り替えることができます。
切り替える場合はボタンデザインの調整をすることができます。

Typography

見出し(h1~h6)の設定や文字サイズなどを調整できます。
コンテンツ内の文字サイズもここで調整します。

Colors

コンテンツの背景やタイトルカラーなど、色に関する調整はここでできます。

Spacing

paddingやmarginを調整できます。

Post Timeline

投稿などのコンテンツをMasonry(隙間なくタイル状)で表示させることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

Query

使用する投稿を設定します。
投稿や固定ページ、ギャラリー、カスタムポストに対応しています。
タクソノミーやカテゴリーで表示させるものを絞り込むこともできます。

Layout

タイムラインレイアウトを設定します。

画像

画像の表示非表示を切り替えることができます。

Content

投稿者、日付、抜粋の表示非表示を切り替えることができます。
CTAボタンを追加する場合はここで設定します。

Timeline Item

見出し(h1~h6)の設定や、コンテンツ、日付、投稿者、CTAの文字サイズなどを調整できます。

Connector

アイコンを入れる場合はここで設定します。
アイコンにはFontAwesomeに収録されているアイコンが利用できます。
Timelineに使用される色設定はここで設定します。

色設定

背景色、日付、見出し、投稿者などの、色に関する調整はここでできます。

Spacing

paddingやmarginを調整できます。

Price List

価格表を表示させることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

一般

コンテンツの数とカラム数を設定します。

画像

画像を使用する場合はここで設定します。

区切り

区切り線のスタイルや太さ、長さ、色などを変更できます。

Typography

見出し(h1~h6)の設定や文字サイズなどを調整できます。
コンテンツ内の文字サイズもここで調整します。

色設定

タイトルやコンテンツなどの、色に関する調整はここでできます。

Spacing

paddingやmarginを調整できます。

Section

他のブロックを囲うためのラッパーの役割をしています。

Layout

コンテンツの横幅を設定します。

Spacing

paddingやmarginを調整できます。

Background

背景を設定することができます。
設定できるタイプは、色、グラデーション、画像、動画です。

Border

ボーダーのスタイルを設定することができます。

Social Share

SNS共有アイコンを表示させることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

Social Icon Count

追加したいSNSの数を設定します。

Social Share設定

追加したいSNSを設定します。
アイコンのスタイルもここで設定します。
アイコンにはFontAwesomeに収録されているアイコンが利用できます。

一般

並び方やサイズなどを設定します。

Team

メンバーやチームの紹介を表示させることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

画像

画像を設定できます。

Social Links

SNSの表示非表示を設定できます。
表示する場合は各SNSをここで設定します。

Typography

見出し(h1~h6)の設定や文字サイズなどを調整できます。
コンテンツ内の文字サイズもここで調整します。

色設定

タイトルやコンテンツなどの、色に関する調整はここでできます。

Spacing

paddingやmarginを調整できます。

Testimonial

お客様の声をカルーセル表示させることができます。

投稿画面はこのような感じになっています。
各パラメータは以下になります。

一般

コンテンツの数とカラム数を設定します。

Carousel

カルーセルのデザインや動きを調整することができます。

画像

画像を設定できます。

Typography

見出し(h1~h6)の設定や文字サイズなどを調整できます。
コンテンツ内の文字サイズもここで調整します。

色設定

タイトルやコンテンツなどの、色に関する調整はここでできます。

Spacing

paddingやmarginを調整できます。

Background

背景を設定することができます。
設定できるタイプは、色、画像です。

Border

ボーダーのスタイルを設定することができます。

まとめ

いかがだったでしょうか。
長くなってしまいましたが、本当に誰でも簡単にビジュアルスタイルの設定とカスタマイズができることをお伝えしました。

デザインを調整したいけどHTMLやCSSがちょっと・・・なんていう方も、すぐに自分の思い通りのデザインを作ることができると思うので、ぜひ試してみて下さい!

関連記事

【Webサイト高速化】Xアクセラレータ導入前と後の比較をしてみた...

【Gutenberg超拡張】Snow Monkey Blocks...

【WordPress】次世代フォーマット(WebP)での画像配信...

WordPressユーザーは早く「Gutenberg」に乗り換え...

「Xeory Base」をカスタマイズしてブログを始めます

  • このエントリーをはてなブックマークに追加