デモコンテンツをダウンロードします。リンクをクリックし、「ダウンロード」を選択してください。Importer」を使用してデモコンテンツをインポートします。基本のルールとして、セットアップでは各プログラムの最新バージョンを使用してください。この記事の公開後もバージョンは更新される可能性がある点に注意してください。既知の問題この記事の作成中に、いくつかの問題が発生しました。同じ問題に遭遇するかもしれませんが、これらの問題は報告されていますので安心してください。以下に大きな問題をいくつか挙げます。ナビゲーションブロックをカラムブロックの中に配置すると、余白が崩れてブロック内の項目の間隔が狭くなります。テーマでは、検索ブロックの背景色が、フロントエンドで設定されません。テストする十分な時間がない方のためのテスト方法です。このテスター募集は特定の機能をテストすることに焦点を当てていますが、ベータ機能をテストする過程で他のバグを見つけることもあると思います。見つけたバグは、たとえそれがテストしている機能に直接関係なくても、テストレポートにぜひ含めていただければと思います。(ベータ)」をクリックします。自動的にサイトエディターが開き、ホームページに使用されているテンプレートが表示されます。ホームページを開いたら、「ヘッダーテンプレートパーツ」の内部ににある「ナビゲーションブロック」を削除してください。後の追加のために、ヘッダーをリセットします。親の「カラムブロック」を選択し、サイドバーの「ブロック設定」を使用して、カラムを2列から3列に変更します。カラムブロックに戻り、「ブロックツールバー」の設定で、「全幅」になっていることを確認します。サイトブランドの作成1列目に「サイトロゴブロック」を追加し、サイトのロゴをアップロードします。ゴを使用してください。(フォントの変更、色の変更、配置の変更など)。Update」にリンクします。記事は投稿のタイトルを検索すれば見つかります。必要なデモコンテンツをまだインポートしていない場合は、このエクスポートファイルのリンクを開いて「ダウンロード」を選択し、インポートしてください。上位レベルの項目のシンプルなメニューの作成3列目に「ナビゲーションブロック」を追加し、「空から始める」オプションを選択します。「固定ページリンクブロック」を使用して、インポートしたコンテンツの中から以下のページを追加します。追加するには、各ページのタイトルの最初の数文字を入力すると表示されます。11.3で修正予定のスペーシングのバグに気づかれるでしょう。Donation」を短く「Donate」に変更します。これには、固定ページリンクブロックのテキストを編集します。(背景色、テキストの色、幅など)。メインメニュー項目を配置したら、ナビゲーションブロック全体を再度選択し、サイドバーの設定の「表示設定」で、「レスポンシブメニューを有効化」オプションをオンにします。必要であれば、この時点で、ブロックのスタイルをカスタマイズすることもできます。複雑な仕様のメニューの作成3つのカラムを含む全体の「カラム」ブロックを選択します(ここでリストビューが役に立つかもしれません)。メニューの「その他の設定」で「後に挿入」を選択し、後にブロックを追加します。カラムブロックをもう1つ追加し、30/70オプションを選択します。カラムブロック全体を選択し、ブロックツールバーの設定で「全幅」になっていることを確認します。幅70%の大きなカラムにナビゲーションブロックを追加し、「空から始める」オプションを選択します。「固定ページリンクブロック」を使って、取り込んだコンテンツの中から以下のページを追加します。追加するには、各ページのタイトルの最初の数文字を入力すると表示されます。メインメニュー項目を配置したら、もう一度ナビゲーションブロック全体を選択し、サイドバー設定の「表示設定」で「レスポンシブメニューを有効化」オプションをオンにしてください。サブメニュー項目を追加します。ヒントが必要な方のために、こちらがサブメニュー項目を追加するためのアイコンのスクリーンショットです。以下のサブメニュー項目が必要です。Inclusion、Faculty、History、Leadership。以下のサブメニュー項目を追加してください。Aid、Tuition。以下のサブメニュー項目を設けます。以下のサブメニューを用意してください。Opportunities、Tutoring、Services。いうサブメニュー項目を追加します。サブメニュー項目を追加したら、様々なサブメニュー項目を自分の好みに合わせて再配置し、名前を変更します。ように、メニュー項目を並べ替えられます。存在していないページを追加したい場合は、現在サイトに存在していないタイトルを入力することで追加できます。そこから、下書きページを作成するオプションが表示されます。これを少なくとも1つのメニュー項目に対して行います。この作業をお楽しみください。高等教育がテーマの内容にすることをお忘れなく。(配置、色、フォントサイズなどの変更)。サブメニューの項目については、オーバーレイの色設定を使って好きな色を設定できることを覚えておいてください。作業内容を保存してさらにカスタマイズしましょう。「保存」を選択して変更を保存し、フロントエンドでサイトを表示します。エディターで表示される内容とフロントエンドで表示される内容の違いを確認してください。下書き状態のページがある場合は、メニューに表示するために公開する必要があります。モバイル端末でサイトを表示し、メニューがハンバーガーメニューとしてレスポンシブ表示されるかどうかを確認します。ここからは、配置や色、文字サイズの変更、項目の削除・並べ替え・再配置など、自由にカスタマイズしてください。スペーサーやソーシャルアイコンなどのブロックをナビゲーションブロックに追加することもできます。上級者向けのテスト方法このセクションは、テストをさらに続ける時間があり、ガイドなしでもサイトエディターを使える方向けのテストです。このセクションのテスト方法は簡単です。既存の大学サイトのヘッダーの全部または一部を再現してみてください。(違うテーマを使用する場合は注意してください)。上に挙げた大学を利用しても良いですし、自分で探してもいいでしょう。コメントを残す際には、自分が何をしようとしていたか、そして何ができたかを示すスクリーンショットを共有してください。みなさんが何を実装しようとしているかを知ることはとても参考になります。自由な発想とデザインを遠慮なく、共有してください。できる限り詳しく説明してください。ようなツールでテストサイトを実行して、動きを確認してみてください。フィードバックをお願いします(2021年9月1日まで)この投稿にコメントでフィードバックをお願いします。作成いただくのでも構いません。フィードバックした場合は、以下にリンクを貼ったコメントを残してください。誰かが同じ問題を報告している場合でも、是非、あなたの体験を追記してください。体験に取り組んでいる私たちが何を改善すべきか包括的な洞察を与えてくれます。Theme.json」を訳したものです。誤字脱字誤訳などありましたらフォーラムまでお知らせください。アウトリーチプログラムのテストではサイトの制作者やエンドユーザーを対象としてきましたが、今回のテストは意図的に開発者をメインの対象としています。これは、新しい拡張用のツールである「theme.json」に対してインパクトのあるフィードバックを行うためです。今後の取り組みについては、こちらをご覧ください。ウェブサイトやブロックの機能を有効または無効にしたり、デフォルトのスタイルを設定するために使用される最高レベルの設定ファイルです。すべてを管理するための統合された標準的な方法を提供します。これらの設定には、次のようなオプションが含まれます。どのようなカスタマイズオプションをユーザーに提供するか、あるいは隠すか。ユーザーが利用できるデフォルトの色やフォントサイズなどはどのようになっているか。「スタイル管理」の第一歩となるもので、ブロックテーマを強力にサポートします。ここでは、この新しい仕組みを使うことで得られる主なメリットをご紹介します。テーマはブロックごとの設定を提供できるようになります。エディタ全体の設定を対象としていたため、不可能でした。カスタムプロパティが自動的に確保されるため、自分で処理する必要はありません。プリセット名の翻訳も管理されます。量を減らし、特異性の問題を解決するのに役立ちます。5.8で動作しません。これはリリース時にはまだいくつかのテーマブロックが出せる状態にないためです。それでもブロックテーマは、5.8に搭載される重要な機能であるため、テストや調査が必要です。何ができるかを探っていただきたいと思います。(theme.json)」で詳しく説明されています。何をコントロールでき、どんなアウトプットを得られるのかを知りたい方向けのセクションです。アクセスしてください。セクションの生成を支援します。テーマがサポートする様々な機能をオン、オフしてみてください。コントロール可能な設定の中から一部を選択して試すことができます。カスタムカラーやカスタムリンクの設定をオン、オフしてみてください。選択した内容に応じて、ブラウザの出力が変化することに注目してください。パレット、グラデーション、フォントサイズの隣にある「+」ボタンを使って、追加のカスタマイズを探索してみてください。色の名前やフォントサイズなど、スラッグと特定の変数の両方を編集できる点に注意してください。動かすには次の中級者向けのステップに進んでください。ついてもっと深く知りたいと思う方向けのセクションです。コントロールする様々な設定を探ります。セクションにある、ブロックのテーマサポートとプリセットに焦点を当てています。新規にインストールします。プラグインをインストールして、有効化します。テーマディレクトリからダウンロードして、インストールします。ファイルを開いてください。セットアップのそれぞれのステップにおいて、最新のバージョンを使用してください。この投稿がシェアされてから、バージョンが更新された可能性も念頭に置いてください。レイアウト新しい投稿を作成してください。無地の背景を持つカバーブロックを投稿に追加し、内側の段落ブロックに数行のコンテンツを入れます。別の無地の背景を持つカバーブロックを投稿に追加し、内側の段落ブロックに数行のコンテンツを入れます。このブロックを「幅広」に設定します。3つの無地の背景を持つカバーブロックを投稿に追加し、内側の段落ブロックに数行のコンテンツを入れ、このブロックを「全幅」に設定します。フロントエンドで投稿を表示し、これらのカバーブロックの幅を記録しておきます。値を、違うピクセル値に変更します。値を、違うピクセル値に変更します。先に作成した投稿の編集画面を開き、新しい幅が編集画面で反映されていることを確認します。ブラウザで投稿を表示し、新しい幅がフロントエンドでも反映されていることを確認します。幅の値を「px」以外の、「em」、「rem」、「vh」、「vw」、「%」などで設定する事を試してみましょう。(段落ブロック)段落ブロック内のタイポグラフィ設定、フォントサイズ、フォントウェイト、行の高さ、ドロップキャップの見え方を確認してください。見出しブロックのタイポグラフィ設定、フォントサイズ、フォントウェイト、行の高さの見え方を確認してください。フロントエンドのブロックに各設定が適用されていることを確認してください。段落ブロックの各カスタムタイポグラフィ設定が、ブロックエディターに表示されないことを確認します。以前に適用したタイポグラフィ設定が既存のブロックに適用されている場合があります。theme.jsonファイルのtypographyセクションに、1つまたは複数のフォントファミリーとフォントサイズを追加します。ボタンブロックを使用して、カスタムフォントファミリーとサイズをテストします。true数行のテキストを含む内部段落ブロックを持つグループブロックを作成します。グループブロックの枠設定、スタイル、幅、角丸、カスタムカラーの見え方を確認します。フロントエンドのブロックに設定が適用されていることを確認してください。グループブロックの枠設定が、ブロックエディターに表示されないことを確認します。trueカスタムグラデーションの背景を持つカバーブロックと、内側の段落ブロックに数行のコンテンツを追加します。段落ブロックにリンクを追加し、リンクの色をカスタムカラーに設定します。画像を背景にした別のカバーブロックと、内側の段落ブロックにある数行のコンテンツを記事に追加します。表紙の背景には、デュオトーンのプリセットを使用するように設定します。背景画像のデュオトーンカラーを変更し、デュオトーンのシャドウとハイライトの設定にカスタムカラーを使用する。パレットとデュオトーンまたはグラデーションのプリセットに1つまたは複数の追加カラーを追加します。リソースをご確認ください。例で、最終的にどのような出力が得られるかを示しています。使用してより強固なブロックテーマを作成したいと考えている人や、テーマ開発経験者向けのセクションです。一般ユーザー向けではありません。調べる時間も十分にある場合は、クラシックテーマの再現はいかがでしょう。ここでは2つのオプションを紹介しますが、デフォルトテーマでも問題ありません。TwentyStorefront実際に試してみて、どんなギャップがあったか、何が一番難しかったか、何が意外と簡単だったかをメモしておき、以下のコメント欄で共有してください。あなたの経験から学べることが多くあります。この手順は、意図的に非常に自由で高度なテストに設定していますので、試す気にならなくても安心してください。誰か他の人がテストしているのを見ながらテストしたい場合は、@mkazの動画「ブロックテーマ作成を学ぶ」をチェックしてみてください。注目すること:これらの質問は、中級編と上級編に特化したものです。?フィードバックをお願いします(2021年7月14日まで)この記事のコメント欄に質問、コメント、懸念事項などのフィードバックをお願いします。その際、必ずどのセクションの手順に従ったかを明記してください。作成いただいても構いませんが、このテストに関しては恐らくその必要はないでしょう。フィードバックを残す場合は、以下のコメント欄にリンクを貼ってください。theme.jsonテストのハングアウトに参加しましょう。誰か他の人と一緒に検討したいという方のために、@daisyolsenが、今回のシナリオをメインとするハングアウトを開催します。同じ考え方を持つメンバーによる、カジュアルで協力的なセッションを意味します。チャンネルで発表されます。Portfolios」を訳したものです。誤字脱字誤訳などありましたらフォーラムまでお知らせください。フルサイト編集アウトリーチプログラムの7回目の募集です!6回目のテスト募集で述べたように、まだ参加できていない方は、5.8に向けて今が絶好のチャンスです。この実験的なプログラムについての詳細情報はFAQをご覧ください。チャンネルへ参加してください。今後のテストの案内や役立つ投稿などを共有できるはずです。注意点として、テンプレート編集モードとは、フルサイト編集の機能で、個別の投稿またはページのコンテンツと、個別の投稿またはページが使用するテンプレートを切り替えて編集する機能を解除することです。この機能では、新しいテンプレートを作成したり、既存のテンプレートを編集したり、ページまたは投稿に使用するテンプレートを選択したりすることができます。この機能については、以下のビデオで詳しくご紹介しています。このテストを実例に基づいて行うために、仮にあなたの素晴らしい作品を紹介するポートフォリオページを作成してみましょう。Spaceのような、架空の場所のビジュアルを披露することになるでしょう。あなたが作ったものをみんなで称えることができるように、コメントにはスクリーンショットを添えてください。インスピレーションのために、ここに私の作成例があります。ここにいくつかのGutenbergを使用したデザイナーによるハイエンドな例があります。第6回目のテスト募集に比べて、今回のテスト募集では、意図的により自由な設定を行い、テスターであるあなたにこの機能の限界に挑戦してもらいます。以下は適切な設定のための詳細な情報です。テスト環境を整備するための重要なポイントをご紹介します:テストサイトを使用してください。本番サイトは使わないでください。ここの指示に従ってローカルインストールを設定するか、このような開発用サイトを設定するツールを使用してください。使用してください(ここからダウンロード可能)。