Gutenberg向けカスタムブロックテンプレート集

Ultimate Gutenberg を入手して、Gutenbergを使った編集体験を改善しましょう。

Ultimate Gurtenberg Thumbnail

Gutenbergを使った編集体験の向上・豊富なプロパティコントロールパネル・豊富なカスタムデザイン

細かいところまで! 自由度を追求したカスタムブロック

GutenbergはHTMLの知識がなくてもコンテンツを楽に作成できるようにする優れたツールですが、一方でHTMLを直接編集できず、CSSの設定パネルが不十分である場合はほとんどのため、自由なレイアウトを実現することは不可能です。私たちは各プロパティを自由に編集することができるように、Gutenbergを進化させる必要がありました。

ug Customize image

ご迷惑をおかけしないための3つのお約束

縮小されたインラインCSS

出力される全てのインラインCSSは縮小された状態で出力されます。

AMP対応を意識

AMPの条件であるCSS容量(75kb)を超えるケースを抑えるために、Ultimate Gutenbergが出力するCSSは最低限になるように設計しています。

コアブロックへの干渉なし

Ultimate GutenbergはWordPressコアのブロックには手をつけていません。

 カスタムブロック

Ultimate Gutenbergが最も意識しているのはデザインです。豊富な機能も編集の自由度もあなたの記事を閲覧するユーザーには関係ありません。
ユーザーがあなたのコンテンツを読むか読まないかを決めるのは、美しいレイアウト、そしてデザインです。

RichTextコンポーネントが生まれ変わります

アイコン・特殊文字

文中にアイコンを適用してページをお洒落にしましょう

背景色

テキスト色を変える方法はWordPressコアが用意しています。背景色に対しては、私たちが用意しました。

略語

用語名に略称がある場合に略語を付加するタグを適用します。

RichText-before@2xRichText-after@2x

Google 構造化マークアップに対応しましょう

GutenbergはHTMLの知識がなくてもコンテンツを楽に作成できるようにする優れたツールですが、一方でHTMLを直接編集できず、CSSの設定パネルが不十分である場合はほとんどのため、自由なレイアウトを実現することは不可能です。

私たちはこの問題に対応するため、Elementorのように各プロパティを自由に編集することができるように、Gutenbergを進化させる必要がありました。

Google Image Object

SEOをより意識したコンテンツ作りを心がけたいですか?Ultimate Gutenbergはその要望に応えます。

WordPressコアが用意する画像ブロックはGoogle構造化マークアップを適用していないため、SEOを意識したコンテンツ作成を意識した場合、役不足です。

Google Image Objectブロックを利用することで、画像にGoogle構造化スニペットを付与することができます。より柔軟にデザインを調整できるようにしました。

Google How To

Google How Toスニペットをご存知ですか? Googleは「~のやり方」のようにステップ形式で記述できるような説明に対する専用のマークアップ構造を用意しています。

Google How ToまたはGoogle How To Sectionスニペットを使ってコンテンツを作成すると、検索結果内で、あなたのページが強調されて表示されます。

まだ対応している人はほとんどありません。今のうちに取り組んでおきましょう。

カスタムブロック

Gutenbergの編集体験を進化させましょう