そらのまなびぶろぐ

＼　 THE THOR で ブログを はじめる 初心者さん 向けに 簡単な言葉と 画像たっぷりで 手順を紹介 　／

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

ブログ作成の初心者の方向けにTHE THOR【ザ・トール】カテゴリーの一覧ページの設定を紹介します
  • 記事一覧の表示スタイルをカード型にしたい
  • 記事一覧の表示ってどこで設定するの？
  • 記事一覧の抜粋文いらないんだけど
  • 記事一覧の画像なしは出来ないの？

THE THORの記事一覧ページの設定場所は散らばってます。

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

そら
この設定は、カテゴリーページやタグページ、TOPページなどの記事一覧ページの設定になります。

抜粋文無しは、通常の設定項目はありません。
CSSのコピペ文と張り付け場所を紹介していますので、コピペして使用してください。

◇スマートフォンやPCから簡単に広告が掲載可能 ◇もちろん会員登録は無料。その後も費用はかかりません！ ◇欲しい商品がお得に購入できるセルフバックの利用ができる ◇有名ブランドから高額報酬がもらえる広告を掲載 まずは登録→ A8.netの申し込みページはこちら
目次

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

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

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

そら
「アーカイブページ」は過去の記事を表示されたページのことです。

赤丸で囲んでいるところが、「カテゴリ」ページの表示変更の設定をする所です。

【THE THOR】カテゴリのレイアウト表示を紹介

「ワイドレイアウト」

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

「カードレイアウト」

THE THOR【ザ・トール】のカテゴリー一覧ページの「カードレイアウト」だと画像の下に抜粋の文章が表示されます

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

「ノーマルレイアウト」

THE THOR【ザ・トール】のカテゴリー一覧ページは「ノーマルレイアウト」だと画像の横に抜粋の文章が表示されます

横長の長方形で表示されます。

【THE THOR】カテゴリのレイアウト切替ボタン表示

上の画像に書き込みましたが(￣▽￣;)このボタンを表示させておくと、自分がブログのカテゴリー一覧を見ている時にスタイルを変更して、どんな感じになるかを確認することができます。

そら
私はあまり必要性を感じませんが・・・・
  1. 「コントローラー設定」で「コントローラーを表示するか選択」で「表示」を選択
  2. 「レイアウト切替ボタンの設定」で「レイアウト切替ボタンを表示するか選択」で「表示」を選択

【THE THOR】カテゴリーページ♪アイキャッチ画のカスタマイズ

  • 記事一覧のアイキャッチのズーム削除
  • 記事一覧のアイキャッチ画像のサイズ変更
  • 記事一覧のアイキャッチを非表示
そら
アイキャッチ画像のカスタマイズの方法をそれぞれ紹介していきます

記事一覧のアイキャッチ画像のズーム削除

THE THOR【ザ・トール】のカテゴリー一覧ページの画像（アイキャッチ画像）の設定手順を紹介

画像にマウスを乗せた時にズームをやめたい時

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

「アイキャッチ画像の設定」が表示されます。

THE THOR【ザ・トール】のカテゴリー一覧ページの画像（アイキャッチ画像）にマウスが乗った時にエフェクト機能を付ける事ができます

アイキャッチホバーエフェクトの設定で「ズーム」が選択さているのでここを「なし」を選択してください。

画像にマウスを乗せた時のエフェクトいろいろ

「ズームグレイ」　「ズームセピア」

マウスをのせない時の画像が、グレイとセピア色にそれぞれ表示されます。
マウスをのせると、本来の画像の色が表示されズームされます。

「ズーム回転」

マウスをのせると画像がちょこっと斜めになってズームされます。

「マスク」

マスクは画像に色を乗せる感じです。

その下にある「　■マスク系エフェクト利用時のマスクカラーを指定　」で色を選択できます。

「　■マスク系エフェクト利用時のマスク上テキストを入力　」に入力すれば、文字を表示させることもできます。

記事一覧のアイキャッチ画像のサイズ変更

「アイキャッチサイズの設定」で記事一覧の画像表示サイズを変更させます。

「　アーカイブの表示時　」

カテゴリー一覧ページやタグ一覧ページなどを表示した時

「　ウィジェット内表示時　」

記事の横や上下などにウィジェットを使用して記事ランキングやおすすめ記事などを表示させた時

アイキャッチ画像のサイズは６種類

THE THOR【ザ・トール】のカテゴリー一覧ページの画像（アイキャッチ画像）は６つのサイズから選択することができます。一番沖いサイズはフルです。

記事一覧のアイキャッチを非表示

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

「画像アスペクト比を選択」

0：0(非表示）を選択してください。

記事一覧のアイキャッチ画像の形を変更する

16：9

4：3

1：1

正方形に表示させたいなら「画像アスペクト比を選択」で1：1を選択します

記事一覧の抜粋文の文字数を少なく表示

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

記事一覧の抜粋文を非表示

これは、追加CSSにコピペで実現できます。(￣▽￣;)

ノーマルレイアウトの抜粋を非表示のコピペ文

#viewNormal:checked~.archive .archive__contents .phrase {display: none;}

ワイドレイアウトの抜粋を非表示のコピペ文

#viewWide:checked~.archive .archive__contents .phrase {display: none;}

カードレイアウトの抜粋を非表示のコピペ文

#viewCard:checked~.archive .archive__contents .phrase {display: none;}

コピペ文を張り付ける場所紹介

「外観」→「カスタマイズ」→「追加ｃｓｓ」の順にクリックしていってください。
この「追加CSS」に必要なレイアウトのコピペ文を張り付けてください。

THE THOR【ザ・トール】サイドエリアあり♪記事一覧を３列表示させる

サイドエリア有の時にカードレイアウトを選択した時は２列表示されているかと思います。
私が使用している３列表示させるCSSを紹介します。

３列表示させるための記事の横幅を指定


コピペがうまくいかない時は、半角文字になっているか確認してみてください。

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

この記事を書きながら、画像をスクショして～としていましたが、ホントに設定がいろんな場所にあって面倒(笑)
細かく設定できるのはいいのですが(￣▽￣;)
書きながら、あれ？どこだっけ？とTHE　THORの設定場所を忘れてしまって探すこともよくあります(笑)


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

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

wordpressのブログ作成の初心者の方向けにTHE THOR【ザ・トール】カテゴリーの一覧ページの設定を紹介
最新情報をチェックしよう！

THE THOR初期設定の最新記事8件