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

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

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

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

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

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

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

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

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

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

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

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

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

「ワイドレイアウト」

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

「カードレイアウト」

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

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

「ノーマルレイアウト」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「ズーム回転」

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

「マスク」

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

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

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

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

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

「 アーカイブの表示時 」

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

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

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

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

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

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

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

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

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」の順にクリックしていってください。
この「追加CSS」に必要なレイアウトのコピペ文を張り付けてください。

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

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

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


viewCard:checked~.archive .archive__item {
width: calc(33.33% – 15px); margin-right: 15px; animation: fadeIn2 1s;
}

3列表示の隙間を指定


.u-border, .u-shadow {
padding: 15px;
}
viewCard:checked~.archive .archive__item-border, #viewCard:checked~.archive .archive__item-shadow, #viewNormal:checked~.archive .archive__item-border, #viewNormal:checked~.archive .archive__item-shadow {
padding: 10px;
}
.archive__item {
margin-bottom: 15px;
padding-bottom: 15px;
}

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

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

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

CSSを使用しての記事一覧を3列表示の例としてのサイトを作ってみました♪

https://demo3.soramanabrog.com/


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

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

アフェリエイトの登録は無料です!

Amazonなどの物販に興味がある方は、アソシエイトの保険として「もしもアフィリエイト」からの申請もお勧めします。

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。 ここもおすすめ♪アフィリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/

在宅でちょこっと収入~♪

クラウドソーシング「ランサーズ」会員募集 (無料)

私は今の所、アンケートだけしています( ̄▽ ̄;)
アンケートに答えて5円とか11円とかから、100文字位の感想を書いて数百円とか。
アフィリエイトより小銭がたまりそうです(笑)

クラウドソーシング「ランサーズ」

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

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。 子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。 エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。

サイトに広告を掲載してお小遣いが稼げる!【A8.net】
無料登録はこちら
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
無料登録はこちら