カテゴリー
未分類

Twenty Twenty

Twenty Twenty

 このサイトのテーマはワードプレスのTwenty Twentyを使用しています。レスポンシブデザインで、表示画面の幅に合わせて自動で表示方式が切り替わります。PCサイトと別にスマホサイトを作る必要も、PCサイトをスマホ用に変換するサービスも必要なくて便利です。

 但し、GoogleマップやGoogleカレンダーをそのまま張り付けると、PCやタブレットでは異様に縦長に表示されてしまいます。張り付けるHTMLのwidth=”〇〇”の〇〇の部分が幅のピクセル数を表しますが、この値を100%に書き換えれば解決します。スマホで見やすい様にheightのピクセル値を400にしましたが、PC画面では少し幅広に感じます。 この方法では表示画面の幅によって縦横比が変わりますが、縦横比を固定する方法の難易度が高いので妥協しました。プラグインを利用する方法もありますが、ぺージを軽くするためにプラグインの使用は最小限に控えています。

 このテーマのもう一つの難点は、ヘッダー部分に表示されるページタイトルの文字サイズがバカでかく、文字数が多いとPC表示でも一行に収まりません。外観 ≫ カスタマイズ ≫ 追加CSS と進み、ページタイトルを非表示にするコードをググってコピペしました。ページタイトルが必要な場合は、本文中に見出しとして挿入すれば文字サイズも自由に選べます。これだけでは、ヘッダー部分のタイトル表示領域が無駄な空白として残り、余分にスクロールが必要です。

 外観 ≫ テーマエディター ≫ メインインデックスのテンプレート ≫ template-parts ≫ entry-header.php と進み、18行目から20行目のコードを削除してファイルを更新しました。これで無駄な余白を削除できましたが、どれが削除すべきコードか分からなかったので、勘と僅かな知識を頼りに試行錯誤を重ねました。

 テーマの編集はレイアウトを崩してしまう可能性があるので、試行前にファイルのバックアップをしましょう。バックアップファイルの作成や復元が出来ずにレイアウトが崩れてしまった場合は、一旦別のテーマに切り替え、崩れてしまったテーマを削除してから再び同じテーマをインストールすれば解決します。

 表示速度、見やすいレイアウト、投稿記事の内容など、これからも見る人の使い勝手を意識してサイトの改善を進めていきます。