印象を与える：ブロックでポストヒーローヘッダーを構築する方法

覚えている限り、ウェブでのアートディレクションに夢中になっています。 この用語は、コンテンツ自体の周りに個々のページをデザインする行為を説明するためによく使用されます。 これは、ほとんどのユーザーが投稿を書くときに通常行う方法とは逆です。 テンプレートまたはデザインは、書かれた単語から切り離されています。

ジェイソンサンタマリアのウェブサイトは、おそらくそのような投稿の最も引用されたショーケースです。 特にCandygramの記事を閲覧することを強くお勧めします。

ストーリーがより視覚的な強調を要求する場合があります。 コンテンツのデザインは、テキストだけでは不可能な絵を描くことができます。 場合によっては、これらは手の込んだフルページレイアウトです。 また、読者の注意を引くのは画像やその他の要素の挿入です。

最近AutomatticのArcheoテーマを使って楽しんだ理由の1つです。 そのパターンは、雑誌を熟読した初期のホームインターネット前の記憶を呼び起こし、それぞれが独自のレイアウトでストーリーを特集しました。

何年にもわたって、私はポストごとの設計のためにいくつかのシステムを開発しようとしましたが、それらは常に私が望んでいた場所に達していませんでした。 問題の一部は、10年以上先の問題をまだ解決できないほど、将来を見据えたしっかりしたフレームワークがなかったことです。

WordPressがブロックエディターを立ち上げたとき、それらの古いアイデアは表面に忍び寄り始めました。 それは人々が彼らの物語を視覚的に伝え、レイアウトが数リリース後に壊れないという保証を提供することを可能にするでしょうか？

今日、私はWordPressが以前よりもそれを可能にすることを確信しています。 共有CSSツールキットを拡張したり、デザインコントロールの範囲をより多くのブロックに追加したりするなど、より良い方法がいくつかあります。 しかし、本質的に、ブロックエディタは、エンドユーザーが視覚的要素とテキスト要素を介してストーリーを伝えることを可能にするデザイン言語です。 これは、バージョン6.0以降でのみ改善されます。

ユーザーがこれらのツールを利用して、より視覚的にユニークなストーリーを作成する方法を少し垣間見せたかったのです。 Building with Blocksシリーズのこのエントリは、出発点を提供することを目的としています。

それに続く人々のために、私たちはゴッサムシティについての架空の物語のための投稿ヘッダー/イントロセクションを構築します：

フルページのデザインではありませんが、人々が自分のコンテンツをもっと実験し始めるのに役立つことを願っています。 WordPressには、現在使用できる確かなデザインツールがたくさんあります。

このチュートリアルでは、実際に2つの異なるパターンを組み合わせました。 しかし、私はオリジナルに使用された方法に満足していませんでした：

特に、コンテンツを左揃えにして最大幅のコンテナに入れるには問題があります。 それについては少なくとも2つの方法があります。 最もよく使用される方法は、50/50 Columnsブロックを挿入し、最初の列をコンテンツに使用し、2番目の列を空のままにすることです。 これはテーマ間の互換性が最も高くなりますが、一部の画面サイズでは煩雑になる可能性があります。

2つ目は、Coverブロックのポジショニングコントロールを使用して、内側のGroupブロックを左に揃えることです。 これは、純粋なレスポンシブレイアウトに最適なオプションです。 ただし、いくつかのブロックテーマに対してテストした場合、その出力には一貫性がありませんでした。

最終的に、私は最初のレイアウトを脇に置きました。 しかし、私は少なくともそれをクラックしたい人たちと共有したかったのです。

ポストヘッダーヒーローの構築

このパターンでは、Gutenbergプラグインのバージョン12.9を使用しました。 WordPress 5.9ユーザーが利用できる機能を使い続けようとしましたが、古いインターフェースは、プラグインの最近のアップデートよりも遅く、かさばっています。

カスタムブロックテーマも使用しました。 いずれも機能するはずですが、「空白」のテンプレートまたは同等の全幅のオープンキャンバスオプションが必要です。 そうでない場合は、組み込みのテンプレートエディタからビルドできます。 その中に必要なのはPostContentブロックだけです。

ステップ1：背景を作成する

Coverブロックは、多くのレイアウトを作成するときに頼りになる選択肢です。 これはWordPressで最も用途の広いオプションの1つであり、多くの種類のデザインへの道を開きます。 私がここから始めたのは当然のことです。

最初のステップは、新しいCoverブロックを挿入し、その画像を選択することです。 次に、それを全幅に設定し、全高オプションをオンに切り替えます。

選択した画像に応じて、それに合わせてオーバーレイオプションをカスタマイズできます。 不透明度70％の「鮮やかなシアンブルーから鮮やかな紫」のグラデーションを選択しました。 私はそれを見るのに十分な背景画像を覗き見したかったのですが、それが他のすべてを圧倒するほどではありませんでした。

ステップ2：スペーサーとグループ

この時点で、コンテンツの全体的なレイアウトをまだ構築中です。 手順1のカバーの内側に、スペーサー、グループ、および別のスペーサーを追加します。

各スペーサーを2remまたはお好みの値に設定します。 これは、パターンの上部と下部に背景画像をもう少し表示するためのものです。 または、外側のカバーブロックのパディングオプションを調整して、同じ効果を得ることができます。

Groupブロックについては、境界線の設定のみを変更しました。 幅に3pxを選択し、スタイルを単色に設定し、色に白を選択しました。

注：このステップのグループブロックは、今後不要になります。 理想的には、ステップ3のカバーに固執することができます。 ただし、カスタム境界線はまだサポートされていません。 機能を追加するためのオープンチケットがあります。 WordPressが次の6.0リリースでカバーにこれを提供するかどうかは不明です。 今のところ、ラッパーを追加する必要があります。

ステップ3：インナーカバー

手順2のグループ内に新しいCoverブロックを追加します。 全幅アライメントに設定し、全高を有効にします。 次に、選択した背景色を選択し、デザインに合うように不透明度を調整します。 このレイヤーは、テキストが読めるように十分に暗くする必要があります。 すべてがどのように見えるかに応じて、後でこれを変更することを選択できます。

最新バージョンのグーテンベルクでテストする場合は、次のステップの最後にある注を参照してください。

ステップ4：コンテンツグループ

これが、このパターンを機能させるためのネストされたコンテナーの最後のレイヤーであることを約束します。 このステップでは、ステップ＃2のカバー内に新しいグループブロックを挿入します。

必要な設定は、ブロックサイドバーパネルの「デフォルトレイアウトを継承」オプションをオンにすることだけです。 「ブロック間隔」の設定を4remに調整して、コンテンツに十分な余裕を持たせましたが、これはテーマごとに変わる可能性があります。 また、テキストとリンクの色のオプションとして、白または別の明るい色を選択する必要があります。

注：これもまた、WordPress 5.9が、一部の問題を削減するために必要なツールを提供することを躊躇するシナリオです。 背景を透明にするには、手順3のカバーブロックが必要でした。 ただし、WordPress 6.0では、ユーザーは任意の色の不透明度を調整できます。 Gutenbergプラグインを使用してテストする場合は、このステップでGroupブロックを使用して、透明な背景を配置するだけで済みます。

ステップ5：キャッチーなタイトル

今、私たちは楽しい部分、つまり実際のコンテンツに取り掛かっています。 WordPress 6.0では、前のステップを半分に減らすことができるかもしれないことを覚えておいてください。

タイトルとそのコンテナの間に余分なスペースが必要なため、手順3のグループブロック内に高さ2remのスペーサーブロックを挿入しました。 その後、Post Titleブロックを追加し、全幅配置に設定しました。 この投稿には「空白」のテンプレートを使用しているため、どこかにタイトルを追加する必要があることを忘れないでください。

これは物事が厄介になるところです、そして私はそれのためにこの特定のチュートリアルを完全に共有することをほとんどオプトアウトしました。 WordPressのフォントサイズは、アクティブなテーマと同じくらい良いだけです。 コアプラットフォームには、それらとそれに関連する行の高さに対する応答性の高い処理がなく、各テーマは、提供される選択肢と大きく矛盾する可能性があります。

最適なオプションは、Post Titleブロックのテーマで提供されている場合は、適度に大きいフォントサイズを選択することです。 バランスの取れたデザインは、さまざまな選択肢を提供し、小さな画面用にそれらのサイズ変更を処理します。 使用できない場合は、カスタムフォントサイズと行の高さを追加する必要があります。 私のセットアップで使用される値は、それぞれ6remと1です。

次に、使用可能なオプションに応じて、[外観]オプションまたは[重量]オプションのいずれかで[黒]オプションを選択します。

ステップ6：画像を追加する

このステップには、[注目の画像を投稿]または[画像]ブロックの2つのオプションがあります。 前者は、WordPress5.9ではほとんど設定がありません。 アクティブなテーマによって、一部のカスタムスタイルを一方に使用できるようになり、もう一方には使用できない場合があります。

写真にキャプションを追加したかったので、主にImageブロックを選択しました。 次に、それを全幅の配置に設定し、テーマで使用できる「境界線」スタイルを選択して、背景から少し分離しました。

ステップ7：まとめ

この時点から、物事を楽しんでください。 架空のストーリーのリーダーと別のスペーサーブロックを追加しましたが、投稿者や日付を表示するなど、他のオプションをいじくり回すことができます。

これは、多くの作業をつなぎ合わせるように感じました。 ただし、WordPress6.0は物事をはるかに簡単にするはずです。