ワードプレスの新標準テーマ Twenty Twenty-One とその未来像

 ワードプレスに初期設定で付いてくるテーマが、Twenty Twenty-One に切り替わりました。札幌Geezerもテストサイトを用いてカスタマイズして見ましたので、その使用感をまとめておきます。

◆ デザインを意識せざるを得ない、デザイン?

Twenty Twenty-One の紹介画像。
Twenty Twenty-One の紹介画像

 画像は、wordpress.org の Twenty Twenty-One のページに掲載されているものです(リンクになっています)。

 左側が固定ページのイメージで、右側は投稿のイメージ。なんだか、ものすごくアートですよね!

 背景色は初期設定になっていたのですが、インストールして有効化した直後に、札幌Geezerが受けた印象は、真っ白です。「さぁ、ここからはご自由にどうぞ!」と言われているようで、実はなんだかとても嬉しくなってしまいました。

 使われている画像が写真ではなくて絵画ということも影響しているのかも知れませんが、「ワードプレスは、アートな方々にも使っていただけますよ」というメッセージが込められている気がしてきます。

 右側の投稿イメージを観てみると、トップに画像がドーンときていて、本文の1行の幅は短めになっていることがわかりますよね。この感じだと、自分の作品集(ポートフォリオ)として使うのに、ピッタリとはまるのではないでしょうか?

 公式サイトには、スマホで眺めた時のイメージも、画像で紹介されています:

Twenty Twenty-One をスマホで表示した際のイメージ。パステル色を背景に数種類並べられている
Twenty Twenty-One スマホでの表示イメージ

 美しいです!最近は、手芸品などをECサイトで販売されている方の数が急増しているそうですが、ECサイトでは書き切れないことをサイトにして紹介する際に使うテーマとして、人気が出そうな気がします。

◆ Twenty Twenty-One は、使い方もシンプルそのもの

 下の画像は、Twenty Twenty-One のカスタマイズ画面(「外観」→「カスタマイズ」)から、メニュー部分を切り取ったものです。

Twenty Twenty-One テーマのカスタマイズ画面に表示されるメニュー項目部分のスクリーンショット
Twenty Twenty-One カスタマイズメニュー

 基本的な項目だけですから、ワードプレスに慣れている方であれば、使い方に困るということはなさそうです。

 Twenty Twenty との比較では、色の指定に『ダークモード』が加わったことと、『抜粋の設定』が加わったことです。

 抜粋の設定は、投稿ページ(投稿を新しいものから順に自動的に表示するページ)で、個々の投稿を表示する際に、本文の全文を表示するか、抜粋のみの表示にするかを選択する項目です。

 抜粋を選択すると、投稿編集画面の右側メニューの「抜粋」から入力した文章を表示してくれます。入力し忘れても本文の最初の部分のみを表示するようになっています。

 Twenty Twenty からの変更点としては、もう一点、フッターに配置されているウィジェットエリアがひとつにまとめられた形になっていることです。ひとつしかなくても、見る側の画面のサイズ次第で自動的に横に並べられますので、このほうが分かりやすいと思います。

 余談になりますが、テーマのカスタマイズ画面のメニュー項目は、テーマを選ぶ際に見るべき箇所のひとつです。トップページのレイアウトに工夫をしているテーマは、ここに設定項目があります。またコーディングしないで、何を変更できるのかをこのメニュー項目で知ることができます。

◆ Twenty Twenty-One は、ブロックエディターを使うことを想定している

テストサイトのトップページのスクリーンショット
テストサイトのトップ画面

 札幌Geezerは、標準テーマの使用感をテストサイトを用いて毎回試しています。Twenty Twenty-One でも、サイトを作成(こちら)してみました。

 投稿ページの表示については、レイアウトが決まっていますので、トップページなどに使う固定ページのレイアウトをどうするのかが、みなさんも興味のあるところだと思います。

 でも、本文エリアを、どのような構成にしてレイアウトするかは、

Twenty Twenty-One の機能で決まるのではなくて、
初期設定の編集画面(ブロックエディター)をいかに使うかで決まる

ということをまずはご理解下さい。

 ブロックエディター(ワードプレスの現在の初期設定の編集画面)では、従来は、コーディングが出来なければ実現しなかったようなレイアウトが、ブロックを組み合わせるだけで出来るようになったことがたくさんあります。

 作成したテストサイト(こちら)でも、ブロックを組み合わせることで、トップッページのコンテンツをレイアウトしていますので、参考にしてみて下さい。

 ここまでくると、テーマをカスタマイズするというよりは、ページを自分好みにレイアウトする感覚です。

・文字の大きさのカスタマイズ方法

 カスタマイズしたくなるのは、文字の大きさでしょう。日本語フォントだと、アルファベットのようにエレガントになりませんので、その変更だけは追加cssを使うことになります。

 テストサイトで使用しているcssの一部を示しておきましたので、これをそのまま「追加css」の欄に貼り付けて試してみて下さい。

 あ、念のためにバックアップを取るか子テーマを作成してから作業することを、強くお勧めします。

.widget-title {
	font-size:2rem;
}

.entry-title {
	font-size:2.5rem;
}

.singular .entry-title {
	font-size:4.2rem;
}

h2 {
	font-size:2.2rem;
}

◇ 自分のサイトがクラシックエディターになっている場合

 この場合には、Twenty Twenty-One に限らずですが、本文部分を自由にレイアウトするのは、難しいと思います。

 現在の標準編集画面となっているブロックエディターと、以前のクラシックエディターの切り替えは簡単ですし、慣れるまでは両者を切り替えながら使うこともできるようになっていますので、この機会に試してみることをお勧めします。

 切り替えの手順については、こちらの動画を参考にして下さい。ポイントを3点押さえるだけで、便利に使えます:

クラシックエディターとブロックエディターの切り替えは便利にできている

◆ Twenty Twenty-One の拡張版 “TT1 Blocks” は、ワードプレステーマの未来像!

 さて、これからワードプレスを使い始める方であれば、Twenty Twenty-One を取りあえずの選択とする理由が、実はもうひとつあります。

TT1 Blocks テーマのイメージ画像
開発中の新テーマ: TT1 Blocks

 それは、Twenty Twenty-One を拡張する形で、現在開発が進められているテーマ “TT1 Blocks(ティーティーワンブロック)” の存在です。

 ブロックの組合せで、サイトのページが構成できることになったとは言っても、それは、今のところは本文エリアだけの話です。

 でもこれが、サイトのタイトルやメニュー、フッター部分までも含めて、全てブロックを組み合わせることで出来上がってしまうとしたら、どうでしょう?

 例えば、メニューはトップ画像の中に収めるとか、メニュー項目の中に「申し込みボタン」を配置するとか、いろいろと便利なことになりそうな予感がしてきます。

 TT1 Block は、ページ全体をブロックで構成してしまいましょうというテーマになっています。すでにワードプレスの公式ライブラリーには登録済みですので、試しにインストールして使って見ることができるように、既になっています(あくまでテスト用です)。

◇ ワードプレスのテーマは、進化し続けている!

 このように、ページのレイアウトがブロックで構成されるようになったおかげで、ワードプレスのテーマも大きく変わり始めているのが現在だだと思います。

 もちろん、初心者にも使いやすくなっているワケで、コーディングのお勉強は、プロにお任せしておいてよさそうな雰囲気です。

初期画面に、ブロックのレイアウトが最初から表示されている部分のスクリーンショット
Artpop の初期画面

 で、蛇足ついでに、もうひとつ新しいパターンのテーマを紹介しておきましょう、”Artpop” です。

 このテーマは、インストール直後に、左の画像ように出来上がりのイメージが画面に表示されるようになっています。

 以前のワードプレスには、これがなかったために、初心者には分かりにくかったのですが、これなら安心です。

 このテーマもやはり、ブロックエディターの特徴を活かしたつくりになっているようです。

 

◆ まとめ

 というわけで、「アートの力って偉大だ」と改めて感じさせてくれた、Twenty Twenty-One 。今後はワードプレスは初めてという皆さんに、お勧めするテーマのひとつになりそうです。

 札幌Geezerの場合は特にそうかも知れませんが、投稿する記事は理屈っぽくてドライな感じになりがちです。添付する画像や配色に、もっと意識を向けたいと思った次第です。

 でもこうして、ワードプレスにハマっていくというよりは、その周辺のことを含めて、ハマっていくんですね。

 だからこそ面白いわけですから、これで、いいのだ♫♫

PR: 仕事を発信するなら

WordPress Geezer 養成所のトップ画像


時間の節約が鍵
自習室はこちら