- 記事一覧の表示スタイルをカード型にしたい
- 記事一覧の表示ってどこで設定するの？
- 記事一覧の抜粋文いらないんだけど
- 記事一覧の画像なしは出来ないの？
THE THORの記事一覧ページの設定場所は散らばってます。
カテゴリーページをデフォルトのまま表示させた時、アイキャッチ画像が大きい上にマウスを乗せるともっと大きくなるエフェクト付きで「なんだこれ、でかっ」と私は声が出ました(笑)。
抜粋文無しは、通常の設定項目はありません。
CSSのコピペ文と張り付け場所を紹介していますので、コピペして使用してください。
A8.netの申し込みページはこちら THE THORカテゴリーページ♪記事の表示スタイルってどこで設定するの？
刷毛マーク「外観」→「カスタマイズ」→「アーカイブページ設定」→ 「コントローラー設定」を順にクリックしてください。
赤丸で囲んでいるところが、「カテゴリ」ページの表示変更の設定をする所です。
【THE THOR】カテゴリのレイアウト表示を紹介
「ワイドレイアウト」
画面一杯に画像が表示されている感じを受けるほど大きいです(笑)
「カードレイアウト」
メインカラムの横幅の設定によって、カードが横に2～３個並びます。
「ノーマルレイアウト」
横長の長方形で表示されます。
【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を紹介します。
３列表示させるための記事の横幅を指定
viewCard:checked~.archive .archive__item {
width: calc(33.33% – 15px); margin-right: 15px; animation: fadeIn2 1s;
}
３列表示の隙間を指定
.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【ザ・トール】カテゴリーページ♪記事一覧表示スタイル変更 まとめ
この記事を書きながら、画像をスクショして～としていましたが、ホントに設定がいろんな場所にあって面倒(笑)
細かく設定できるのはいいのですが(￣▽￣;)
書きながら、あれ？どこだっけ？と覚えてなくて探すこともありました(笑)
CSSを使用しての記事一覧を３列表示の例としてのサイトを作ってみました♪
https://demo3.soramanabrog.com/
ランキングサイトに登録しているのでクリックしてもらえると嬉しいです(^^♪
アフェリエイトの登録は無料です！
Amazonなどの物販に興味がある方は、アソシエイトの保険として「もしもアフェリエイト」からの申請もお勧めします。
A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。 ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/
