Twenty Twenty-One 登場！

◆ Twenty Twenty-One にはデザイン的な要素がない？

　このテストサイトは、ワードプレスの新しい標準テーマとなった Twenty Twenty-Oneを使って作成したものです。

　最近新たにワードプレスをインストールした方は、真っ白な初期画面を見て、「ん？」と思われた方が多いかも知れません。

　Twenty Twenty-One は、あたかも『あとはご自由にどうぞー』と言わんばかりの状態で提供されています。でも実はこのことは、

ブロックエディター（標準の編集画面）を、
いかに使いこなすか？

ということになると思うワケです。

　Twenty Twenty-One は、その機能の特徴として、新しい『ブロックパターン』が使えるようになり、レイアウトの自由度が上がりました、という点が強調されているようです。

　でも、ブロックパターンの機能は、Twenty Twenty-One の新機能ではなく、ワードプレス5.5の編集画面に新たに実装された機能です。つまり、他のテーマを使っていても、ブロックパターンを使うことができます。

　そこでこのテストサイトでは、Twenty Twenty-One を使いつつ、進化し続けているワードプレスの編集画面（ブロックエディター）の使い方を説明してみます。

◆ メチャ便利になっていたカバーブロック

　まず、このページのトップ画像ですが、これは『カバー』ブロックを使っていまいます。このブロックは、随分と便利になったブロックのひとつです。

　同じくトップ画像を表示するには、アイキャッチ画像を使う方法もありますが、違いについてはこちらの投稿で説明しています。

　さて、カバーブロックを使う際には、画像のサイズを事前に調整しておくことが不要になりました。例えば、一般的な縦横３：４の画像を選択しても、その画像の好きな位置を目で確認しながら選んで表示することができます。

　第二に、オーバーレイ。画像中にタイトル文字を表示したい場合には、色をかぶせることで、文字を読みやすくするわけですが、かぶせる色の選択やその濃さも、やはり目で確認しながら、簡単に調整することができます。

　さらに、画像中の文字についても、細かな指定（文字色やサイズ）が可能で、表示する位置についても９つの選択肢が用意されています。

　というわけでトップに画像を置きたい方には、カバーブロックは、メチャ便利になっています。

◆ カラムブロックで、レイアウトの自由度が向上

◆ コーディング不要へ ◆

最近の WordPress は、レイアウトの自由度がどんどんと向上しています。Twenty Twenty-One でも css や php といったコーディングを学ばなくても、思うようにレイアウトできる度合いが大きくなっています。

◆ 選べる背景色 ◆

Twenty Twentyでは、本文エリアの背景色の変更が可能になりましたが、 Twenty Twenty-One では配色の組合せを自動で提案してくれます。これは、視覚障害がある方々への配慮でもあるようです。

◆ WYSIWYG ◆

編集画面で見えているレイアウトが、そのままのイメージでサイトに公開されます。Twenty Twentyでは、画像の扱いが少しおかしな感じでしたが、Twenty Twenty-One では、解決しているようです。

　カラムを使うことが意識できれば、レイアウトの自由度が大きくアップします。

　上のセクションは、『カラム』ブロック（３カラム）を使っています（スマホで表示すると、縦に３つ並びます）。

　カラムブロックの使い方は、まずカラムブロックを選んで、それぞれのカラムの中に、段落ブロックや画像ブロックなどを追加していくだけです。

　上記の例では、それぞれのカラムには、段落ブロックが３つあるのですが、段落ブロックのそれぞれに背景色を指定すると、左側のような表示になります。

　これに対して、中央と右側のものは、３つある段落ブロックをまずは、『グループ化』して、その後に背景色を指定した場合です。右側のものはさらに、囲いの枠を入れる選択をしてみました。

　カラムを使うと、もっと複雑なこともできます（こちら）。

◆ 段落ブロックの幅について

　Twenty Twenty-One の段落ブロックの幅は、こんな感じで固定です。幅の調整は、編集画面のメニューからはできないので、調整したければ、コーディングの知識が必要ということになります。

　この幅は、Twenty Twenty の時と同じだと思います。幅を簡単には変更できないようになっているのは、何か技術的な理由があるからなのかも知れません。

　というのは、サイトを作成するときは、みなさんパソコンからだと思いますが、WordPress でサイトをつくるということはレスポンシブ（スマホやタブレット向けには、自動的にレイアウトを変更してくれる）のサイトを作成していからです。

　サイトを閲覧しに来る方々の画面サイズは、デスクトップのパソコンからスマホまでさまざまですで、段落の幅や画像の幅などについて、規定値が定まっている場合にはそのまま使うのが筆者の方針です。

　そうはいいつつ、ここからは、カラムを使ってみました。

　1行の長さを変えようと思えば、3カラムのブロックを選択して、真ん中のカラムの幅を広げてやればOKです。

◆ ウィジェットがブロックになっている

　以前は、サイドバーなどにこじんまり（笑）と、配置させておくことが多かったウィジェットですが、ブロックになったおかげで、本文中に表示することができるようになっています。

　以下に、『新しい投稿』ブロックと、『ギャラリー』ブロックとを配置しておきます。『新しい投稿』ブロックは、配置や画像表示の有無などを選択できるようになっています。

◇ 『最近の投稿』ブロック

◇ 『ギャラリー』ブロック

　トップページに何を表示するかって、迷いますよね？

　『ギャラリー』ブロックは、選択肢のひとつになるかもしれません。投稿中に差し込む画像を工夫して作成しているなら、なおさらです。

　画像のひとつひとつには、キャプションが入りますし、リンクを入れてその画像を使っている投稿へ誘導することもできます。もちろん、カラムの数や画像の大きさを指定する選択肢も用意されていますので、このブロックもトップページに使えそうです。

  • 晩冬の風景
  • イチゴを加える発想がスゴイ！
  • 『シェーッ』のポーズ
  • テレビ塔展望台からの風景
  • テレビ塔東側の風景
  • 春一番に開花する福寿草

◆ まとめ：スマホを意識したデザインを

　ほとんどの皆さんのサイトへは、スマホからのアクセスのほうが多いはずです。

　パソコンで眺めて気になることはたくさんあるかも知れませんが、最初のうちは選んだテーマの指定通りに使ってみて、手元のスマホでチェックすることをまずは習慣にしましょう。

　「html」と「css」を学ぶとデザインの自由度が広がりますが、あまり深入りしすぎないことです。また選ぶテーマによっては、これらを知らなくても、かなり細かなことまで指定できるようになっています。

　参考までに、カスタマイザー（「外観」→「カスタマイズ」）の「追加CSS」の欄はとても良くできていて、入力すると、すぐに画面で結果を確認できます。

　必要なCSSを調べて、この欄にコピペしているうちに、使い方のコツがわかる方も多いと思います。

　ま、そうしているうちに、ちゃんとCSSを学ぼうという気になってきてしまって、深みにハマるワケですね。仕事を発信されているみなさんは、本業がおろそかにならない程度にしておきましょう（←経験者は語るモードです）。

　繰り返しになりますが、細部にこだわってみてもスマホで見ると差が出ないって、よくあることなのです。

　それともうひとつ。コーディングを行うようになったら、バックアップを取ってから行うという習慣を付けておくほうが良いと思います。