【機能拡張】Advanced Gutenberg でできる22種類のこと【表示例付き】

Advanced Gutenberg22種類のできること

WordPressプラグイン「Advanced Gutenberg」でできることを、表示例付きで簡単にまとめた記事になります。
細かい説明は一切省いて、

考える人

とりあえずどんなことができるかだけ知りたいんだけど

といった人向けとなっております。

それでは早速みていきましょう!

Accordion Item

この文章はダミーです。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

アコーディオンが設置できます。
・文字色、背景色、開閉のアイコンなどを変更できる。
・最初から開閉のアニメーションが付いているからうれしい。

Advanced Button

ボタンを設置できます。
・背景色、文字色、パディング、マージンなどを変更できる。ボタンを任意の大きさにすることが可能。
・ホバー時のシャドーを変更できる。

Advanced Icon

beenhere
access_alarm
add_a_photo
g_translate

アイコンを設置できます。
アイコンの色、背景色、サイズ、などを変更できる。
種類が豊富。

Advanced Image

ここに表示されているテキストは

配置を変更できます

画像に文字をのせることができます。
・リンクさせることができる。
・文字色、文字の位置、背景画像、背景画像の透明度、などを変更できる。

Advanced List

  • この文章はダミーです。
  • この文章はダミーです。
  • この文章はダミーです。

アイコンを付けたリストを作れます。
・14種類のアイコンから好きなものを選べる。
・アイコンサイズ、行間隔、マージン、パディングなどが変更できる。

Advanced Table

この文章はダミーです。この文章はダミーです。この文章はダミーです。
この文章はダミーです。この文章はダミーです。この文章はダミーです。
この文章はダミーです。この文章はダミーです。この文章はダミーです。
この文章はダミーです。この文章はダミーです。この文章はダミーです。

テーブルが作れます。
・文字色、背景色、テーブルの最大横幅などが変更できる。

Advanced Tabs

Tab 1

この文章はダミーです。

Tab 2

文字の大きさ、量、字間、行間等を

Tab 3

確認するために入れています。

タブが作れます。
・文字色、背景色、アクティブなタブの背景色を変更できる。
・タブの中にさらにブロックを配置できる。

Advanced Video

動画を埋め込むことができます。

Advanced Column

好きな

カラムで

区切ることが

できます。

カラムを区切ることができます。
・PC、タブレット、モバイルごとのカラムを指定できる。
・カラムの間隔をpxで指定できる。
・パディング・マージンを指定できる。

Contact Form

コンタクトフォームを作れます。ですがたぶん使いません。

Count Up

Header text

100000

and description

カウントがどんどん上がっていくブロックを作れます。
・数値、文字サイズ、カラム数などを変更できます。

Images Slider

Slider image

ここのテキストは

変更できます

Slider image

3枚め

Slider image

2枚目の画像

スライダーを設置できます。
・リンクさせることができる。
・テキスト、テキストの配置を変更できる。

Info Box

beenhere

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

情報を伝えるブロックをアイコン付きで設置できます。
・ボーダー、背景色、アイコン、パディングなどを変更できる。

Login/Register Form

WordPressへのログイン画面を作れます。

Map

グーグルマップを設置できます。
・APIキーの取得が必要である。
・個人的にマップをカスタムHTMLで埋め込んだほうが早いと思うので使いません。

Newsletter

メールアドレスを収集するためのブロックを作れます。
・文字色、背景色などを変更できる。
・収集されたデータはCSVでダウンロードできるので便利。

Recent Posts

最近の投稿を設置できます。
・投稿数、カテゴリ、並び順、カラム数を決められる。

Search Bar

検索窓を設置できます。

SNSへのリンクをアイコンで作れます。
・サイズ、色、間隔などを変更できます。

Summary

h2,h3見出しが表示され、概要を表示できます。

Testimonial

Person Name

Job Position

A little description about this person will show up here.

プロフィールを設置できます。
・文字色、カラム数などを変更できる。

Woo Products

WooCommerce に登録された商品を表示させます。
たぶん使いませんので、試してません。

まとめ

記事を書きながら機能を試しましたが、以外に細かいところにも融通がきくので便利そうだと感じました。
これならCSSが書けない人でも、このプラグイン「Advanced Gutenberg」を使えばそれなりにいい感じのサイトを作れちゃうと思います!

この記事では簡単にしか紹介していないので、気になる人はご自身でプラグインをインストールして使ってみるか、他の方の詳しく解説してある記事を読んで下さい。

お疲れさまでした( ´∀`)bグッ!

この記事を書いた人

けーた

高校卒業してから15年間勤めた会社を退職→脱サラしてWeb制作。
現在はWordPressサイト構築とShopifyストア構築をメインに、副業で物販をやっています。