2020年1月20日ツイートシェアB!はてブポケット「Gutenbergをより使いやすくしよう!」ということで、標準のGutenbergの機能からさらに上乗せして、ページを作成する時のポイントをまとめました。Gutenbergとは、WordPressの新しいブロックエディタで詳しくは以下で紹介しています。Gutenberg(グーテンベルク)の基本的な使い方とブロック要素まとめはにわまん直感的に「いい感じの」デザインが出来上がっていくのがGutenbergのいいところだと思います。おわりWordPressのGutenbergをより使いやすく方法!WordPressのGutenbergをより使いやすく方法を5つほどまとめました。個人的には「追加CSS」「ブロック拡張プラグイン」をよく使います。「高度な設定」の追加CSSを使いこなす用意されているグーテンベルクの表示だけで表現できない場合は、追加でクラスを入れてデザインを上書きすることで作っていきます。ブラウザのデベロッパーツールが見れて、かつHTML、CSSが扱える人なら該当の要素を見ながら、好きなようにカスタマイズできるはずです。自分がよくやる設定としては、表の右側の列だけを見出しっぽく表現するという方法。標準だとthが使われないので、無理やりCSSで変更するサイトを多く見ます。テーブルを選択して、右側の「高度な設定」から追加CSSを「table-type--left-head」という名前で入れてみます。このクラスからテーブル内の最初の列を上書きするデザインを当ててあげればOKです。100px;}例えば、上記のような感じで指定してあげて実際の表示を確認すると、書き換わっていることが分かります。ちなみに、今は表示側だけしかCSSが適応されていないと思いますが、エディタ上でも再現するには「Gutenbergにエディタ用のCSSを適応する」を追記してあげてください!こんな感じで、CSSが扱える人であれば、追加CSSでデザインを用意してあげるのも1つの方法となります。Gutenbergのブロック拡張プラグインを入れるGutenbergは標準だとWordPressが用意したブロックしかありません。このブロックを拡張するプラグインがいくつかあって、「もっとこういうブロックあったらいいのにな」っていう標準のブロックで物足りない部分をカバーしてくれたりします。いくつかあるので、使いたいブロックが見つかれば導入してみて試してみるといいかと思います。複数使ってもクラスが被らないようには設計されているはずです。Gutenberg標準のGutenbergで微妙に足りていなかった部分を大きく補ってくれます。Gutenbergになり機能性が下がった(ように自分は感じている)の代表がテーブルだと思っています。そこを大幅に拡張してくれるプラグインです。部分的な背景色の変更など、個人的に「なぜできない...」って思っていた部分を大幅にカバーしてくれます。こんな感じで、かゆいところに手が届くといいいますか、足りないなって思う部分を補ってくれるプラグインなので、ぜひ試してみてください。Monkey」に適応するように設計されたGutenbergブロック拡張プラグインです。豊富に機能があって、特に以下の点で優れていてわたしは好きです。グリッドレイアウト記事取得マーカーGutenberg標準にもグリッドの仕組みはあるのですが、余白の感じとかレスポンシブの感じがめちゃくちゃ微妙です...。Blocksは、「そうそうこの動き!」みたいな動きをしてくれます。GutenbergプラグインWordPressテーマ「SANGO」のパーツをGutenbergで使えるようにしたものです。以下の「プラグインをインストール」からダウンロードできます。SANGOでGutenbergエディタを使う方法と注意点SANGO特有の柔らかくて視認性の高いデザインを簡単に表現できるプラグインになります。「SANGO」との相性がいいのはもちろんですが、「SANGO」の雰囲気に近いようなサイトでも十分に活躍できると思います。オリジナルなGutenberg用ブロックを作るGutenbergではオリジナルブロックをいくつでも追加することができます。技術的には、WordPressの仕組みやReactやJavaScriptについて理解していないといけないので、作成するハードルは高いです。Lab」というプラグインを使えば、めちゃくちゃ簡単にオリジナルなブロックを作成することが可能です。Lab」が凄い...!コード書けなくても管理画面からブロック作り放題です。埋め込みは「カスタムHTML」WordPressがサポートしていないiframeなどの埋め込み要素の場合は、基本的には「カスタムHTML」でいいのかと思います。「カスタムHTML」に入れておくと、埋め込み要素もふつうに認識してくれます。「プレビュー」というボタンがあるのですが、こちらをクリックするとiframeの中身も確認できるのでHTMLタグで入力はするものの、確認時の視認性は悪くなかったです。縦横比を固定したようなレスポンシブ対応が難しいと思うので、JavaScriptなどでレスポンシブ用のdivタグなどを親要素として囲ってあげるような仕組みにしました。コピペで簡単!Webパーツ屋Gutenbergにエディタ用のCSSを適応するGutenbergのエディタの初期表示は、WordPressが用意した標準のCSSでの見栄えとなります。実際の表示がWordPressのデフォルトのままというケースはないはずなので、サイトごとの表示用のCSSを適応するのがいいかと思います。functions.phpに以下の記述を追記してあげてください。add_theme_supportでエディタ用のスタイルを適応させる宣言をしたあとに、エディタ用のスタイルとして適応させるCSSを記載するファイルへのパスを指定してあげます。);追加CSSの時にテーブルの例を出しましたが、表側の表示しか反映されていませんでしたが、上記のコードを書いてcss/editor.cssに.table-type--left-headに関するCSSを指定してあげると、Gutenbergのエディタ上でも再現されるようになることが分かります。@haniwa008WordPressのGutenberg(グーテンベルク)をより使いやすく方法をまとめました。大きくは以下の3つですね。「高度な設定」の追加CSSを使うGutenbergのブロック拡張プラグインを使うGutenbergにエディタ用のCSSを適応するGutenbergは慣れるまでが大変かもしれませんが、使いこなせれば色んな表現のコンテンツを簡単に作成することができるようになります。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。【すぐできる】Wimax(モバイルWi-Fi)を固定IPにする方法はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。