【WP】THE THORで記事内のカラムを揃える方法(CSS)

有料ワードプレスのテーマTHE THORで投稿ページや固定ページで2カラムや3カラムにした時に上下位置がずれてしまう場合の解決方法となります。(私は別の運営サイトの一つにTHE THORのスタイル04を使っていますのでその方法となります。)

カラムがずれる

ブロッグエディターで記事を作成している発生してしまうようで、クラシックエディターを使用すると解決する場合があるそうですが、出来れば直感的に使えるブロッグエディターを使いたい人もいると思います。

しかし記事の中でこんな風に2カラムと3カラムを設置するとカラムの上下位置がずれてしまいます。

右に行くほどカラムの先頭が下に下がる
右に行くほどカラムの先頭が下に下がる

かなり見た目が悪いですね。これだと使えませんので修正していきます。

修正方法

子テーマのテーマファイルにコードを追記して修正します。「外観⇒テーマエディター⇒style-user.css」を開きます。この中にそのままこのコードをコピペします。

/* 記事2-3カラムの位置調整 */
.wp-block-column {
	margin-top: 20px!important;
}

コピペした後に下にある「ファイルを更新」するとこんな風に上下位置が揃います。

the thor 2カラム揃える

注意点〈目次の位置〉

設定で目次を表示させている場合に、目次は記事内の最初のhタグの手前に自動で挿入される仕様になっています。下の記事作成画面の場合であればタイトルのすぐ下から2カラムを使用し、最初のカラム内に見出しh2タグが入っています。

もしこのままにしてしまうと、最初のカラム内のh2タグの手前に目次が来ることになり、こんな風に目次がカラム内に一緒に入ってしまうことになります。

これを解決するには目次を呼び出すショートコード[outline]を2カラムの上に入れてあげると目次とカラムはそれぞれ独立した位置に表示されます。

こんな感じでタイトルの下にブロックを追加してショートコードで[outline]を入れる

そうすると下の画像のようにちゃんと2カラムの上に目次が表示されます。

まとめ

ワードプレス有料テーマTHE THORの2カラムを揃える方法をお伝えしました。高機能なテーマですが、ちょっと問題もありますので困っている人は参考にしてみて下さい。

トップへ戻る