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

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

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

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

Q&A

解決済

2回答

1201閲覧

wordpressで任意の項目をハイライトしたい

ma4nnaise

総合スコア10

WordPress

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

0グッド

0クリップ

投稿2016/06/30 01:17

よろしくお願いいたします。

イメージ説明

上記画像の赤枠で囲まれた部分のように、
wordpressで各項目の任意の項目だけハイライトさせる事は可能なのでしょうか?

画像上部の2枚の写真のようなカットをする場合
こういう髪質、髪の太さ、顔の形の方にオススメという参考にしていただくための
ものなので複数選択できる必要があります。

可能か不可能かだけでも結構ですので
よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

WordPressを利用したことはありませんが、HTML/CSS、JavaScriptやjQueryさえ使える環境ならば可能ですよ。

HTML

1<p>髪質</p> 2 <input type="checkbox" name="hair_type" value="soft">やわらかい 3 <input type="checkbox" name="hair_type" value="normal">普通 4 <input type="checkbox" name="hair_type" value="stiff">かたい


これでまずname="hair_type"というジャンルで囲われたチェックボックスが完成します。
ただ、デフォルトのままではチェックボックスしか押せないですし、あまり格好がつきません。

HTML

1<p>髪質</p> 2 <input type="checkbox" name="hair_type" value="soft" id="hair_type_soft"> 3 <label for="hair_type_soft" class="label_soft">やわらかい</label> 4 <input type="checkbox" name="hair_type" value="normal" id="hair_type_normal"> 5 <label for="hair_type_normal" class="label_normal">普通</label> 6 <input type="checkbox" name="hair_type" value="stiff" id="hair_type_stiff"> 7 <label for="hair_type_stiff" class="label_stiff">かたい</label>


checkboxのid属性とlabelのfor属性に同じ名前をつけてやればそれぞれが紐付いてくれます。
これでlabelに囲われた領域をクリックしてもチェックがついたり外れたりするようになります。

あとはCSSやJavaScriptなどでチェックされたものにハイライトをつけたりしてやればOKです。

CSS

1input[name='hair_type'] { 2 display: none; /*チェックボックスを消します*/ 3} 4 5.label_soft, 6.label_normal, 7.label_stiff { 8 background: #ccc; /*labelの背景*/ 9}


チェックボックスが消えて、labelの領域のみが表示されました。
このままではチェックしても何も変化がありませんので、

JavaScript

1<script> 2$(function(){ 3 $("input[name='hair_type']").on("change",function(){ //チェックボックスの変化を検知 4 $(this).filter(":checked").next().css("background","red"); //チェックされている場合は赤 5 $(this).filter(":not(':checked')").next().css("background",""); //チェックが外れた場合は元の色 6 }); 7}); 8</script>


JavaScriptで動きをつけてあげればOKです。

投稿2016/06/30 02:41

編集2016/06/30 02:51
MaShiRo_H

総合スコア328

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

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

ma4nnaise

2016/06/30 04:01

早速のご回答ありがとうございます。 構築方法はいくつかあると思うのですが、これをwordpressの管理画面内で 編集できないかというクライアントさんのご注文なのです… 説明不足で申しわけありません。
MaShiRo_H

2016/06/30 04:33

WordPressでもカスタムフィールドを用いて個別にJSやCSSが記述できるようなので、 いかようにもできると思いますよ^^b
guest

0

ベストアンサー

項目に対応するカスタムフィールドを作るなどして対応することが可能です。
以前回答した記事ですが、参考になれば。

【WordPress - wordpressで簡単に追加削除出来るプラグイン(39400)|teratail】
https://teratail.com/questions/39400

カスタムフィールド用のプラグインが何種類かあるのでそれを試されてはいかがでしょうか。

投稿2016/06/30 05:25

kei344

総合スコア69364

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

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

ma4nnaise

2016/07/02 06:20

ありがとうございます。 教えていただいたプラグインをいろいろ調べてみました。 まだ漠然としていますが、なんとか形にできるようやってみます。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問