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

the thor メインカラム 記事一覧

 

Chiharu
Chiharu
今回は、WordPressテーマ「THE THOR(ザ・トール)」メインカラムのカスタマイズについてお伝えします。

 

1カラム1カラム(メイン1列)
2カラム2カラム(メインとサイド)
3カラム3カラム(メイン3列)

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

 

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

 

  1. サンプルを見てカスタマイズする内容を決める
  2. それぞれのカスタマイズをする
    1. メインカラムのレイアウト
    2. 1カラムのときの横幅
    3. 2カラムのときのサイドカラムの位置
    4. メインカラムのフレームデザイン
    5. 記事一覧リストのフレームデザイン
    6. 記事一覧リストの画像の大きさ
    7. 記事一覧リストで表示する項目
    8. 記事一覧リストのマーク
    9. 記事一覧リストコントローラーの表示・非表示
    10. 記事一覧リストコントローラーのフレームデザイン
    11. 記事一覧リストのコントローラーに表示するリンク
    12. 記事一覧リストのレイアウト切替ボタン
    13. 記事一覧リストのアイキャッチエフェクト
    14. 記事一覧リストのカテゴリー名の背景色
    15. メインカラムウィジェットのフレームデザイン
    16. メインカラムウィジェットの見出しデザイン

 

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

 

the thor メインカラムフレーム ボーダー2カラム
the thor メイン 1カラム1カラム

 

the thor メイン 1カラム100%

the thor アイキャッチ 10001000

the thor アイキャッチ 900900

the thor アイキャッチ 800800

the thor アイキャッチ 700700

 

the thor メインカラムフレーム ボーダーサイドカラム右側
the thor 2カラム 左サイドカラム左側

 

the thor メインカラムフレームシャドウフレーム
(◯内は拡大)
the thor メインカラムフレーム ボーダーフレーム
(◯内は拡大)
the thor メインカラムフレームなし

 

the thor メインカラムフレームシャドウフレーム
(◯内は拡大)

the thor メインカラムフレームボーダーフレーム
(◯内は拡大)

the thor メインカラムフレームなし

 

the thor メインカラムフレーム ボーダー16:9

the thor アイキャッチ 4:34:3

the thor アイキャッチ 1:11:1

the thor アイキャッチなし非表示

 

the thor メインカラム 記事一覧

 

the thor マーク

 

the thor メインカラムフレーム ボーダー表示
the thor メインカラムフレーム なし非表示

 

the thor メインカラム コントローラーフレーム シャドウシャドウフレーム

the thor メインカラム コントローラーフレーム ボーダーボーダーフレーム

the thor メインカラム コントローラーフレーム なしなし

 

the thor ソートリンク

 

the thor コントローラー

the thor アイキャッチ ワイドワイドレイアウト
the thor 記事一覧 カードレイアウトカードレイアウト
the thor 記事一覧 ノーマルレイアウトノーマルレイアウト

 

the thor 記事一覧 ズームズーム
the thor 記事一覧 マスクマスク
the thor 記事一覧 ズームグレイズームグレイ
the thor 記事一覧 マスクズームマスクズーム
the thor 記事一覧 ズームセピアズームセピア
the thor 記事一覧 マスクズームマスクズーム回転
the thor 記事一覧 ズーム回転ズーム回転

 

the thor メインカラムフレーム ボーダー

イメージカラー

the thor カテゴリイメージカラー

テーマカラー

 

the thor フレーム シャドウシャドウフレーム

the thor フレーム ボーダーボーダーフレーム

the thor フレーム なしなし

 

the thor ウィジェット 角丸 角丸
the thor ウィジェット シンプルシンプル
the thor ウィジェット ボトムボーダーボトムボーダー
the thor ウィジェット はみ出すボーダーはみ出すボーダー
the thor ウィジェット シンプルワイドシンプルワイド
the thor ウィジェット 内側ボーダー内側ボーダー

 

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

 

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

 

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

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

 

the thor メイン 1カラム1カラム
the thor メインカラムフレーム ボーダー2カラム

 

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

 

カスタマイザー メインカラム レイアウトアーカイブページ設定>レイアウト設定>カラムを選択

選択して公開 をクリック

 

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

 

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

 

the thor メイン 1カラム100%

the thor アイキャッチ 10001000

the thor アイキャッチ 900900

the thor アイキャッチ 800800

the thor アイキャッチ 700700

 

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

 

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

選択して公開 をクリック

 

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

 

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

 

the thor メインカラムフレーム ボーダーサイドカラム右側
the thor 2カラム 左サイドカラム左側

 

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

 

カスタマイザー メインカラム レイアウトアーカイブページ設定>レイアウト設定>2カラム時のサイドバーの位置を選択

選択して公開 をクリック

 

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

 

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

 

the thor メインカラムフレームシャドウフレーム
(◯内は拡大)
the thor メインカラムフレーム ボーダーフレーム
(◯内は拡大)
the thor メインカラムフレームなし

 

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

 

カスタマイザー メインカラム フレーム共通エリア設定>メインカラムエリア設定>メインカラムのフレームを選択

選択して公開 をクリック

 

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

 

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

 

the thor メインカラム 記事一覧記事一覧リスト
the thor フレーム記事一覧リストのフレーム

 

the thor メインカラムフレームシャドウフレーム(◯内は拡大)

the thor メインカラムフレームボーダーフレーム
(◯内は拡大)

the thor メインカラムフレームなし

 

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

 

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

選択して公開 をクリック

 

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

 

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

 

the thor メインカラムフレーム ボーダー16:9

the thor アイキャッチ 4:34:3

the thor アイキャッチ 1:11:1

the thor アイキャッチなし非表示

 

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

 

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

選択して公開 をクリック

 

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

 

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

 

the thor メインカラム 記事一覧
  1. 投稿日
  2. 更新日
  3. 閲覧数
  4. コメント数
    (人気順のみ表示)
  5. 表示文字数
  6. リンクボタン

 

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

 

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

最後に公開 をクリック

 

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

 

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

 

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

 

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

 

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

選択して公開 をクリック

THE THOR カラーパネル

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

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

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

 

the thor アイコン
アイコン名がわからないときは、左上のアイコンオプション」のボタンをクリック
the thor アイコン
アイコン一覧が表示されるので、コードをコピーしてください

 

ダッシュボード>投稿>投稿一覧
  1. WordPressのダッシュボード
  2. 投稿
  3. 投稿一覧
ダッシュボード 投稿
「クイック編集」をクリック
先頭固定
「この投稿を先頭に固定表示」にチェック更新 をクリック

 

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

 

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

 

the thor コントローラー

 

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

 

the thor メインカラムフレーム ボーダー表示
the thor メインカラムフレーム なし非表示

 

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

 

カスタマイザー コントローラーアーカイブページ設定>コントローラー設定>コントローラーを表示するか選択

選択して公開 をクリック

 

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

 

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

 

the thor メインカラム コントローラーフレーム シャドウシャドウフレーム

the thor メインカラム コントローラーフレーム ボーダーボーダーフレーム

the thor メインカラム コントローラーフレーム なしなし

 

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

 

カスタマイザー コントローラーアーカイブページ設定>コントローラー設定>コントローラーのフレームを選択

選択して公開 をクリック

 

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

 

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

 

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

 

the thor ソートリンク

 

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

 

カスタマイザー コントローラーアーカイブページ設定>コントローラー設定>コントローラーのフレームを選択

選択して公開 をクリック

 

THE THOR記事一覧リストのコントローラーは、「お勧めカテゴリ」のソートリンクを追加できます。

カスタマイザー コントローラーアーカイブページ設定>コントローラー設定>お勧めカテゴリの設定

お勧めカテゴリの表示・非表示、お勧めカテゴリのID、表示する文字を入力して、公開 をクリック

 

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

 

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

 

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

 

the thor コントローラー

 

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

 

the thor アイキャッチ ワイドワイドレイアウト
the thor 記事一覧 カードレイアウトカードレイアウト
the thor 記事一覧 ノーマルレイアウトノーマルレイアウト

 

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

 

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

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

 

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

 

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

 

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

 

the thor 記事一覧 ズームズーム
the thor 記事一覧 マスクマスク
the thor 記事一覧 ズームグレイズームグレイ
the thor 記事一覧 マスクズームマスクズーム
the thor 記事一覧 ズームセピアズームセピア
the thor 記事一覧 マスクズームマスクズーム回転
the thor 記事一覧 ズーム回転ズーム回転

 

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

 

カスタマイザー アイキャッチ ホバーエフェクト基本設定>アイキャッチ画像の設定>アイキャッチホバーエフェクトの設定

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

THE THOR カラーパネル

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

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

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

 

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

 

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

 

the thor メインカラムフレーム ボーダー

イメージカラー

the thor カテゴリイメージカラー

テーマカラー

 

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

 

 

ダッシュボード>投稿>カテゴリー
  1. ダッシュボード
  2. 投稿
  3. カテゴリー
カテゴリー
  1. 色の指定は「色を選択」をクリック白い丸・白い四角をクリックしながら動かして色を選択または、カラーコードを直接入力THE THOR カラーパネル
  2. 更新 をクリック

 

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

 

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

 

the thor フレーム シャドウシャドウフレーム

the thor フレーム ボーダーボーダーフレーム

the thor フレーム なし
なし

 

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

 

カスタマイザー メインカラム フレーム共通エリア設定>メインカラムエリア設定>各ウィジェットフレーム設定

選択して公開 をクリック

 

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

 

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

 

the thor ウィジェット 角丸 角丸
the thor ウィジェット シンプルシンプル
the thor ウィジェット ボトムボーダーボトムボーダー
the thor ウィジェット はみ出すボーダーはみ出すボーダー
the thor ウィジェット シンプルワイドシンプルワイド
the thor ウィジェット 内側ボーダー内側ボーダー

 

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

 

カスタマイザー メインカラム フレーム共通エリア設定>メインカラムエリア設定>ウィジェットの見出しデザインを選択

選択して公開 をクリック

THE THOR カラーパネル

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

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

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

 

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

 


 

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

 

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

THE THORカスタマイズ

1人で悩んでいませんか?
設定やカスタマイズでお困りのときは
お気軽にご相談ください。

ご相談はこちらへどうぞ >