<!-- [FSE Program Testing Call #9: Handling HigherEd Headers](https://make.wordpress.org/test/2021/08/11/fse-program-testing-call-9-handling-highered-headers/) ========================================================================================================================================================== --> # FSE プログラムのテスト募集 #9: 高等教育のヘッダーの取り扱い 以下は、[annezazu](https://profiles.wordpress.org/annezazu/) が書いた Make [WordPress.org](https://wordpress.org/) Test チームブログの記事「[FSE Program Testing Call #9: Handling HigherEd Headers](https://make.wordpress.org/test/2021/08/11/fse-program-testing-call-9-handling-highered-headers/)」を訳したものです。 誤字脱字誤訳などありましたら[フォーラムまでお知らせください](https://ja.wordpress.org/support/forum/alphabeta/)。 --- <!-- This is the ninth call for testing as part of the [Full Site Editing Outreach Program](https://make.wordpress.org/core/2020/12/11/the-fse-outreach-program-is-officially-starting/)! For more information about this outreach program, [please review this FAQ](https://make.wordpress.org/test/handbook/full-site-editing-outreach-experiment/faq-for-fse-outreach-experiment/) for helpful details. To properly join the fun, please head to [#fse-outreach-experiment](https://make.wordpress.org/test/tag/fse-outreach-experiment/) in [Make Slack](https://make.wordpress.org/chat/) for future testing announcements, helpful posts, and more.  --> これは[フルサイト編集アウトリーチプログラム](https://make.wordpress.org/core/2020/12/11/the-fse-outreach-program-is-officially-starting/)の9回目の募集です ! この実験的なプログラムについての詳細情報は [FAQ をご覧ください](https://ja.wordpress.org/team/handbook/test/full-site-editing-outreach-experiment/faq-for-fse-outreach-experiment/)。程よく楽しんで参加するために、[Make Slack](https://make.wordpress.org/chat/) の [#fse-outreach-experiment](https://make.wordpress.org/test/tag/fse-outreach-experiment/) チャンネルへ参加してください。今後のテストの案内や役立つ投稿などを共有できるはずです。 <!-- In comparison with previous calls for testing, this one is even more community driven with the suggestion to do a Higher Education themed call for testing coming from [@blake](https://profiles.wordpress.org/blake/). If you’d like to suggest an idea for a call for testing, know it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue. You can share ideas directly in the slack channel or via DM to me ([@annezazu](https://profiles.wordpress.org/annezazu/)).  --> これまでに募集してきたテストと比較して、今回のテストは幾分コミュニティ主導のもので、[@blake](https://profiles.wordpress.org/blake/) が提案した高等教育をテーマにしたテストになります。フルサイト編集テストのアイデアの提案を歓迎します。すべてのアイデアは、現在のプロジェクトの優先順位と照らし合わせ、もっとも効果的と判断されたものが実行されます。アイデアは、Slack チャンネルで直接共有するか、私 ([@annezazu](https://profiles.wordpress.org/annezazu/)) にメッセージを送ってください。 <!-- Feature Overview --> 機能の概要 ---------------- <!-- To ground this test in a real-world example, we’re going to go back to school as an administrator and recreate a customized header to welcome students, parents, and teachers alike to our hypothetical university. For inspiration, check out the following sample of university sites or just look up some near you! Since this test is focused on building out the header portion, focus in on that aspect and take note of what is done on each site:  --> このテストを実世界の例に基づいて行うために、私たちはサイト管理者として学校に戻って、仮想の大学で学生、親、教師を歓迎するためのカスタマイズされたヘッダーを作成してみます。インスピレーションを得るために、次のような大学サイトのサンプルをチェックしたり、近くの大学を探してみてください。このテストでは、ヘッダー部分の構築に焦点を当てているので、その点に集中して、それぞれのサイトでどのような工夫がなされているかを参考にしてください。  [https://www.kyoto-u.ac.jp/en](https://www.kyoto-u.ac.jp/en) [https://www.ni.ac.rs/en/student-info](https://www.ni.ac.rs/en/student-info) [https://engineering.asu.edu/](https://engineering.asu.edu/) <!-- As you can imagine, this test is going to enable us to go deep into the Navigation Block. As a refresher, it’s a powerful, new block that unlocks the ability to edit a site’s navigation menu, both in terms of structure and design. To help prepare it for inclusion in a future WordPress release, this test is meant to explore the edges of what this block can do. --> ご想像のとおり、このテストでは「ナビゲーションブロック」を深く掘り下げることになります。おさらいしておくと、ナビゲーションブロックとは、サイトのナビゲーションメニューを構造的にもデザイン的にも編集できるようにする、強力で新しいブロックです。このテストは、将来の　WordPress　リリースに搭載するための準備として、このブロックでできることの端緒を探ることを目的としています。 <!-- Similar to prior tests, if you choose to get super creative, please share a screenshot in your comment so we can celebrate what you’ve made. For inspiration, here’s my example below with the multiple layers of sub-menu items displayed: --> これまでのテストと同様に、創造性を発揮してくださった場合には、コメント欄にスクリーンショットを添付してください。インスピレーションを得るために、以下の例では、サブメニュー項目の複数のレイヤーが表示されています。 [![Image of a pretend Gutenberg University header with two different menus, including one with multiple sub-menu layers open.](https://make.wordpress.org/test/files/2021/08/image-1024x474.png)](https://make.wordpress.org/test/files/2021/08/image.png) <!-- Testing Environment  --> テスト環境 -------------------- <!-- While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment:  --> 以下は適切な設定のための詳細な情報です。テスト環境を整備するための重要なポイントをご紹介します: <!-- * Use a test site. Do not use a production/live site. You can [follow these instructions](https://make.wordpress.org/core/handbook/tutorials/installing-wordpress-locally/) to set up a local install or use a [tool like this to set up a development site](https://localwp.com/).  * Use the latest version of WordPress (downloadable [here](https://wordpress.org/download/)). * Use the latest version of the [TT1 Blocks Theme](https://wordpress.org/themes/tt1-blocks/).  * Use the latest version of Gutenberg ([11.2.1 as of writing this](https://github.com/WordPress/gutenberg/releases/tag/v11.2.1)). * Download and [import the demo Gutenberg content](https://cloudup.com/cei9RrWS12R) (open the link and select “Download) created especially for this test via the WordPress importer under Tools >  Import. --> * テストサイトを使用してください。本番サイトは使わないでください。[ここの指示に従ってローカルインストールを設定する](https://make.wordpress.org/core/handbook/tutorials/installing-wordpress-locally/)か、[このような開発用サイトを設定するツールを使用してください](https://localwp.com/)。 * 最新の WordPress を使用してください ([ここからダウンロード可能](https://wordpress.org/download/))。 * 最新の [TT1 Blocks テーマ](https://wordpress.org/themes/tt1-blocks/) を使用してください。 * 最新の Gutenberg を使用してください。この記事の執筆時点では[Version 11.2.1](https://github.com/WordPress/gutenberg/releases/tag/v11.2.1)です。 * このテスト用に作成された [Gutenberg デモコンテンツ](https://cloudup.com/cei9RrWS12R)をダウンロードします。リンクをクリックし、「ダウンロード」を選択してください。次に管理画面で、「ツール」>「インポート」にアクセスし、「WordPress Importer」を使用してデモコンテンツをインポートします。 <!-- Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared. --> 基本のルールとして、セットアップでは各プログラムの最新バージョンを使用してください。またこの記事の公開後もバージョンは更新される可能性がある点に注意してください。 <!-- **Known issues** --> **既知の問題** <!-- While creating this call for testing, a few issues popped up that you, too, might experience as you go through this. Rest assured they have been reported. Here’s a nonexhaustive list of the most important items: --> この記事の作成中に、いくつかの問題が発生しました。同じ問題に遭遇するかもしれませんが、これらの問題は報告されていますので安心してください。以下に大きな問題をいくつか挙げます。 <!-- * When the Navigation Block is placed inside the Columns block, [the margin collapses causing the items within the block to lose their spacing](https://github.com/WordPress/gutenberg/pull/33021).  * It’s currently not possible to [bulk add items to the Navigation Block](https://github.com/WordPress/gutenberg/issues/31667).  * The Search block background color [isn’t reflected on the front end](https://github.com/WordPress/theme-experiments/issues/281) with TT1 Blocks.  --> * ナビゲーションブロックをカラムブロックの中に配置すると、[余白が崩れてブロック内の項目の間隔が狭くなります](https://github.com/WordPress/gutenberg/pull/33021)。 * [ナビゲーションブロックに一括で項目を追加できません](https://github.com/WordPress/gutenberg/issues/31667) * TT1 Blocks テーマでは、検索ブロックの背景色が、[フロントエンドで設定されません](https://github.com/WordPress/theme-experiments/issues/281)。 <!-- Beginner testing steps --> 初心者向けのテスト方法 ---------------------- <!-- _This section is for those who want to follow specific steps to create a header and might not have a lot of time to take the test further._ --> _このセクションは、具体的な手順に従ってヘッダーを作成したい方や、FSE をテストする十分な時間がない方のためのテスト方法です。_ <!-- While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a beta feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature.  --> このテスター募集は特定の機能をテストすることに焦点を当てていますが、ベータ機能をテストする過程で他のバグを見つけることもあると思います。見つけたバグは、たとえそれがテストしている機能に直接関係なくても、テストレポートにぜひ含めていただければと思います。 <!-- Create structure (template part, columns, etc) --> 構造の作成 (テンプレートパーツ、カラムなど) <!-- 1. Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage.  2. Upon opening your homepage, remove the Navigation Block found inside the Header Template Part. This is to help reset the header to add more to it later on.  3. Select the parent Columns Block and, using the Block Settings in the sidebar, change the columns from 2 to 3 columns.  4. Return to the Columns Block and, using the Block Toolbar settings, make sure it’s set to Full Width. --> 1. 管理画面で「サイトエディター (ベータ)」をクリックします。自動的にサイトエディターが開き、ホームページに使用されているテンプレートが表示されます。 2. ホームページを開いたら、「ヘッダーテンプレートパーツ」の内部ににある「ナビゲーションブロック」を削除してください。後の追加のために、ヘッダーをリセットします。  3. 親の「カラムブロック」を選択し、サイドバーの「ブロック設定」を使用して、カラムを2列から3列に変更します。 4. カラムブロックに戻り、「ブロックツールバー」の設定で、「全幅」になっていることを確認します。 <!-- Build out site branding --> サイトブランドの作成 <!-- 5. In the first column, add the Site Logo Block and upload/use a site logo. You can use [this free logo](https://cloudup.com/ckUudYkXZh1) from logodust.com if you’d like.  6. From there, customize the Site Title, Site Tagline, and Site Logo blocks to your liking (change font, change color, change alignment, etc). 7. In the second column, add a Buttons block to add a warning about COVID by linking to the August COVID Update post. You can do this by searching for the post title. If you haven’t yet imported the necessary demo content, please do so now [using this export file](https://cloudup.com/cei9RrWS12R) (open the link and select the “Download” option).  --> 5. 1列目に「サイトロゴブロック」を追加し、サイトのロゴをアップロードします。必要であれば logodust.com の[この無料ロゴ](https://cloudup.com/ckUudYkXZh1)を使用してください。 6. そこから、サイトタイトル、サイトタグライン、サイトロゴの各ブロックを組み合わせ自由にカスタマイズしてください (フォントの変更、色の変更、配置の変更など)。 7. 2列目に「ボタンブロック」を追加して、COVIDに関する警告を追加し、記事「August COVID Update」にリンクします。記事は投稿タイトルを検索すれば見つかります。必要なデモコンテンツをまだインポートしていない場合は、[このエクスポートファイル](https://cloudup.com/cei9RrWS12R)のリンクを開いて「ダウンロード」を選択し、インポートしてください。  <!-- Create a simple menu for high level items --> 上位レベルの項目のシンプルなメニューの作成 <!-- 8. In the third column, add a Navigation Block and select the “Start Empty” option. 9. From there, use the Page Link Block to add in the following pages from the imported content: Contact, Directions, Make a Donation. To do this, just start typing the title of each page. You will likely notice [this spacing bug at this point](https://github.com/WordPress/gutenberg/pull/33021) that’s slated to be fixed in Gutenberg 11.3.  10. Rename menu item `Make a Donation` to `Donate` to make it shorter by simply editing the text of that Page Link Block.  11. To finalize the menu, add in a Search Block and, using the sidebar settings, customize it to your liking (picking background color, text colors, width, etc).  12. Once the main menu items are in place, select the overall Navigation Block once more and, in the sidebar settings under “Display Settings”, toggle on the Enable responsive menu option. You can also customize the block styles at this point as you like.  --> 8. 3列目に「ナビゲーションブロック」を追加し、「空から始める」オプションを選択します。 9. ここで「固定ページリンクブロック」を使用して、インポートしたコンテンツの中から以下のページを追加します。「Contact」「Directions」「Make a Donation」。追加するには、各ページのタイトルの最初の数文字を入力し始めます。恐らく、Gutenberg 11.3で修正予定の[スペーシングのバグ](https://github.com/WordPress/gutenberg/pull/33021)に気づかれるでしょう。 10. メニュー項目の「Make a Donation」を「Donate」に短く変更します。これには、固定ページリンクブロックのテキストを編集します。  11. メニューの最後には、「検索ブロック」を追加し、サイドバーの設定を使用して、自由にカスタマイズしてください (背景色、テキストの色、幅など)。  12. メインメニュー項目を配置したら、ナビゲーションブロック全体を再度選択し、サイドバーの設定の「表示設定」で、「レスポンシブメニューを有効化」オプションをオンにします。必要であれば、この時点で、ブロックのスタイルをカスタマイズすることもできます。  <!-- Create a more complex menu for specifics  --> より複雑な仕様のメニューの作成 <!-- 13. Select the overall Columns Block that contains your three columns (this is where [you might find the List View](https://cloudup.com/c-PkRBLi-He) helpful). Using the More Settings menu option, select “Insert After” to add a block after.  --> 13. 3つのカラムを含む全体の「カラム」ブロックを選択します（ここで[リストビュー](https://cloudup.com/c-PkRBLi-He)が役に立つかもしれません）。メニューの「その他の設定」で「後に挿入」を選択し、後にブロックを追加します。  <!-- 14. Add another Columns Block and select the 30/70 option. --> 14. カラムブロックをもう1つ追加し、30/70オプションを選択します。 <!-- 15. From there, select the overall Columns Block again and, using the Block Toolbar settings, make sure it’s set to Full Width. --> 15. そこから再び「全体の列」ブロックを選択し、ブロックツールバーの設定で「全幅」になっていることを確認します。 <!-- 16. Add a Navigation Block to the larger 70% width column and select the “Start Empty” option. --> 16. 幅70％の大きなカラムにナビゲーションブロックを追加し、「空から始める」オプションを選択します。 <!--17. From there, use the Page Link Block to add in the following pages from the imported content: About, Admissions, Student Life, Research, and News. To do this, just start typing the title of each page.  18. Once the main menu items are in place, select the overall Navigation Block once more and, in the sidebar settings under “Display Settings”, toggle on the Enable responsive menu option.  19. From there, add in sub-menu items to About, Admissions, Student Life, and Research. In case you need a hint, [here’s a screenshot](https://cloudup.com/cxw7WXdIUQf) of the icon for adding sub menu items.  1. About should have the following sub-menu items: Distinguished Alumni,  Diversity and Inclusion, Faculty, History, Leadership. 2. Admissions should have the following sub-menu items: Career Paths, Undergraduate Graduate Admissions, Scholarship & Financial Aid, Tuition.  3. Research should have the following sub-menu items: Awards & Honors, Partnerships, Undergraduate Research, Graduate Research.  4. Student Life should have the following sub-menu items: Athletics, Tutoring Services, FAQs, Study Abroad Opportunities, Tutoring, Services.  20. At this point, add sub menu items under Admissions > Career: Business, Design, Technology.  21. Once the sub menu items are added, rearrange and rename various sub-menu items to your liking. You can rearrange using the Block Navigation option when selecting the [entire Navigation Block as shown in this GIF](https://cloudup.com/ckwv5z9ys4C).  22. If you want to add more pages that don’t exist yet, you can do so by typing a title that doesn’t currently exist on your site. From there, you’ll see an option to create a draft page. Do this for at least one menu item. Remember to have fun with this and make it HigherEd-themed!  23. From there, customize the overall Navigation block as you’d like (change alignment, color, font size, etc). Remember that for sub-menu items you can use the Overlay color settings to set the colors you want.  Save your work & customize further --> 17. そこから「ページリンクブロック」を使って、取り込んだコンテンツの中から以下のページを追加します。About、Admissions、Student Life、Research、News です。これを行うため、各ページのタイトルを入力してください。  18. メインメニュー項目を配置したら、もう一度ナビゲーションブロック全体を選択し、サイドバー設定の「表示設定」で「レスポンシブメニューを有効化」オプションをオンにしてください。  19. そこから、About、Admissions、Student Life、Research のサブメニュー項目を追加します。ヒントが必要な方のために、こちらがサブメニュー項目を追加するためのアイコンの[スクリーンショット](https://cloudup.com/cxw7WXdIUQf)です。 1. About には、以下のサブメニュー項目が必要です。Distinguished Alumni、Diversity and Inclusion、Faculty,、History、Leadership。 2. Admissions には、以下のサブメニュー項目を追加してください。Career Paths、Undergraduate Graduate Admissions、Scholarship & Financial Aid、Tuition。  3. Research には、以下のサブメニュー項目を設けます。Awards & Honors、Partnerships、Undergraduate Research、Graduate Research。  4. Student Life には、以下のサブメニューを用意してください。Athletics、Tutoring Services、FAQ、Study Abroad Opportunities、Tutoring、Services。 20. この時点で、Admissions > Career の下に Business、Design、Technology というサブメニュー項目を追加します。  21. サブメニュー項目を追加したら、様々なサブメニュー項目を自分の好みに合わせて再配置し、名前を変更します。ブロックナビゲーションオプションを使って、[この GIF に示されているようなナビゲーションブロック全体](https://cloudup.com/ckwv5z9ys4C)を選択すると、並べ替えることができます。  22. まだ存在していないページを追加したい場合は、現在サイトに存在していないタイトルを入力することで追加できます。そこから、下書きページを作成するオプションが表示されます。これを少なくとも1つのメニュー項目に対して行います。この作業をお楽しみください。高等教育がテーマの内容することをお忘れなく。 23. そこから、ナビゲーションブロック全体をお好みにカスタマイズします (配置、色、フォントサイズなどの変更)。サブメニューの項目については、オーバーレイの色設定を使って好きな色を設定できることを覚えておいてください。 作業内容を保存してさらにカスタマイズしましょう。 <!-- 24. Select “Save” to save your changes and view your site on the front end. Note any differences in what you see in the editor vs what you see on the front end. If you have any drafted pages, you’ll want to publish them in order to see them listed in the menu. 25. Try viewing your site on mobile and checking to see whether the menus appear responsive with a hamburger menu.  26. From there, continue to customize as you’d like by changing any alignment, color, font size, removing/renaming/rearranging items, and more. You can also add additional blocks to either Navigation Block including Spacer or Social Icons.  --> 24. 「保存」を選択して変更を保存し、フロントエンドでサイトを表示します。エディターで表示される内容とフロントエンドで表示される内容の違いを確認してください。下書き状態のページがある場合は、メニューに表示するために公開する必要があります。 25. モバイル端末でサイトを表示し、メニューがハンバーガーメニューとしてレスポンシブ表示されるかどうかを確認します。  26. ここからは、配置や色、文字サイズの変更、項目の削除・並べ替え・再配置など、自由にカスタマイズしてください。また、スペーサーやソーシャルアイコンなどのブロックをナビゲーションブロックに追加することもできます。  <!-- Advanced testing steps --> 上級者向けのテスト方法 ---------------------- <!-- _This section is for those who have the time to take the test further and who are comfortable venturing into the site editor without much guidance._ --> _このセクションは、テストをさらに続ける時間があり、ガイドなしでもサイトエディターを試せる方向けのテストです。_ <!-- The steps for this section are simple: find a university site’s header and try to recreate all or part of it. You’re welcome to continue to use TT1 Blocks or to use the block theme of your choosing (please note if you use a different theme). You can use the universities listed above or you can find your own. When leaving a comment, please share a screenshot of what you were attempting and a screenshot of what you were able to do. It’s very helpful to see what folks would like to be able to do so don’t hesitate to share different designs you see.  --> このセクションのテスト方法は簡単です。大学サイトのヘッダーを探し、その全部または一部を再現してみてください。TT1 Blocks テーマを使い続けても自分の好きなブロックテーマを使っても構いません (違うテーマを使用する場合は注意してください)。上に挙げた大学を利用しても良いですし、自分で探してもいいでしょう。コメントを残す際には、自分が何をしようとしていたか、そして何ができたかを示すスクリーンショットを共有してください。みなさんが何を実装しようとしているかを知ることはとても参考になります。自由な発送とデザインを遠慮なく共有してください。 <!-- What to notice: --> 注意する点: --------------- <!-- Remember to share a screenshot of what you created if you’re up for it! --> 作成した画面のスクリーンショットを共有してください ! <!-- * Did the experience crash at any point? * Did the saving experience work properly?  * Did you find any features missing while creating the header? Please be as specific as possible, especially if you followed the Advanced steps.  * What did you find particularly confusing or frustrating about the experience? * What did you especially enjoy or appreciate about the experience?  * Did you find that what you created in the Site Editor matched what you saw on your site? * How did you find the Navigation block worked when viewed on smaller screen sizes?  * Did it work using Keyboard only? * Did it work using a screen reader? * If you’d like, try running your test site through a tool like [https://wave.webaim.org](https://wave.webaim.org/) or [https://www.accessify.com/](https://www.accessify.com/) to see how it performs.  --> * どこかでクラッシュしませんでしたか ? * 正しく保存できましたか ? * ヘッダーを作成中に不足する機能はありませんでしたか ? できる限り詳しく説明してください。上級者向けのテスト方法を実施した場合は特に ! * テストで困った点、イライラした点はありませんか ? * テストで楽しかった点、いいねと思った点はありますか ? * サイトエディターで作成したページは、サイトで表示された場合にマッチしますか? * 小さな画面サイズで見たときの、ナビゲーションブロックの動作はいかがですか ?  * キーボードだけで動作しましたか ? * スクリーンリーダーだけで動作しましたか ? * よろしければ、[https://wave.webaim.org](https://wave.webaim.org/) や [https://www.accessify.com/](https://www.accessify.com/) のようなツールでテストサイトを実行して、動きを確認してみてください。 <!-- Leave Feedback by September 1, 2021 --> フィードバックをお願いします(2021年9月1日まで) ----------------------------------- <!-- Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues [in this GitHub repo directly for Gutenberg](https://github.com/WordPress/gutenberg/issues) and [in this GitHub repo for TT1 Blocks](https://github.com/WordPress/theme-experiments/issues). If you leave feedback in GitHub, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve. --> この投稿にコメントでフィードバックをお願いします。あるいは、[Gutenberg の GitHub リポジトリディレクトリ](https://github.com/WordPress/gutenberg/issues) や [TT1 ブロックの GitHub リポジトリ](https://github.com/WordPress/theme-experiments/issues) に issue を作成いただくのでも構いません。GitHub にフィードバックした場合は、以下にリンクを貼ったコメントを残してください。誰かが同じ問題を報告している場合でも、是非、あなたの体験を追記してください。体験に取り組んでいる私たちが何を改善すべきか包括的な洞察を与えてくれます。 [#fse-outreach-experiment](https://make.wordpress.org/test/tag/fse-outreach-experiment/), [#fse-outreach-program](https://make.wordpress.org/test/tag/fse-outreach-program/), [#fse-testing-call](https://make.wordpress.org/test/tag/fse-testing-call/), [#full-site-editing](https://make.wordpress.org/test/tag/full-site-editing/)