theme twenty twenty-one

私はホームページを始めた頃はhtml用語で手書きで制作していました。きれいなページを作ろうとウェブからcssファイルを頂いてきて制作していた頃があります。現在はCMSのWORDPRESSを使ってホームページを維持しています。

WordPressはpostページや固定ページ、いわゆる動的ページや静的ページ、どちらでも形成できるため、とても便利なツールです。

このWordpressを使ってホームページを作るのには、themeとpluginが必要です。

以前はtheme twenty tenを使って維持しました。これはオーソドックスなページで少し堅い感じでした。もう少し自由度のあるものを探していろいろなthemeをためしました。つい最近までは GeneratePressを使って表示していました。これは軽量で高速表示してくれて綺麗なページを作れます。しかしAMPという表示があるみたいです。これを満たすのにはGeneratePressは満足できないような気がします。

AMPはgoogleとツイッターが提唱しているモバイル端末に高速に表示をさせる仕組みです。これを考えたときにWordpressの更新5.6シモンになったときにtheme twenty twenty-oneが実装されました。AMPを考慮して、かつ自由度の高いthemeと書いてあります。

twenty twenty-one

すぐに使ってみました。しかしページタイトルがあまりにも大きくてどうにも使えないと思いました。Wordpress twenty twenty-one カスタマイズのキーワードで検索してこのページタイトルを小さくする方法を見つけました。

追加cssという項目に 

.singular .entry-title {
font-size: em;
}

emの前にお気に入りの数字を入れるとページタイトルをいろいろな大きさにコントロールできるみたいです。

これだけでは単純な表示しかできません。ヘッダーに画像を使いたい サイドバーを使いたい footerを加工したいといろいろな願望があります。これを満たすのにはどうしたらいいのか、ウェブを探してみました。

pluginを使うとこれを満たすことができる事が分かりました。wordperss.orgのサイトでpluginを探すします。検索用語 twenty twenty-oneでいくつかのpluginが表示されました。日本語のページ対応したpluginが見つかりました。

Japanized for Twenty Twenty-One

Japanized for Twenty Twenty-Oneがそれです。これを操作してみましたら、私が求めている事ができることが分かりました。他のpluginも試してみましたがこのpluginが最適でした。

twenty twenty-oneで完成したページをlighthouseで調べてみると高得点が出ます。AMPだけのページにした場合 100点や90点以上の項目ばっかりで満足できます。非AMPとAMPを共存させた場合でもほとんどの項目で90点以上です。

PageSpeed Insights でページを検査してみますとAMPだけにするとPCで99点モバイルで90点以上です。非AMPとAMPでもPCで90点以上モバイルで60点以上です。

以上のように、このシステムで行こうと思っています。

投稿日:
カテゴリー: 未分類