CSSそろそろ、グーテンベルグ最近、グーテンベルグという言葉がWordPress界隈で、時々ささやかれ始めています。2.0)導入された、WYSIWYGエディタは、進化しつつも、長い間、このインターフェースを使い続けてきたわけですが、このエディタ―の機能を拡張して、入力方法や動作を全面的に見直して行こうというのが、Gutenbergプロジェクトです。経由で処理されるようです。等のアクションフックや、フィルター類が使えなくなったり、入力方法を一から、学び直さなければならない。いった、新しい課題が増えるために、賛否両論あるようです。プラグインの開発者、WordPressに関わる全ての人に影響がありそうです。グーテンベルグを入手して、どんな変化が起きるのか確認してみましょう。英語が下手なので、原文も残してあります。hoverすると読みやすくなります。検索してインストールしますアクティベート後の注意このプラグインをアクティブにすると、従来のエディタは表示されなくなります。投稿一覧の一番上に、クラッシクエディタで作成するボタンがあります。作成している記事は、記事が壊れることもありそうなので、グーテンベルグで開かないようお勧めします。グーテンベルグで作成した記事は、プライベートにするなどあくまで、修行用?としてテストするといいと思います。Demo画面を見てみようプラグインをインストールすると、管理画面のGutenbergのリンクの中に、デモという項目があり、クリックすると以下のようなdemo表示が行われますこの新しいエディターの目標は、WordPressにリッチなコンテンツを簡単かつ楽しく追加することです。記事全体は、チョット、LEGOブロックみたいなブロックで構成され、このブロックは、前後に移動したりすることも出来ます。それぞれのブロックコンテンツにカーソルをあてると、コンテンツのアウトラインと矢印で表示される事に気づくと思います。矢印を押すと、コンテンツをすばやく移動できます。コピーや、従来のビジュアルエディター、テキストエディタの移動などで、コンテンツが消失してしまう事を心配する必要はなくなります。pasting.あなたが、読んでいるこのブロックはテキストブロック(段落)ですが、これは、すべてのブロックの中で最も基本的なブロックです。このテキストブロックは、テキストをを左、中央、右寄せする独自の機能を持っています。post...これは、右寄せしたテキストブロックです。Words新しいエディタの主な焦点は、画像とメディアの取り扱いに最大限の注意を払っています。toolbar.キャプションを選択したり削除したり編集したりしてみてください。誤ってイメージやその他のテキストを選択することに注意する必要はなく、プレゼンテーションを台無しにすることもありません。presentation.管理画面で開いたデモページと比べてみるとわかるのですが、画像の幅は、四隅の青いところをクリックして、ドラッグすると自由に変更することが出来ます。画像ファイルを編集画面にドラッグすると、アップロードします。二つ以上の画像を選択して、ドラッグドロップすると自動的にギャラリーとして、張り付くのでとっても簡単。Tool編集中のコンテンツブロックに、インサーターツールが表示されることを想像してみてください。HTMLタグ、クラスを理解したり、複雑な短いコードの構文を覚える必要はありません。インサータツールのエディタの周りに表示される+ボタンを使用すると、使用可能なすべてのコンテンツブロックをブラウズして投稿に追加できます。プラグインとテーマは独自のものを登録することができ、豊富な編集や公開の可能性を広げます。あなたの記事にすでに追加できることを発見するかもしれません。あなたが現在そこで見つけることができるものの短いリストがあります。🙂ビジュアル編集エディターは、HTMLソースを表示するのではなく、実際に表示されるコンテンツを表示する。HTMLブロックで入力した場合も、ブロックのプリビューが可能。Editingブロックの大きな利点は、それらを適切に編集してコンテンツを直接操作できることです。)のHTMLソースやボタンのテキストなどのフィールドを編集する代わりに、コンテンツを直接変更することもできます。2017クウォートの情報は、別のテキストフィールドにあり、画像のキャプションと同様に、ソースを選択、変更、または削除しても、クウォートの構造は保護されます。いつでも簡単に戻すことができます。back.ブロックは必要なものにすることができます。テキストの構成の一部としてシンプルな引用を追加したり、巨大な抜粋表示したりすることができます。これらのオプションはすべてインサータで利用できます。テーマでは、この拡大機能を停止しています。カラム数とサイズによっては、ブラウザの高さを超えるような画像が表示されるためですが、テーマそれぞれに、ふさわしい表示の仕方があるのかもしれません。サイドバーのブロックインスペクタでスライダをドラッグすると、ギャラリーの列数を変更できます。画面いっぱいに、メディアを表示するための設定ボタンはデフォルトでは表示されません。このボタンを表示するためには、テーマのfunctions.phpで以下のように設定する必要があります。Classの項目にalignwideやalignfullを指定しても、多分大丈夫です。Gutenbergで、alignwideやalignfullをしていても、必ずしもページぴったりのサイズで表示されないかもしれません、テーマのHTML構造に左右されるケースが多々あります。Close新しいwideとfull-wideをギャラリーと組み合わせると、メディアリッチなレイアウトをすばやく作成できます。quickly:確かに、全幅画像は大きすぎるかもしれません。使いどころはあります。it.上記は2つの画像だけのギャラリーです。これは、CSSフロートプロパティを使わず、視覚的に魅力的なレイアウトを作成する簡単な方法です。ブロックスイッチャーを使用して、ギャラリーを個別の画像に簡単に戻すこともできます。switcher.いずれのブロックもこれらのアラインメント(右揃え、左揃え、中央配置)を選択することができます。box:あなたは、静的または動的、装飾的または平凡な任意のブロックを構築することができます。community追加のブロックを構築する方法や、プロジェクトに協力したい場合は、GitHubリポジトリに移動してください。見出し、といった単純なブロックを操作するのには便利でしたが、入れ子になったようなブロックを記述するにはテキストモードで行う事がほとんどで、HTMLやCSSがよくわからないといった人たちには、すごい難しい事だったと思います。gutenbergだと、編集画面の必要な場所に、画像を2枚以上ドラッグすると、自動的にギャラリーとして、貼り付きます。いう、ちょっとかっこいい配置がドラッグするだけで、自動アップロードされ、貼り付きます。HTMLやCSSが書ける人にとってはどうでしょう。HTMLで記述して、プリビューが出来るのは素晴らしいですし、ブロックごとにクラスが記述できるは、便利です。従来は、エディター一つで編集作業が行われていましたが、Gutenbergの編集画面では、段落ごとにエディタが作られています。TinyMCEになれている人からすると、入力速度は従来よりも低下したりするかもしれません。投稿全体をコピーする機能もありますが、「作業中にクラス名を置換したい」なんて場合は、手間がかかるようになるのかもしれません。テーマでは、styleをdata-rd-styleといったdata属性にに変更したりしています。テーマ的には、グーテンベルグから、TinyMCEにスイッチしても、それをまた、グーテンベルグで開いても、同様の表示を可能にするための工夫に取り組んでいます。GithubNoteプラグインの更新のたびに、HTML構造、CSSクラス名などが頻繁に書き換えられるので、注意が必要です。グーテンベルグを使って書いた記事を、グーテンベルグをでアクティベートして表示すると、記事のレイアウトが崩れたりします。(グーテンベルグのコメントと、改行がp要素でラップされることによる)ので、あくまで修行用?としておいたほうが良さそうです。»コメントは受け付けていません。現在このサイトは、WordPressのRaindropsテーマ(のチャイルドテーマ)を使って、このテーマでそれぞれのスタイルルールが正常に動作する事を確認し、テーマのアップデートのための基礎的な資料とする事が主な役割になっています。他のサイトで公開しているスタイルルール等をこのサイトで再現して投稿本文内で適切に表示できるかどうかもテストしていますので、コピーコンテンツもあります。そのようなコンテンツについては、参照元へのリンクを添付してありますので、そちらをご覧いただけますようお願いします。Raindropsテーマは、投稿、ページ毎に配色、フォント、レイアウト、カスタムCSSを適用可能な、他に類例のないテーマです無償テーマでは、珍しく取扱説明書も充実し、初心者から、プロフェッショナルまで、ユーザーを選びませんこのブログで適用されているスタイルのほとんどは、投稿ページのCSSエディタだけで記述されています。scoped属性を使ったように、その投稿だけに適用されます。個別投稿のスタイルは、アーカイブなどのループページでも、正確に反映させることが出来ます一般に、CMSを使った投稿やページは、一定のレイアウト、一定の配色という制約の中に、埋め込まれます。