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

カテゴリー:

タグ:


ブログな机上の写真

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

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

 追記:Twenty Twenty-One については、こちらの投稿をご参照下さい。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 これらのツールは、編集画面上でブロックをドラッグ&ドロップで組合せていくことで、ページを作成してしまうもので、とても便利です。

 このため、テーマそのものには余計なものが付いてこないほうが使いやすいようです。Twenty Twentyにサイドバーがないのは、そうした点も影響しているように思われます。

 私も実際に、Twenty Twenty にElementorを組み合わせて使ってみましたが、以前はサイドバーに配置していたウィジェット(投稿カレンダーやカテゴリーの表示など)を編集画面内の任意の位置に配置することができるようになっていました(こちらの『WordPressのページビルダー・プラグインとは?』を参照)。

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

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

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

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

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

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

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

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

 なので、本文の文字色やハイライトする場合の色の選択をする時に、背景色との兼ね合いを目で確認しながら、色を選ぶことができるということになります。

 細かなことだと思われるかも知れませんが、これだけでもデザインの幅がでますし、作業が随分と楽になります。

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

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

 右に表示(スマホは下)に表示しているのが、その例です。画像ではありませんので、ちゃんとリンクも効いています。

 これによって、本文部分全体の背景色との組合せで、カラフルなページを簡単に作成することができるようになりました。

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

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

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

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

.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;
}

関連する他の投稿

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください



%d人のブロガーが「いいね」をつけました。