[ 解決済 ] Lightning アーカイブページ設定の「表示タイプ」に既存パターンを追加したい
[ 解決済 ] Lightning アーカイブページ設定の「表示タイプ」に既存パターンを追加したい
- 
		投稿者投稿
- 
		
			
				
2025年5月22日 4:02 AM #108930■ WordPress のバージョン 
 6.8.1■ テーマ・プラグインは全て最新版で確認してください。 
 確認しました。■ テーマの種類 
 Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン 
 15.29.6■ Pro Unit のバージョン 
 0.29.4■ スキンの種類 
 プレーン■ 期待する動作 
 Lightning アーカイブページ設定の「表示タイプ」にプレミアムパターンを追加したいです。具体的には下記を追加したいのですが、どこから追加したらよいかわかりません。 お手数ですがご教授いただけますと幸いです。 ■ 自分で試した事 
 VK Block Patternsにパターンをコピー&ペーストしてみましたが、「表示タイプ」には追加されませんでした。■ 症状が発生するブラウザ 
 Chrome■ 実際の症状 
 Lightning アーカイブページ設定の「表示タイプ」にパターンを追加したいがわからない。Attachments:You must be logged in to view attached files.該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます 2025年5月22日 11:19 AM #108940
 うなこモデレーターお世話になっております。 
 該当URL を確認させていただきました。Lightning アーカイブページ設定の「表示タイプ」にプレミアムパターンを追加したいです。 おそらくですが、添付いただいた該当URLを拝見させていただいたところ、「お客様の声」のアーカイブページでしたので、 
 工務店のデモサイトのお客様の声一覧ページ のデザインにしたい、というご意図ではないかと拝察しました。もしそうでしたら、以下の手順でCSSを追加することで、同じデザインに調整することが可能です。 - 【外観】 > 【カスタマイズ】 > 「Lightning アーカイブページ設定」 へ進み、「お客様の声」の「表示タイプ」を「カード」に設定して「公開」ボタンをクリック
- 次に「追加 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; }もしご希望の内容と違っていましたら、お知らせいただければと思います。 2025年5月24日 5:00 AM #109003早々にご回答いただきありがとうございます。 
 仰る通り、工務店のデモサイトの「お客様一覧」のページにしたく、こちらにお問い合わせさせていただきました。
 無事、目的のデザインにすることができました。
 ありがとうございます。他の方も参照されるかもしれないため念のため・・・。 
 下記、一部変更が必要でしたが、それ以外は目的のデザインとなりました。
 .vk_posts-layout-card .vk_post a.btn-primary::before,
 selector.vk_posts-layout-card .vk_post a.btn-primary::after大変助かりました。 
 引き続き、どうぞよろしくお願いいたします。2025年5月27日 9:28 AM #109093
 うなこモデレーターToshiさま ご返信ありがとうございました。 
 ご指摘いただいた通り、一部CSSに誤りがございましたので、該当箇所を修正いたしました。他の方も参照されるかもしれないため念のため・・・。 
 下記、一部変更が必要でしたが、それ以外は目的のデザインとなりました。
 .vk_posts-layout-card .vk_post a.btn-primary::before,
 selector .vk_posts-layout-card .vk_post a.btn-primary::after改めまして、この度はご確認・ご指摘ありがとうございました。 
- 
		投稿者投稿
- このトピックに返信するにはログインが必要です。

