THE THORカテゴリーページ♪記事一覧表示スタイル変更

  • カテゴリー記事一覧の表示スタイルをカード型にしたい
  • 記事一覧の表示ってどこで設定するの?
  • 記事一覧の画像なしは出来ないの?

 

THE THORのカテゴリーの記事一覧ページの設定場所はどこ?と思った方。私の仲間ですwww

カテゴリーページをデフォルトのまま表示させた時、アイキャッチ画像が大きい上にマウスを乗せるともっと大きくなるエフェクト付きで「え?でかっ」と私は声が出ました(笑)。

 

本記事の内容

  1. THE THORカテゴリ一覧ページの設定場所
  2. THE THORカテゴリ一覧ページの表示について
  3.  THE THORカテゴリ一覧ページのカスタマイズ

 

THE THORカテゴリーページ♪記事の表示スタイルってどこで設定するの?

THE THOR【ザ・トール】のカテゴリー一覧ページは「カードレイアウト」「ノーマルレイアウト」から表示方法を選択できます

 

刷毛マーク「外観」→「カスタマイズ」→「アーカイブページ設定」→ 「コントローラー設定」を順にクリックしてください。

【THE THOR】カテゴリー記事一覧コントローラー設定

 

 

下で紹介している「新着・人気順ソートリンク」、「レイアウト切替ボタン」を表示させたい場合は、このコントローラーを表示に設定してください。

 

「新着・人気順ソートリンク」、「レイアウト切替ボタン」を表示させないのに、コントローラーを表示にしてしまうと、何もないエリアが表示されます。

 

 

 

【THE THOR】新着・人気順ソートリンクの設定

 

 

表示を選択すると、タブボンタンが表示されます。

 

 
sora
コントローラーを表示にしてください。
 

【THE THOR】お勧めカテゴリの設定

 

 

表示を選択すると、タブに追加されます。

 

 
sora
コントローラーを表示にしてください。
 
「お勧め」に表示させるページを指定するIDは、「投稿一覧」の一番右端に表示されています。
 
 
記事一覧にIDの項目が表示されていない場合は
 
 
 
画面日右上にある「表示オプション」をクリックしてください。
表示項目一覧が表示されますので、IDにチェックを入れてください。
 

【THE THOR】レイアウト切替ボタンの設定

 

 

 

 

レイアウト切替ボタンを表示するを選択すると、カテゴリーの記事一覧から「ワイドレイアウト」、「カードレイアウト」、「ノーマルレイアウト」の切り替えができるボタンが表示されます。

 

 

 
sora
コントローラーを表示にしてください。
 

【THE THOR】レイアウト切替ボタンの初期checkedを選択

 

ここでレイアウトを設定します。

 

◆ワイドレイアウト

 

 

画面一杯に画像が表示されている感じを受けるほど大きいです(笑)

 

カードレイアウト

 

メインカラムの横幅の設定によって、カードが横に2~3個並びます。

 

◆ノーマルレイアウト

 

アイキャッチ画像が左に表示されます。

 

 

記事一覧の抜粋文の文字数を少なくしたい

 

カテゴリーの記事一覧ですが、設定は記事一覧の設定に影響されます。

 

「外観」→「カスタマイズ」→「アーカイブページ設定」→「記事一覧リスト設定」の順にクリックしてください。

 

「記事一覧リスト設定」の「■本文の抜粋文字数を指定」で設定する事が出来ます。


文字は20~500文字以内で指定します。

 

記事一覧のサムネイルを非表示にしたい

 

カテゴリーの記事一覧ですが、設定は記事一覧の設定に影響されます。

■画像アスペクト比を選択 で「0:0(非表示)」を選択してください。

 

カテゴリーの一覧記事のタイトルの背景に画像をつけたい

 

「投稿」→「カテゴリー」の順にクリックしてください。

カテゴリー一覧にある、記事名をクリックしてください。

その中の「画像URL」に画像を追加します。

 

 
sora
私はメインビジュアル(637×357)の画像を使用しています。横幅が短かったためか中央以外が切り取られて表示されています。

 

 

「外観」→「カスタマイズ」→「アーカイブページ設定」→「カテゴリーアーカイブ設定」の順にクリックしてください。

■見出しエリアのデザインを選択で「ノーマル(デフォルト)」以外をしてください。イメージカラーで指定した色でマスクをかけるか、ブラック、ブラックメッシュ、イメージカラー+画像の中から選択してください。

 

カテゴリー記事一覧表示のサムネイルのエフェクトを無くしたい

 

 

サムネイルにマウスが乗った時アップになるアフェクトをTHE THORではアイキャッチホバーエフェクトといいます。

「外観」→「カスタマイズ」→「基本設定」→「アイキャッチ画像設定の設定」の順にクリックしてください。

 

■アイキャッチホバー時のエフェクトを選択で「無し」を選択してください。

 

THE THORカテゴリーページ♪記事一覧表示スタイル変更 まとめ

 

この記事を書きながら、画像をスクショして~としていましたが、ホントに設定がいろんな場所にあって面倒(笑)

細かく設定できるのはいいのですが( ̄▽ ̄;)

書きながら、あれ?どこだっけ?とTHE THORの設定場所を忘れてしまって探すこともよくあります(笑)

 

サイドエリアに表示させているカテゴリーの表示順を自分で決めたい方は下の記事を参考にしてみてください。

>>>THE THORカテゴリーの表示順を変更!簡単カスタマイズ


ランキングサイトに登録しているのでクリックしてもらえると嬉しいです(^^♪

 ランキングサイトに参加しているのでクリックしていただけると嬉しいです(^^♪