wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

Twenty Twenty-Oneの表示のしかた・速度・機能・カスタマイズ方法などを徹底チェック【WordPress5.6テーマ】

   

こんにちは、管理人@SS_mshpです。


今回は、2020年12月8日にWordPressが5.6にアップデートされるので、このバージョンからデフォルトテーマになる『Twenty Twenty-One』を使ってみたので、その様子をお知らせします。個人的にはTwenty Twentyより使いやすいかもと思いました。WP5.6リリース前に『表示のしかた・速度・機能・カスタマイズ方法』などをみていってみましょう。

Twenty Twenty-Oneテーマとは?入手方法は?


2020年12月8日にリリースされる、WordPressバージョン5.6からついてくる、デフォルトテーマです。前のデフォルトはTwenty Twentyでした。パッと見だと、前バージョンに比べて、タイトル文字サイズやカラム幅バランスを取りつつ、アイキャッチを横幅全体にとるなどモダンな感じになっており、カスタマイザーなどもシンプルになっているようです。

この記事執筆時期(wp5.6リリース前)での入手方法は、公式サイトから5.6 ベータ版をダウンロードすると、付属してきます(zipにして管理画面からアップすれば、そのまま使えます。ただし本体やPHPバージョン注意)。
WP5.6リリース後は、バージョンアップおよびインストール時にそのままついてきます。

Twenty Twenty-Oneチェック~表示・速度・カスタマイズ項目

sp/pc表示のしかた~一覧は前バージョンより落ち着いた感じ?


まずは一覧を表示させてみます。一覧は前バージョンより見やすい印象。タイトル文字サイズなどのCSSは、『652px以上は--global--font-size-xl: 2.5rem;』みたいに決めておいて、変数global--font-size-xlで呼び出す(font-size-h2: var(--global--font-size-xl);)形式です。

しかし投稿詳細ページのタイトル『.singular .entry-title { font-size: var(--global--font-size-page-title);}』の部分は、デイスプレイ幅652px以上で『--global--font-size-xxl: 6rem;』が入ってくるので、やたらデカくなりますので注意しましょう

アイキャッチ画像も横幅100%で取ってきているようです。少し小さいサイズをアイキャッチで使っている場合、PCの横幅が大きいディスプレイだと広がってぼやけるので、この点も注意が必要です

ちなみに・・

Twenty Twentyだとこんな感じになりますね。タイトルがやけに主張している感じ。

表示速度は速い!(ロリポstandard PHP7.3モジュール)sp96/pc99


あとは、『遅すぎるとユーザー離脱が怖い』ということで、ページ表示速度も。測定スコアは『sp96/pc99』(ロリポstandard PHP7.3モジュール・ストレージSSDタイプ)が出ました。

構成ファイルなどが多く、容量もテーマだけで3.31MBありますが、画像lazyloadなどが効いているおかげか、結構速め。各種サーバー会社のスタンダード以上や、ヘテムル・エックスサーバーなどでは、気にならないレベルと言えそうです。逆にデフォルトテーマの段階で高速化対応がされているので、重いテーマは今後厳しいかも。

カスタマイザー項目~前より減ってシンプルに


カスタマイザー項目です。Twenty Twentyにあった『カバーテンプレート/オーバーレイ背景』や『オプション(検索など)』がなくなり、項目が減っています。色も背景だけ調整といったシンプル目なセッティングに。

方向性としては『カスタマイザーはあまり使わない』『見た目のスタイリングは、ブロックエディター・またはカスタムCSS(ヘッダーの一番下に出るやつ)』という印象を受けました。

Twenty Twenty-Oneカスタマイズ~追加ブロックパターン

ブロックエディタ向きデフォルトテーマTwenty Twentyと比較してみたところ、いくつか搭載されているブロック・パターンに変更があったようです。カスタマイザーでの変更が得意でないテーマですが、追加されたブロックパターンを使いこなしてスタイリングを整えることが可能です。

見出し向きなlarge textやmedia and text・連絡先やsns載せてもokなlinks areaのブロック


既に記事タイトルでデカい文字が出力されているんですけど(笑)、通常の見出しブロックのほかに、ラージテキストエリアのブロックが。media and textは、写真付きの見出しなどに使っても良さそう。links areaはフッターとかにありそうなイメージですね。一部、テンプレートウィジェットと被るものもあります。

画像加工ソフトを使う手間が省けそう!overlapping imegesなどの写真配置ブロック


昔は画像加工ソフトとかで作って載せていた、複数の画像を重ねたようなパーツ。ブロックとして提供されているのでサックリ利用可能。画像加工ソフトなどを使う手間が省けると思います。説明を混ぜるときはoverlapping imeges and textを。ここら辺の名称は本リリース時には日本語翻訳されるでしょう。

リンクとミニサムネ画像を指定できる、ポートフォリオ・リスト


これも結構便利そう。ただし、『リンク先およびサムネは一個一個指定』という形になります。管理人だったら、PHPとかでカテゴリ指定して新着記事・サムネ・タイトル取得できるようにして、あとは放置します(笑)

ビジネスサイトにもok!問い合わせ先など追加ブロック


デフォルト状態で、『メルアド・住所・アイコンでsnsリストが3列で入ってくる』というブロック。こちらも『テンプレに入れたいときはウィジェット・単体の記事で使うときはブロック』というように使い分けましょう。

あとがき・まとめ

  • Twenty Twenty-Oneは、WPバージョン5.6からついてくる
  • 表示速度は速く、前バージョンより一覧が見やすいが、カスタマイザー項目は減っている
  • 追加されたブロックパターンが強力かも

まとめると、こんなところでしょうか。カスタマイザーやCSS変更よりも、追加されたブロックを駆使してサイトを作っていく感じでした。追加ブロックで使えそうなものがある場合は、このテーマをチョイスでok、それ以外の場合(一からオリジナルデザインにカスタマイズしたいなど)は、自作かよりシンプルなテーマをチョイスする形になりそうです。

◆この記事で問い合わせ

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。
『サイトを既にお持ちで、リニューアル』の場合は、¥10万以下でご対応します(月額管理費/24回支払い縛りなどの強制無し)。

【カテゴリ】 - wordpressテーマ情報
【タグ】 -

  関連記事

【お洒落1ページ型無料WPテーマ】onepressを使ってみてレビュー・特徴やカスタマイズ時のポイント

今回は、WPテーマを調査していて見つけた、良い感じの1ページ型テ ...

【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok

今回は、WordPressバージョン5以上に更新したら勝手につい ...

WordPressでヒーローヘッダーを実装できる、カッコいいテーマ・Exoplanet(無料版・有料pro版あり)レビュー・カスタマイザー設定のしかた

今回は、テーマを使って、WordPressでヒーローヘッダーを取 ...

【おすすめWordPressテーマ】Maxwell~シンプル・洗練されたブログメディア向きテーマ・スライダーやレイアウト変更も簡単

今回は、管理人も別サイトで使ってみた、無料WordPressテー ...

【音楽サービス・バンド向けwpテーマ】元バンドマンのweb開発者が、WordPressテーマ『Rock Star』をレビュー

今回は、ネーミング的に音楽サービス・バンドなどに使えそうなWor ...

【wordpressカスタマイズ】llorix_oneなどビジネストップ1カラムテーマで、カスタマイザーで入らない動画・オーディオを入れる

今回は、人気の海外ディベロッパーのwordpressテーマで、動 ...

【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)

今回は、推奨されてるWPの子テーマについてですが、『結局親テーマ ...