WordPressの新しい標準テーマ Twenty Twentyを使ってみた

ブログな机上の写真

 WordPressが5.3にバージョンアップされて、同時に、新しい標準テーマTwenty Twenty が正式にリリースされました。標準テーマとは、ワードプレスを初めてインストールすると、初期設定で選択されているテーマです。

 実は札幌Geezerでは、Twenty Twentyの正式リリースまで待つことができませんで(笑)、開発段階のバージョンを入手して、新しいテーマがどのような感じなのかを試していました。

なぜ Twenty Twentyがそんなに気になるのか?

 なぜそんなに標準テーマに興味があるかというと、「誰にでも簡単に使えるようにするには、どうするのがベストか」ということを、WordPressが、今でも模索し続けているからです。

 ワードプレスといえば、コーディング(プログラミング)ができなければ使えないものというイメージを持ってしまっている方が多いと思いますが、そんなことはありません。

 特に、昨年のTwenty Nineteenでブロックエディター(Gutenberg)が導入されたことで、コーディングを知らなくても自由になることが一気に増えました。このことは、古いワードプレスのイメージを塗り替えるための大きな第一歩だったと、私的には思えるのです。

 また、ブロックエディターの導入で、テーマそのもののあり方が変わっていくはずで、それはどういう方向なのかに興味があるわけです。あ、でもそんな話はどうでもいいですよね(笑)。

 前置きが長くなりましたが、この投稿では、Twenty Twentyを実際に使ってみて、以前の標準テーマとの比較から、目立って変わったことを3点ほど説明します。

Twenty Twentyでは、3種類のテンプレートが用意された

コーディングのコードの写真
WordPressは、coding 知識なしでもOK?

 テンプレートとは、レイアウトのひな形のことです。

 Twenty Twentyでは、トップページ用と思われるカバーテンプレート、投稿用と思われるデフォルトテンプレート、そして固定ページ用と思われる全幅テンプレートのいずれかを、投稿(あるいは固定ページ)毎に選択することができるようになりました。

 で、Twenty Twentyで新たに用意されることになった3つのるテンプレートを使って、Twenty Twenty のデモサイトも作成してみました♪

 現時点では、画像と文字の回り込みなどの細かなところで、まだバグはありますし、Twenty Nineteenで実現したWYSIWYG(編集画面で見ているとおりに、後悔される)が実現していません。こうした細かなことは、今後、順次修正されていくはずです。

 で、ひな形が3種類になったことで、私的には、使いやすいテーマにになったと思います。

 いずれのテンプレートにも、サイドバーは配置されていません。昨年のTwenty Nineteenもそうでしたが、これはやはり編集画面の幅を広くとって、自由にブロックを配置できるように、という意図だと思います。

◆ Twenty Twentyのレイアウトは、ページビルダーが人気になっていることも背景にある?

 実は欧米では、ページビルダーとよばれているツールが以前から人気になっています。先駆けとなったElementor、現在一番人気と言われているDivi、新しいものではBrizyなどなど、現在はよりどりみどり状態です。

 これらのツールは、ブロックを編集画面上で組合せることで、ページを作成してしまうものなので、テーマそのものには余計なものが付いてこないほうが使いやすいようです。Twenty Twentyにサイドバーがないのは、そうしたことも影響しているのかも知れませんね。

◆ Twenty Twentyのデフォルトテンプレートはスマホを強く意識した結果?

 また、デフォルトテンプレートを使ってみて感じるのは、スマホでウェブサイトを見る人が多くなっていることを、強く意識しているということです。

 理由は、サイドバーがないにもかかわらず、本文の1行の幅を狭めに設定してあるからです。投稿に画像を貼り付ける場合、パソコン上で見る場合には、配置やバランスが気になりますが、スマホ上では単に上から下へ流すように表示されるだけです。

 そう考えると、スマホを縦の位置で撮影した写真や動画を投稿に貼り付ける方が今後増えるかもしれませんよね?特に2020年は、5Gスマホが日本でも本格的に導入されるようですし。

 縦の動画をワードプレスに貼り付けることができることは、前回の投稿で確認しました。

背景色を選択できるようになった

 大きな特徴の二つめは、コンテンツ部分の背景色を選べるようになったことです。これまでは、段落毎に背景色を変えることは出来ましたが、Twenty Twentyでは、コンテンツ部分全体の色を変えることが可能です。

 今のところ、背景色の設定はカスタマイザー(「外観」→「カスタマイズ」→「カバーテンプレート」)からしか行うことが出来ませんが、ここで背景色を設定すると、編集画面の背景色も変更されます

 なので、本文の文字色やハイライトする場合の色の選択をする時に、背景色との兼ね合いを目で確認しながら、色を選ぶことができるようになりました。細かなことだと思われるかも知れませんが、これだけでもデザインの幅がでますし、作業が随分と楽になります。

◆ グループブロックを使うことで、カラフルなページを作成できるようになった

 また、Twenty Twentyと同時に公開されたWordPress 5.3では、ブロックエディター(Gutenberg)の機能が強化されて、グループブロックにも背景色を指定することができるようになりました。

 これによって、本文部分全体の背景色との組合せで、カラフルなページを簡単に作成することができるようになりました。上記のデモサイトの特徴を記載した部分は、このグループブロックを使っています。

カバーテンプレートのトップ画像は、シェードの色合いの調整が可能になった

カラースキームをイメージした写真
色の組合せは無限大

 トップページの最初に大きな画像をドーンと配置するのは、Twenty Seventeen からだったと思います。で、この画像にサイトのタイトルなどの文字を重ねて表示するのがクールだったのですが、シェードをかけてやらないと読みにくくなるという難点がありました。

 昨年のTwenty Nineteenでは、投稿ページを表示した際に、トップ画像にシェードが自動的にかかるようになりましたが、色や透明度の調整は出来なかったと記憶しています。

 今回リリースされたTwenty Twentyでは、カバーテンプレートを使った場合に限られますが、トップ画像にかけるシェードの色や透明度を自由に指定できるようになりました。

 ということは、上記のコンテンツ部分の色指定とあわせて、好みのカラースキームでトップページをデザインすることができるということになります。

 こうなってくると、色の組み合わせなど、デザイン系の勉強をしたくなりますが、自由度が高くなるということはそういうことだと思いますし、だからこそWordPressなんです、はい。

まとめ

 WordPressの開発は、同時並行でいろいろなことが進んでいますので、何が便利になったのかの全てを追いかけるのは、シンドイ部分があるかも知れません。

 札幌Geezerでも、Twenty Twentyの使い勝手を試しているうちに、投稿をリスト表示するウィジェットを発見しました。WordPressに付いてくる標準ウィジェットのひとつになっているようですが、これがブロックエディター対応になっていて、とても便利です。前述のデモサイトでも使ってみました。

 デモサイトでは、カスタマイザーの追加CSS機能を使って、使用している文字のフォントを変更してありますので、参考までに、ここに貼り付けておきますね。

 CSSは、htmlの概要を理解している方であれば、参考書籍の拾い読み程度でも、この程度のことならすぐにできるようになります。

 そうそう、コーディングといえば、先日、Jetpackの開発に携わっている方々と交流する機会がありました。

 そこで出た話題なのですが、WordPressのコミュニティは、コーディングをする人達と使う側の人達との間に大きな溝があるということでした。

 札幌Geezerは、もちろん使う側です。コーディングもやればオモシロイということは分かっていますが、発信することとの比較では、コーディングの勉強は優先順位を下げざるを得ません。

 フリーランスをしていると、なにかと優先順位付けですよね?

 それでも、好きなことは好きなワケで、正式リリース前の段階からTwenty Twentyを試してみたくなったりするのは、まさにそこなワケでして(滝汗)。

span.wp-svg-pencil.pencil {
	font-size:80px;
	color:midnightblue;
}

span.wp-svg-wand.wand {
	font-size:80px;
	color:midnightblue;
}

span.wp-svg-file-3.file-3 {
	font-size:80px;
	color:midnightblue;
}

.widget-title {
	font-weight:500;
	font-size:3.1rem;
	color:midnightblue;
}

.entry-title {
	font-weight:500;
	font-size:6.8rem;
}

h2 {
	font-weight:600;
	font-size:3.6rem;
}
h3 {
	font-weight:500;
	font-size:3.2rem;
}
h4 {
	font-weight:500;
	font-size:2.8rem;
}

.sidewidget-color {
	color:midnightblue;
}