質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.36%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

1回答

196閲覧

SVG画像を背景画像として使用している場合のチェック状態の類似要素をbeforとafterで表示したい

yosuke1025

総合スコア12

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2024/10/03 14:30

編集2024/10/05 02:36

実現したいこと

wordpressのレスポンシブで模写元サイトを参考して未チェック状態をbeforそしてチェック状態をafterとして表示を切り替えるようにしたい。そしてクリック後に背景色を黒に表示させるようにしたい。
https://www.delights-home.jp/contact
・以下はできるようにしたいimg
イメージ説明
私の場合は黒を表示させることができましたが、レスポンシブでは最初から黒になっている状態ですので、
クリック後に背景色を表示させるようにしたい。
イメージ説明

###管理画面>お問い合わせ
イメージ説明

<dl> <div class="contact__wrap">  <div class="contact_form-box">  <dt class="contact_txt">お問い合わせ項目<span>必 須</span></dt>  <dd class="content_radio"><div class="contact_radio">[radio radio-421 use_label_element default:1 "お問い合わせ""資料請求" "オーナー宅見学申込""来場予約"]</div></dd> </div> </dl> 以下省略

###contact.php(管理画面>お問い合わせでHTMLを記述しているためphpは以下の通りです)

<?php /* * Template Name: CONTACTページ */ ?> <?php wp_head(); ?> <?php get_header();?> <main class="page_contact"> <div class="pg_contact"> <h1 class="pg_contact_h1">CONTACT</h1> <p class="sub">お問い合わせ・資料請求</p> </div><!--.pg_lineup--> </main> <?php if ( have_posts() ) : while( have_posts() ) : the_post(); the_content(); /* 本文を出力 */ endwhile; endif; ?> <div class="link_view6"> <a href="" class="link_btn">確認画面に進む <span class="arrow"></span> </a> </div> <nav class="top_contact"> <ul class="contact_ul"> <li class="list"><a href="" class="link">TOP</a></li> <li class="list"><span class="contact_pg">CONTACT</span></li> </ul> </nav> <?php get_footer();?>

css

.content_radio .contact_radio { background-color: #FFF; } @media screen and (max-width:767.98px) { .content_radio .contact_radio { background-color: #F3F4EF; } } .contact_radio .wpcf7-form-control { display: grid; grid-template-columns: repeat(2, 325px); line-height: 2.75; padding: 0px; } @media screen and (max-width:767.98px) { .contact_radio .wpcf7-form-control { display: grid; grid-template-columns: 4fr; } } @media screen and (max-width:767.98px) { input[type="radio"] { opacity: 0; position: absolute; } } @media screen and (max-width:767.98px) { .contact_radio .wpcf7-list-item { margin-bottom: 6px; width: 100%; margin-left: 0; } } @media screen and (max-width:767.98px) { .contact_radio label { display: flex; align-items: center; width: 100%; border: 1px solid #ccc; cursor: pointer; background-color: #FFF; } } @media screen and (max-width:767.98px) { .contact_radio label .wpcf7-list-item-label { display: flex; align-items: center; width: 100%; border: 1px solid #ccc; cursor: pointer; background-color: #FFF; } } @media screen and (max-width:767.98px) { .contact_radio input:checked+.wpcf7-list-item-label { background-color: #000; color: #FFF; } } @media screen and (max-width:767.98px) { .contact_radio .wpcf7-list-item-label::before { content: ""; display: inline-block; flex: 0 0 24px; width: 30px; height: 30px; background-image: url(../img/check_box_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png); background-size: cover; margin-right: 10px; margin-top: 10px; } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

SVGはcontentの書き換え次第なのでとりあえずテキストで代用
ざっとこんな感じ

html

1<style> 2#inquiryUl{ 3list-style:none; 4display:flex; 5flex-wrap:wrap; 6row-gap:10px; 7} 8#inquiryUl li{ 9display:block; 10width:60%; 11border:solid 1px lightgray; 12} 13#inquiryUl li label{ 14display:block; 15width:100%; 16} 17#inquiryUl li label:has(:checked):before{ 18content:"[+]"; 19} 20#inquiryUl li label:not(:has(:checked)):before{ 21content:"[-]"; 22} 23#inquiryUl li:has(:checked){ 24background-Color:gray; 25color:white; 26} 27#inquiryUl [type=radio]{ 28display:none; 29} 30 31</style> 32<div class="inputarea -first"> 33<ul class="chkul" id="inquiryUl"> 34<li><label><input type="radio" name="contact" class="list">お問い合わせ</label></li> 35<li><label><input type="radio" name="contact" class="list">資料請求</label></li> 36<li><label><input type="radio" name="contact" class="list">オーナー宅見学申込</label></li> 37<li><label><input type="radio" name="contact" class="list">来場予約</label></li> 38</ul> 39</div>

svgバージョン

一応SVGバージョンを追記しておきます

html

1<style> 2#inquiryUl{ 3list-style:none; 4display:flex; 5flex-wrap:wrap; 6row-gap:10px; 7} 8#inquiryUl li{ 9display:block; 10width:60%; 11border:solid 1px lightgray; 12} 13#inquiryUl li label{ 14display:block; 15width:100%; 16} 17#inquiryUl li label:before{ 18content:""; 19width:20px; 20height:20px; 21display:inline-block; 22transform:translateY(4px); 23} 24#inquiryUl li label:has(:checked):before{ 25background-Image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><rect x="3" y="3" width="14" height="14" stroke-width="3" stroke="white" fill="none" /><polyline points="6,8 9,12 14,8" stroke="white" stroke-width="3" fill="none" /></svg>'); 26} 27#inquiryUl li label:not(:has(:checked)):before{ 28background-Image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><rect x="3" y="3" width="14" height="14" stroke-width="3" stroke="gray" fill="none" /><polyline points="6,8 9,12 14,8" stroke="gray" stroke-width="3" fill="none" /></svg>'); 29} 30#inquiryUl li:has(:checked){ 31background-Color:gray; 32color:white; 33} 34#inquiryUl [type=radio]{ 35display:none; 36} 37 38</style> 39<div class="inputarea -first"> 40<ul class="chkul" id="inquiryUl"> 41<li><label><input type="radio" name="contact" class="list">お問い合わせ</label></li> 42<li><label><input type="radio" name="contact" class="list">資料請求</label></li> 43<li><label><input type="radio" name="contact" class="list">オーナー宅見学申込</label></li> 44<li><label><input type="radio" name="contact" class="list">来場予約</label></li> 45</ul> 46</div>

投稿2024/10/04 01:03

編集2024/10/07 01:45
yambejp

総合スコア116615

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yosuke1025

2024/10/05 02:37

コメントいただきありがとうございます。申し訳ございませんが、内容編集いたしましたのでご確認の程お願い致します。
yambejp

2024/10/07 01:41

ごめんなさい、コメントの意図がよくわかりません。SVGバージョン追記しておいたので動作が想定と違うようなら指摘ください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問