Twenty』、表示の仕方・速度・カスタマイズ方法などを徹底チェック2019/12/22こんにちは、管理人@SS_mshpです。Twenty』についてチェックしていきます。このテーマは、これからWordPressをやってみようという方は、確実にお目にかかるはずです。Nineteenのときはやけに文字がデカくなっただけだった印象を受けましたが、今回のテーマはどうなのか?『表示の仕方・速度・カスタマイズ方法』などをチェックしていきます。Twentyとは?WordPressを長年使っているユーザーにはおなじみ『ほぼ毎年リリースされる公式・デフォルトテーマ』です。Nineteen』のときはブロックエディター連動性などが謳われましたが、今回もその傾向は同じ。文字大きめ&PCも1カラムという方向性も一緒です。Seventeenのほうが使いやすい感じ(笑)しかし、ヘッダー内にいろいろ読み込まれるファイルが多いわりには、表示が速く軽快である・要素の色合いを自動調整するなどの特徴もあります。公式にしては結構頑張った印象があります。Twentyでは、表示速度の面では、かなり改善されてきているという印象を受けました。検証した環境は、ヘテムルやエックスサーバーにくらべると遅い印象を受けるロリポサーバー、しかし処理速度が速いPHP7.3モジュールモードです。ツールは『googleページスピードインサイト』を使用しました。『90点』が出ました。昔は『重い』といわれていたWordPressですが、80~90以上のスコアが出せると、体感的にも『サイトがいつまでも開かないから、別のサイトを見に行こう』というリスクも、最小限にできると思います。Twentyの表示のしかた~相変わらず文字が大きすぎる印象(笑)PCビューで表示してみました。前バージョンと同様にタイトルやh2・h3みたいな見出しが、かなり大きめに出る印象です。長めのタイトルで横長ディスプレイだと、サムネが見えずにタイトルだけで1画面埋まってしまうかも。タブレットビューです。タブレットでは、ロゴ&ディスクリプションが中央寄せになりました。縦長なので、タブレットはちょうど良いかも。タイトルだけで1画面埋まってしまいました。読みやすいっちゃ読みやすいけど、文字サイズはちょっと検討したいです。Twentyのスゴい機能~カスタマイザーで背景色を変えると、文字などの要素の色を自動調整また、カスタマイザー内でスゴい機能も発見しました。『色合いを自動調節』というものです。背景を暗めの色合いにすると、自動で文字色を明るめの色合いに調整してくれます。要素ごとにCSSで色調整みたいなのは結構大変なので助かります。Twentyの基本的なカスタマイズ方法トップ・アーカイブページを、全文表示→要約の表示にこのテーマにしたときに、まず気になる点は『トップページやカテゴリー・タグ・アーカイブページが全文表示』になっている点。文章を長めに書いてあるブログだと、長くてスクロールが大変になります。要約表示にするには、カスタマイザー内のテーマオプション→『アーカイブページで投稿に表示』を『要約』にしておけばokです。基本1カラムレイアウト(PCも)なので、ウィジェット類はフッターに表示されます。フリーエリアに簡単なプロフィールを書く・カテゴリ表示する・月ごとアーカイブのリンクなどが考えられますが、フッターのほうまでがっつりスクロールして読む人は少なそうなので、必要最低限の表示にしておくとよさそうです。管理人は普段、ヘッダーPHPファイルの中に画像タグを貼ってロゴを出力していますが、こちらでも、よくあるテーマ同様、カスタマイザーでロゴ表示を設定することができます。オリジナルロゴを使って雰囲気など認知・差別化をしたい場合は、デザイナーに頼むか、グラフィックツールを使えるようにしておきましょう。フルスクリーン背景画像なども可能カスタマイザーで背景画像も設定可能です。小さめの画像を繰り返し表示したりすると、昔のサイトみたいな野暮ったさが出てしまいます。お勧めは大きめ画像を固定でフルスクリーン表示です。写真の例だと、単純に設定しただけで、文字が見えにくくなっているので、『画像のトーンを落とす・ぼかす』か、『CSSやカスタマイザーでフィルターをかけて文字を見やすくする』などします。Twentyはオリジナルデザインにカスタマイズするのに向いている?テーマ外側を見た印象は、シンプルなのでオリジナルデザインカスタマイズにも使えそうな印象。CSSが結構長い(6000行・ただしブロックレイアウトや、font-variation-settings・font-smoothingなどのフォント関連が多めな印象)、かつ1カラム固定なので、『ちょっとCSSを付け足して、1カラムのオリジナルデザイン』とかでしたら、カスタマイズもそんなに大変じゃないと思います。Seventeenを改造して作るほうが簡単でシンプルにできそうです。ウィジェット・背景をつかう場合はフルスクリーンが良いかも『ちょっとCSSを付け足して、1カラムのオリジナルデザイン』みたいなカスタマイズは楽そうまとめるとこんなところでした。使っているテーマがある場合は、無理してこちらのテーマに戻す必要は無いかもしれません。いえ、これからWordPressを使う方は、なんらかの形でお世話になることがあるかもしれませんので、特徴をしっかり押さえて『そのまま使う』『少し改造する』『テーマを切り替える』など、判定していただければと思います。wpサイト制作受付サイトへ*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。今回はYouTube活用テクニックです。検索:このサイト管理人についてこのコラムと『アトリエss』サイトを運営しております、管理人の五十嵐と申します。活動地域は東北の仙台市です。