THE THORのTOPページの左カラムを2列にするには?

THE THORをインストール直後の初期デザインでは、アイキャッチが大きく表示されるレイアウトになっています。

THE THORのデモサイトを見ると、2列のカードレイアウトと呼ばれる設定になっているようですが、この変更を行う設定がなかなか見つかりませんでした。

「THE THOR TOP 2列 レイアウト」などでググってみるとようやく設定方法にたどり着いたのでメモ。

TOPページ左カラムのサムネイル配置

THE THORのTOPレイアウトは次の3種類があります。

  • ワイドレイアウト
  • カードレイアウト
  • ノーマルレイアウト

ワイドレイアウト

ワイドレイアウトは左カラムに大きく1枚ワイドに表示されるパターンです。

視覚的な見出しで印象に残るTOPページに仕上がりそうですが、サムネイルの用意に手間を掛けたくないようなときは画像選びが難しそうです。

カードレイアウト

カードレイアウトは、左カラムのプレビュー記事が横2列に表示されるタイプです。

表示されるサムネイルは大きさもある程度変えられそうです。また、CSSをいじればプレビュー記事の文字数なども変更できそうです。

ノーマルレイアウト

ノーマルレイアウトは、表示されるサムネイルがワイドレイアウトに比べて少し小さめで、要約は横並びに配置されます。

サムネイルの選択やTOP全体の雰囲気で選ぶと良さそうです。

TOPページの左カラムのデザイン設定をするには?

これらレイアウトの設定を変更させるにはWordPressのダッシュボードから「外観 」→「カスタマイズ」へと進みTHE THORのカスタマイザーを表示させます。

「アーカイブページ設定」>「コントローラー設定」へと進んで以下の設定画面を表示させます。

スクロールすると「レイアウト切替ボタンの初期checkedを選択」のプルダウンがあるので、「カードレイアウト」を選択。

その他、状況により以下を選択可能です。

  • ワイドレイアウト
  • カードレイアウト
  • ノーマルレイアウト

レイアウト切り替えボタンを入れる場合はすぐ上の

「■レイアウト切替ボタンを表示するか選択」「表示」にします。

これにより、ブログ画面上で各選択が可能になります。

設定が終了したら「公開」ボタン、で完了。

カードレイアウト上部の「新着順」「人気順」「お勧めカテゴリ」

デモレイアウトでは、カードレイアウト上部に「新着順」「人気順」「お勧めカテゴリ」などのリンクテキストが配置されています。

こちらも「コントローラー設定」から表示・非表示ができます。

設定方法は、先ほどのカスタマイザー画面から
「アーカイブページ設定」 > 「コントローラー設定」をクリック。

「コントローラーを表示するか選択」「表示」に設定。
「コントローラーのフレームを選択」はシャドウフレームなどアクセントを付けることができます。

「新着順」「人気順」の表示は表記も変更可能です。

「おすすめカテゴリ」も同様に設定可能です。状況に合わせて表示・非表示が可能です。

以上、TOPページの記事概要欄のレイアウト変更手順でした。