【THE THORメインカラム・記事一覧リストのカスタマイズ】初心者向けに画像付きで解説

1カラム（メイン1列）

2カラム（メインとサイド）

3カラム（メイン3列）

カラムとは、Webページのレイアウト構成のこと。

THE THORメインカラムカスタマイズの手順

THE THORメインカラムのカスタマイズサンプル

2カラム

1カラム

サイドカラム右側

サイドカラム左側

シャドウフレーム
（◯内は拡大）
 ボーダーフレーム
（◯内は拡大）

なし

表示

非表示

ワイドレイアウト

カードレイアウト

ノーマルレイアウト

ズーム

マスク

ズームグレイ

マスクズーム

ズームセピア

マスクズーム回転

ズーム回転

シャドウフレーム

ボーダーフレーム

なし

 角丸

シンプル

ボトムボーダー

はみ出すボーダー

シンプルワイド

内側ボーダー

【カスタマイズ１】メインカラムのレイアウト

THE THORメインカラムのレイアウトは、1カラム・2カラムから選択できます。

選択したカラム数によって設定できる内容が異なります。

1カラム：横幅の指定
2カラム：サイドカラムの位置の指定

１カラム

２カラム

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

アーカイブページ設定＞レイアウト設定＞カラムを選択

選択して をクリック

【カスタマイズ２】1カラムのときの横幅

THE THOR1カラムの横幅は、100%・1000・900・800・700から指定ができます。

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

アーカイブページ設定＞レイアウト設定＞1カラム時のメインカラムの横幅を選択

選択して をクリック

【カスタマイズ３】2カラムのときのサイドカラムの位置

THE THORの２カラムは、サイドカラムの位置を左右のどちらかに指定できます。

サイドカラム右側

サイドカラム左側

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

アーカイブページ設定＞レイアウト設定＞2カラム時のサイドバーの位置を選択

選択して をクリック

【カスタマイズ４】メインカラムのフレームデザイン

THE THORメインカラムのフレームデザインは、なし・シャドウ・ボーダーから選択できます。

シャドウフレーム
（◯内は拡大）
 ボーダーフレーム
（◯内は拡大）

なし

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

共通エリア設定＞メインカラムエリア設定＞メインカラムのフレームを選択

選択して をクリック

【カスタマイズ５】記事一覧リストのフレームデザイン

THE THOR記事一覧リストのフレームデザインは、なし・シャドウフレーム・ボーダーフレームから選択できます。

記事一覧リスト

記事一覧リストのフレーム

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

アーカイブページ設定＞記事一覧リスト設定＞記事一覧リストのフレームを選択

選択して をクリック

【カスタマイズ６】記事一覧リストの画像の大きさ

THE THOR記事一覧リスト画像の大きさは、16:9・4:3・1:1・非表示から選択できます。

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

アーカイブページ設定＞記事一覧リスト設定＞画像アスペクト比を選択

選択して をクリック

【カスタマイズ７】記事一覧リストで表示する項目

THE THOR記事一覧リストで表示できるのは、下記の６項目です。

1. 投稿日
2. 更新日
3. 閲覧数
4. コメント数
   （人気順のみ表示）
5. 表示文字数
6. リンクボタン

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

アーカイブページ設定＞記事一覧リスト設定＞それぞれの設定設定

最後に をクリック

【カスタマイズ８】記事一覧リストのマーク（ピックアップ・NEW）

THE THOR記事一覧リストのピックアップ・NEWマークの色は、カスタマイズできます。

ピックアップ：
先頭固定された記事に表示NEWマーク：
新しい投稿に表示

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

アーカイブページ設定＞記事一覧リスト設定＞NEW&ピックアップリボン設定

選択して をクリック

リボンの色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

アイコン名がわからないときは、左上の「アイコンオプション」のボタンをクリック

アイコン一覧が表示されるので、コードをコピーしてください

1. WordPressのダッシュボード
2. 投稿
3. 投稿一覧

「クイック編集」をクリック

「この投稿を先頭に固定表示」にチェック をクリック

【カスタマイズ９】記事一覧リストコントローラーの表示・非表示

THE THOR記事一覧リストに表示するコントローラーは、カスタマイズできます。

THE THOR記事一覧リストのコントローラーは、表示・非表示から選択できます。

表示

非表示

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

アーカイブページ設定＞コントローラー設定＞コントローラーを表示するか選択

選択して をクリック

【カスタマイズ１０】記事一覧リストコントローラーのフレームデザイン

THE THOR記事一覧リストのコントローラーを表示すると、シャドウフレーム・ボーダーフレーム・なしから選択できるようになります。

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

アーカイブページ設定＞コントローラー設定＞コントローラーのフレームを選択

選択して をクリック

【カスタマイズ１１】記事一覧リストコントローラーに表示するリンク（新着順・人気順）

THE THOR記事一覧リストコントローラーは、ソートリンクを表示することができます。

ソートリンクは「新着順」や「人気順」などデータを並べ替えるリンクのことです。

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

アーカイブページ設定＞コントローラー設定＞コントローラーのフレームを選択

選択して をクリック

投稿カテゴリのIDは、ダッシュボード＞投稿＞カテゴリーから調べることができます。

【カスタマイズ１２】記事一覧リストのレイアウト切替ボタン

THE THOR記事一覧リストコントローラーは、レイアウトの切替ができるようにボタンを表示できます。表示・非表示・切り替える前の初期表示のカスタマイズが可能です。

切り替える前の初期表示は、ワイドレイアウト・カードレイアウト・ノーマルレイアウトから選択できます。

ワイドレイアウト

カードレイアウト

ノーマルレイアウト

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

アーカイブページ設定＞コントローラー設定＞レイアウト切替ボタンの設定

レイアウト切替ボタンの表示・非表示と、初期表示するレイアウトを選択して をクリック

【カスタマイズ１３】記事一覧リストのアイキャッチエフェクト

THE THOR記事一覧リストのアイキャッチは、エフェクトを選択できます。エフェクトとは、画像の上にマウスがのると画像が変化する効果（エフェクト）をつけることです。

記事一覧リストで使えるエフェクトは、ズーム・ズームグレイ・ズームセピア・ズーム回転・マスク・マスクズーム・マスクズーム回転です。（エフェクトは、PCのみの対応）

ズーム

マスク

ズームグレイ

マスクズーム

ズームセピア

マスクズーム回転

ズーム回転

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

基本設定＞アイキャッチ画像の設定＞アイキャッチホバーエフェクトの設定

エフィクトを選択して をクリック

エフィクトの色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

【カスタマイズ１４】THE THOR記事一覧リストのカテゴリ名の背景色

THE THOR記事一覧リストのアイキャッチ右上に表示するカテゴリーは、背景色をイメージカラーにカスタマイズできます。

カテゴリーイメージカラーは、ピックアップ３記事・カルーセルスライダー・カテゴリごとの最新記事などに反映されます。

1. ダッシュボード
2. 投稿
3. カテゴリー

1. 色の指定は「色を選択」をクリック白い丸・白い四角をクリックしながら動かして色を選択または、カラーコードを直接入力
2. をクリック

【カスタマイズ１５】メインカラムウィジェットのフレームデザイン

メインカラムに表示するウィジェットのフレームデザインは、なし・シャドウフレーム・ボーダーフレームから選択できます。

シャドウフレーム

ボーダーフレーム

なし

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

共通エリア設定＞メインカラムエリア設定＞各ウィジェットフレーム設定

選択して をクリック

【カスタマイズ１６】メインカラムウィジェットの見出しデザイン

THE THORウィジェットの見出しデザインは、角丸・シンプル・ボトムボーダー・はみ出すボーダー・シンプルワイド・内側ボーダーから選択できます。

 角丸

シンプル

ボトムボーダー

はみ出すボーダー

シンプルワイド

内側ボーダー

1. WordPressのダッシュボード
2. 外観
3. カスタマイズ

共通エリア設定＞メインカラムエリア設定＞ウィジェットの見出しデザインを選択

選択して をクリック

見出しデザインの色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

メインカラムのカスタマイズは完了になります。

以上、【THE THORメインカラム・記事一覧リストのカスタマイズ】初心者向けに画像付きで解説でした。

お読みいただき、ありがとうございました。