ホームページ制作はコアース・デザインへ!

【THE THOR】AFFINGER5から移行した時の表示崩れと修正方法(見出し編)

この記事とシリーズでは、WordPressのテーマをAFFINGER5から「THE THOR(ザ・トール)」に移行した時に起きた表示崩れとその修正方法を書いています。今回は「見出し編」です。

目次

移行時の環境

サイトの環境によって、起きる表示崩れも変わってくると思います。今回テーマ移行をした時のサイトの環境は以下の通りです。

WordPressバージョン:5.9
サーバーPHPバージョン:7.4

移行時に起きた見出しの表示崩れ

見出しの種類は基本的に1~6まであり、ブログ記事内では見出し2から4くらいまでをよく使うでしょうか。当ブログでは、THE THORに変更した時の見出しの表示は単なる太字や大文字で表示されるだけでした。エディター上ではマークアップした通りの見出しとして認識していましたが、表示が崩れている状態でした。

対処方法

対処方法は簡単でした。THE THORの見出しデザイン設定で設定を行うだけです。

外観>カスタマイズ>パーツスタイル設定>見出しデザイン設定(個別ページ用)

当ブログでの設定

メインカラー(濃い赤)を使いながら、デザインを選択しました。文字色はどれも同じ色です。具体的な設定とプレビューを以下にご紹介します。

見出し2

見出し3

見出し4

見出し5

きっとほかの組み合わせでもっと素敵なデザインもあると思います。ご自身のサイトのテーマカラーやコンセプト、好みやペルソナに合わせて組み合わせていけますね。

まとめ

いかがでしたか。今回はテーマ変更時の表示崩れの一つである見出しについて、修正方法をご紹介しました。当サイトで実際に使用している設定です。

次回も実際に起きた表示崩れとその修正方法をご紹介します。最後までご覧いただきありがとうございました。

プロフィール

コアース・デザインのWebディレクターです。WordPressなどCMSでのホームページ制作やブログ運営にかかわるお役立ち情報を、初心者目線で発信していきます。

目次