theme現在のところ、グーテンベルグのためのテーマが公式に発表されていないので、デフォルトテーマで試されているようです。グーテンベルグのコア実装が近づくにつれ、グーテンベルグブロックの作成等、技術的な関心が深まっているように思いますが、グーテンベルグを適用した場合に、サイトの見た目が変更されたりしないかどうかチェックしておくといった作業も必要と思いますので、簡単なメモを残したいと思います。フロントエンドでは、多かれ少なかれ、スタイルの干渉は発生する既存テーマは、グーテンベルグが実装されたときに、生き残れるのだろうかと心配している。グーテンベルグの諸機能を実際にテーマで表示しようとしても、グーテンベルグをサポートするテーマはなかなか見つかりませんし、プラグインを有効にしただけでは、メディアクエリーを新たに追加するなどしないと、モバイルではうまく表示できなかったりします。クラッシックエディタを使い続けることもできますが、どちらをとるかは簡単に決められないと考えている人も少なくないと思います。グーテンベルグを選んだ場合、どのくらいの手間をかけると、自分のサイトがうまく動くようになるのか、見積もっておくといいかもしれません。);次のような、スタイルが追加される。/>中身は、(gutenberg3.7)以下のような、色とボーダーの指定が含まれる。色や枠線は、テーマのCSSとコンフリクトしやすいため、ブロック構造をコントロールするCSSと分離されています。コンフリクトするわけです。コンフリクトするのか?ブロックには、wp-block-ブロックタイプといった。特有のクラスがセットされ、そのブロッククラスに対してスタイルが指定されているため、コンフリクトしないはずですが、Gutenberg以前(現在のテーマ)の場合、多くは要素に対してスタイルが指定されます。投稿本文はメニューやサイドバーを除けば、ノードの深さはHTMLの最も深いところにあり、上位ノードに指定されたスタイルの影響を受けやすくなっています。blockquoteならば、左側にボーダーの指定がよくあります。幅も色も、テーマによって異なります。gutenbergのblockquoteのタイプに、pullquoteというタイプがありますが、グーテンベルグは、上下にボーダーをセットします。なると、blockquoteのボーダーは、逆コの字のボーダーがついてしまいます。テーマがサイドバーをサポートしているような場合は、テキストウィジェット用のスタイルと、投稿本文用のスタイルを別に持っているかもしれません。なんてクラスがついていれば)それぞれのスタイルは干渉せずに済みますが、要素をターゲットにしてスタイルが指定されている以上、ある程度の干渉は避けられないのです。gutenbergは、この点について2つのスタイルシートをロードすることで、できるだけコンフリクトしない工夫をしていますが、テーマやプラグインで、詳細度の高いスタイル指定がされている場合は、marginやpadding等基本構造を指定しているようなプロパティでも、コンフリクトは発生するでしょう。グーテンベルグが、より影響の少ないスタイル指定を模索すればするほど、ぱっと見で壊れていないスタイル(運営者や、テーマ製作者は、目が慣れてしまっているため)も、微妙に問題を含んだ厄介なスタイルの見直しが発生する可能性はあるのではないかと思います。ネガティブな情報を提供するつもりはありません。それに出会ったら「やっぱりいたか」ぐらいの軽い気持ちで、乗り切っていきましょう。ブロックには特別なクラス名をつけて、スタイルをしているため、ドンと大きく崩れて、読めなくなるといった事ではなく、運営者からは、目の届きにくい部分で、特定の要素のデザインが壊れるといった事柄です。WordPress/gutenberg7/13追記テーマ用に準備されているブロックエディタ関連の機能add_theme_support()という関数を使って、コアで準備されている機能を有効にすることができます。WordPress5.0では、以下の機能が準備されています。いったアスペクト比を表すクラスが追加されます。この機能を有効化すると、body要素に、wp-embed-responsiveクラスが追加され、アスペクト比を表すクラスのスタイルが有効になります。200%}有効になるスタイルは、おおむね上記のようなスタイルです。メディアによっては、複数のアスペクト比を持つものなどもありますので、これを有効にするとみんなOK!というわけにもいかなそうなので、テーマでの検証は必須です。align-wide有効にすると、ブロックエディタに広幅用のボタンが追加されます。このボタンを使う事で、alignwide,alignfullクラスがブロックに追加されるようになるので、テーマでは、それに見合うスタイルを追加することになります。dark-editor-style有効にすると、ブロックエディタのbodyに、is-dark-themeというクラスが追加され、黒系の背景で、ツールバーが適切に表示されるようスタイルが調整されます。transparent}disable-custom-colorsカラーパレットを、使用できなくします。disable-custom-font-sizesブロックエディタの、カスタムフォントサイズを使用停止します。editor-color-palleteカラーパレットを有効にします。editor-font-sizesカスタムフォントサイズを有効にします。editor-stylesブロックエディタで、ユーザースタイルを有効にします。wp-block-styles色と枠線のコア標準のスタイルを有効にします。主要なものを見ていきましょう。ブロックエディタの目玉functions.phpで、align-wideを有効にすると、コンテンツ幅を上回る幅で、画像やギャラリーを表示できるようになります。);この機能のスタイルは、それぞれのテーマでCSSを調整することになります。TwentySeventeenで有効にしてみましょう。テストは、サイドバーのない固定ページで試してみてください。);functions.php二畳紀の設定を追加すると、グーテンベルグエディタの、画像ブロック、ギャラリー、動画等のブロックに「全幅、幅広」といったボタンが追加されます。このボタンを選択した場合、それぞれのブロックには、aliginwide(幅広の場合)、fullwidth(全幅の場合)というクラスが追加されます。style.cssに以下のサンプルスタイルを追加します。-100px;max-width:100vw;}以上で、TwentyseventeenのPC(画面サイドバーなし)では、全幅で表示されるようになります。ブラウザ幅が小さい時、サイドバーありの調整は別途行ってください。$content_widthです。width:100vw;を指定すると、entry-contentの左端から表示されるので、100vwと$content_widthから、ネガティブマージンの量を計算して、ブラウザ左端から表示するように調整しています。同様のことを、テスト用のサイトに適用すると、ご自身のテーマでどのような感じになるのか、感覚がつかめるのではないかと思います。WordPress.orgというプラグインで、インストールすると、一通りのブロックを表示するページが自動的に作成されるといったものもありますので、お手軽に試験もできそうです。テキストカラーをテーマ側でカスタマイズ可能にするために、カラーパレットをテーマ独自のものに変更する機能があります。以下のように、カスタムカラーを指定できます。指定した色は、テキスト色と背景色として反映します。'#eeeeee',)));それ以外に、カラーピッカーで選択できる項目も追加されます。前景色は、インラインスタイルで追加されますが、カスタムカラーの場合は、slugを含んだカラークラスが追加されますので、それらのクラス用のスタイルをテーマで追加する必要があります。クラス名は、以下のようなパターンで追加されます。{background:#{$color};}段落のフォントサイズのカスタマイズグーテンベルグのデフォルトの段落要素のフォントサイズは、ちょっと大きめなので、カスタマイズをしておくといいかもしれません。functions.phpに以下のように追加します。クラスを追加する必要があります。(段落で、フォントサイズを「カスタムサイズ」で指定した場合は、クラスではなく、インラインスタイルでフォントサイズが指定されます。)フォントサイズクラスのクラス名パターンは、以下のようになります。{font-size:サイズpx;}カラーパレットや、フォントサイズのクラスは、エディタの詳細/追加CSSクラスで、直接クラスを指定することもできますので、見出しタイトル等でこれらのクラスも使用することができるので、うまく使うことで、統一感のある指定ができるかもしれません。工夫しておくと便利かもしれません。iconの仕組みと、チャイルドテーマでのカスタマイズ。»コメントは受け付けていません。現在このサイトは、WordPressのRaindropsテーマ(のチャイルドテーマ)を使って、このテーマでそれぞれのスタイルルールが正常に動作する事を確認し、テーマのアップデートのための基礎的な資料とする事が主な役割になっています。他のサイトで公開しているスタイルルール等をこのサイトで再現して投稿本文内で適切に表示できるかどうかもテストしていますので、コピーコンテンツもあります。そのようなコンテンツについては、参照元へのリンクを添付してありますので、そちらをご覧いただけますようお願いします。Raindropsテーマは、投稿、ページ毎に配色、フォント、レイアウト、カスタムCSSを適用可能な、他に類例のないテーマです無償テーマでは、珍しく取扱説明書も充実し、初心者から、プロフェッショナルまで、ユーザーを選びませんこのブログで適用されているスタイルのほとんどは、投稿ページのCSSエディタだけで記述されています。scoped属性を使ったように、その投稿だけに適用されます。個別投稿のスタイルは、アーカイブなどのループページでも、正確に反映させることが出来ます一般に、CMSを使った投稿やページは、一定のレイアウト、一定の配色という制約の中に、埋め込まれます。