[ 解決済 ] Lightning アーカイブページ設定の「表示タイプ」に既存パターンを追加したい

[Toshi]

■ WordPress のバージョン
6.8.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.29.6

■ Pro Unit のバージョン
0.29.4

■ スキンの種類
プレーン

■ 期待する動作
Lightning アーカイブページ設定の「表示タイプ」にプレミアムパターンを追加したいです。

具体的には下記を追加したいのですが、どこから追加したらよいかわかりません。

Lightning G3版 + G3 Pro Unit 工務店 デモサイト

お手数ですがご教授いただけますと幸いです。

■ 自分で試した事
VK Block Patternsにパターンをコピー＆ペーストしてみましたが、「表示タイプ」には追加されませんでした。

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
Lightning アーカイブページ設定の「表示タイプ」にパターンを追加したいがわからない。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[うなこ]

お世話になっております。
該当URL を確認させていただきました。

Lightning アーカイブページ設定の「表示タイプ」にプレミアムパターンを追加したいです。

おそらくですが、添付いただいた該当URLを拝見させていただいたところ、「お客様の声」のアーカイブページでしたので、
工務店のデモサイトのお客様の声一覧ページ のデザインにしたい、というご意図ではないかと拝察しました。

もしそうでしたら、以下の手順でCSSを追加することで、同じデザインに調整することが可能です。

1. 【外観】 > 【カスタマイズ】 > 「Lightning アーカイブページ設定」 へ進み、「お客様の声」の「表示タイプ」を「カード」に設定して「公開」ボタンをクリック
2. 次に「追加 CSS」に以下のCSSを貼り付けてください。

※このCSSは「カード」タイプ全体に影響します。他の投稿タイプに影響を与えたくない場合は、.post-type-archive-customer-voice を先頭に加えてください。

/*カードのデザイン調整*/
.vk_posts-layout-card .vk_post:not(.card-body){
    overflow: visible;
}

.vk_posts-layout-card .vk_post.card{
 background-color: transparent;
 border:none;
 margin-bottom:80px;
}

.vk_posts-layout-card .vk_post .card-body{
 background: #fff;
 margin: -50px;
 z-index: 1;
 width: calc(100% - 30px);
 margin-left: 15px;
}

/*ボタンデザイン*/
.vk_posts-layout-card .vk_post a.btn-primary{
 position: relative;
 display:inline-block;
 padding-right:32px;
 transition: all .2s linear;
 color: currentColor;
background:transparent;
border:none;
font-size:14px;
}
.vk_posts-layout-card .vk_post a.btn-primary:active,
.vk_posts-layout-card .vk_post a.btn-primary:focus,
.vk_posts-layout-card .vk_post a.btn-primary:active:focus{
background:transparent;
box-shadow:none;
color:currentcolor;
}
.vk_posts-layout-card .vk_post a.btn-primary::before,
.vk_posts-layout-card .vk_post a.btn-primary::after{
 content: '';
 position: absolute;
 display: block;
 height: 1px;
 right: 5px;
 transition: all .2s linear;
}
.vk_posts-layout-card .vk_post a.btn-primary::before{
 width: 20px;
 bottom: 50%;
 border-bottom: solid 1px currentColor;
}
.vk_posts-layout-card .vk_post a.btn-primary::after{
 width: 8px;
 background: currentColor;
 bottom: calc(50% + 3px);
 transform: rotate(45deg);
}

.vk_posts-layout-card .vk_post a.btn-primary:hover::before,
.vk_posts-layout-card .vk_post a.btn-primary:hover::after{
right:0px;
}
/* 画像hover */
.vk_posts-layout-card .vk_post_imgOuter{
  transition: all 0.4s ease-out;
}
.vk_posts-layout-card .vk_post_imgOuter:hover{
opacity: 0.8;
}

もしご希望の内容と違っていましたら、お知らせいただければと思います。

[Toshi]

早々にご回答いただきありがとうございます。
仰る通り、工務店のデモサイトの「お客様一覧」のページにしたく、こちらにお問い合わせさせていただきました。
無事、目的のデザインにすることができました。
ありがとうございます。

他の方も参照されるかもしれないため念のため・・・。
下記、一部変更が必要でしたが、それ以外は目的のデザインとなりました。
.vk_posts-layout-card .vk_post a.btn-primary::before,
selector .vk_posts-layout-card .vk_post a.btn-primary::after

大変助かりました。
引き続き、どうぞよろしくお願いいたします。

[うなこ]

Toshiさま

ご返信ありがとうございました。
ご指摘いただいた通り、一部CSSに誤りがございましたので、該当箇所を修正いたしました。

他の方も参照されるかもしれないため念のため・・・。
下記、一部変更が必要でしたが、それ以外は目的のデザインとなりました。
.vk_posts-layout-card .vk_post a.btn-primary::before,
selector .vk_posts-layout-card .vk_post a.btn-primary::after

改めまして、この度はご確認・ご指摘ありがとうございました。

[投稿者]

投稿