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

メインカラム
the thor メインカラム

 

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

 

1カラム1カラム
2カラム2カラム
3カラム3カラム

カラムとは、Webページのレイアウト構成のこと。1カラムはメインカラムのみ、2カラムはメインカラムとサイドカラムから、3カラムはメインカラムのみの構成です。

 

メインカラム以外のTHE THORのカスタマイズ方法は、こちらにまとめてありますので参考になさってください。

関連記事

初心者さん・THE THORのTOPページをカスタマイズをしたいけど、ここの名前ってなに?・THE THORのTOPページは、なにからカスタマイズすればいい? Chi[…]

トップページカスタマイズ

 

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

 

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

 

THE THORサポート

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。

これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。

 

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

 

the thor メインカラム1カラム
the thor メインカラム2カラム

 

the thor メインカラム100%

the thor メインカラム1000

the thor メインカラム900

the thor メインカラム800

the thor メインカラム700

 

the thor メインカラムサイドカラム右側
the thor メインカラムサイドカラム左側

 

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

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

 

フレームシャドウフレーム
(◯内は拡大)

フレームボーダーフレーム
(◯内は拡大)

フレームなし

 

the thor メインカラム16:9

the thor 記事一覧リスト4:3

the thor 記事一覧リスト1: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 ウィジェットシンプルワイド
the thor ウィジェット内側ボーダー

 

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

 

THE THORメインカラムのレイアウトは、1カラム・2カラムの2種類から選択できます。選択したカラム数によって設定できる内容が異なります。

 

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

 

the thor メインカラム1カラム
the thor メインカラム2カラム

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー アーカイブ
カスタマイザー レイアウト
カスタマイザー レイアウト

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

選択してカスタマイザー公開 をクリック

 

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

 

THE THORのメインカラムに1カラムを選択すると100%・1000・900・800・700の5種類から横幅の指定ができるようになります。

 

the thor メインカラム100%
the thor メインカラム1000
the thor メインカラム900
the thor メインカラム800
the thor メインカラム700

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー アーカイブ
カスタマイザー レイアウト
カスタマイザー レイアウト

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

選択してカスタマイザー公開 をクリック

 

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

 

THE THORのメインカラムに2カラムを選択するとサイドカラムの位置を左右のどちらかに指定することができます。

 

the thor メインカラムサイドカラム右側
the thor メインカラムサイドカラム左側

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー アーカイブ
カスタマイザー レイアウト
カスタマイザー レイアウト

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

選択してカスタマイザー公開 をクリック

 

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

 

THE THORメインカラムのフレームデザインは、カスタマイズすることができます。

 

the thor フレーム

 

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

 

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

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー メインカラムエリア
カスタマイザー フレーム

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

選択してカスタマイザー公開 をクリック

 

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

 

the thor 記事一覧リスト

 

THE THOR記事一覧リストは、記事ごとのフレームデザインを選択することができます。

 

the thor フレーム

 

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

 

フレームシャドウフレーム(◯内は拡大)

フレームボーダーフレーム(◯内は拡大)

フレームなし

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー アーカイブ
カスタマイザー 記事一覧リスト
カスタマイザー 記事一覧リスト

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

選択してカスタマイザー公開 をクリック

 

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

 

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

 

the thor メインカラム16:9

the thor 記事一覧リスト4:3

the thor 記事一覧リスト1: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マークを表示させることができます。マークの色は好きな色に変更可能です。

 

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

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー アーカイブ
カスタマイザー 記事一覧リスト
カスタマイザー マーク

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

選択してカスタマイザー公開 をクリック

「リボンの色を指定」は、色の指定ができるので、「色を選択」をクリックして色の指定をします。

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

アイコン名を調べる
アイコン名がわからないときは、左上の「アイコンオプション」のボタンをクリック
アイコン
アイコン一覧が表示されたら、好きなアイコンのコードをコピー

 

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

 

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

 

THE THOR記事一覧リストに表示するコントローラーは、フレーム・リンク・切り替えボタンをそれぞれカスタマイズすることができます。

 

the thor コントローラー

 

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

 

コントローラー 線なし表示
コントローラー非表示非表示

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー アーカイブ
カスタマイザー コントローラー
カスタマイザー コントローラー

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

選択してカスタマイザー公開 をクリック

 

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

 

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

 

コントローラー シャドウシャドウフレーム

コントローラー ボーダーボーダーフレーム

コントローラー 線なしなし

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー アーカイブ
カスタマイザー コントローラー
カスタマイザー コントローラー

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

選択してカスタマイザー公開 をクリック

 

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

 

THE THOR記事一覧リストコントローラーは、ソートリンクを表示することができます。ソートリンクは「新着順」や「人気順」などデータを並べ替えるリンクのことです。

 

the thor ソートリンク

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー アーカイブ
カスタマイザー コントローラー
the thor ソートリンク

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

選択してカスタマイザー公開 をクリック

 

THE THOR記事一覧リストに表示するコントローラーには、「お勧めカテゴリ」のソートリンク追加して表示することができます。

カスタマイザー アーカイブ
カスタマイザー コントローラー

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

お勧めカテゴリの表示、非表示の選択と、お勧めカテゴリのIDの入力、表示させたい文字を入力して、カスタマイザー公開 をクリック

 

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

 

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

 

THE THOR記事一覧リストコントローラーは、レイアウトの切替ができるようにボタンを表示させることが可能です。

 

ボタンは表示・非表示・切り替える前の初期表示をカスタマイズすることができます。

 

the thor レイアウト切り替え

 

THE THOR記事一覧リストにコントローラーを表示する指定にすると、切り替える前の初期表示をワイドレイアウト・カードレイアウト・ノーマルレイアウトの3種類から選択できるようになります。

 

the thor 記事一覧ワイドレイアウト
the thor メインカラムカードレイアウト
the thor ノーマルレイアウトノーマルレイアウト

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー アーカイブ
カスタマイザー コントローラー
the thor ソートリンク

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

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

 

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

 

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

 

記事一覧リストで使える効果は、ズーム・ズームグレイ・ズームセピア・ズーム回転・マスク・マスクズーム・マスクズーム回転

の7種類から選ぶことができます。(効果は、PCのみの対応)

 

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. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 基本設定
カスタマイザー アイキャッチ
カスタマイザー アイキャッチ

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

エフィクトを選択してカスタマイザー公開 をクリック

カラーパネル

エフィクトは、色の指定ができるので、「色を選択」をクリックして色の指定をします。

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

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

 

THE THORはカテゴリごとにイメージカラーをカスタマイズできるようになっています。イメージカラー合わせてカテゴリ最新記事の文字色を変えることができます。

 

カテゴリのイメージカラー設定をしていない場合は、ブログのテーマカラーがカテゴリ名の背景色に反映されます。

 

the thor メインカラム

カテゴリ名がイメージカラー

the thor メインカラム

カテゴリ名がテーマカラー

 

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

 

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

 

THE THORは、サイドカラムに表示するウィジェットひとつひとつにフレームデザインのカスタマイズができます。デザインは、シャドウフレーム・ボーダーフレーム・なしの3種類から選択します。

 

the thor メインカラムウィジェットシャドウフレーム

the thor メインカラムウィジェットボーダーフレーム

the thor メインカラムウィジェットなし

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー メインカラム
カスタマイザー メインカラムウィジェット

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

選択してカスタマイザー公開 をクリック

 

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

 

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

 

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

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー メインカラム
カスタマイザー メインカラムウィジェット

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

選択してカスタマイザー公開 をクリック

見出しデザインは、色の指定ができるので、「色を選択」をクリックして色の指定をします。

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

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

 


 

おつかれさまでした。

 

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

 

わからないことや、ご相談は、お気軽にお声がけくださいね。

 

お問い合わせはこちら

 

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

Chiharu