DW Question Answerをカスタマイズ ベストアンサー偏
2016年11月7日
Categories | ブログ（WordPress) DW Question Answer
DW Question Answerをカスタマイズ ベストアンサー偏です。
DWQAには回答にベストアンサーを選ぶことが出来ます。
がぁ、どこにその選択があるか、ぱっと見分かりません。
分かったところでもただのチェックマーク（レ点）にしか過ぎず、
インパクトに欠けます。
※ 通常はグレーのレ点で、ベストアンサーにすると色がグリーンに変わります。
やはり某知恵袋みたいな感じにしたいですよね。
でぇ、私的に画像を使って改良してみました。
バージョンは DW Question Answer1.4.3.4 いじるファイルはstyle.css
保存先階層は ・・・
/wp-content/plugins/dw-question-answer/templates/assets/css/style.css
※ style.cssに手を加えている場合、変更するところ（行数）が変わります。
いじるところは「 .dwqa-pick-best-answer:after 」で、css内を検索して探してください。
変更前
.dwqa-pick-best-answer:after {
content: '';
display: block;
width: 15px;
height: 25px;
border: solid #ddd;
border-width: 0 5px 5px 0;
transform: rotate(45deg);
position: absolute;
left: 10px;
top: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.dwqa-pick-best-answer:hover:after {
border-color: #999;
}
.dwqa-best-answer .dwqa-pick-best-answer:after {
border-color: #578824;
}
変更後
.dwqa-pick-best-answer:after {
content: '';
display: block;
width: 15px;
height: 25px;
position: absolute;
left: 2px;
top: 7px;
padding-right:170px;
background: url(../img/answer-off.png) no-repeat;
}
.dwqa-pick-best-answer:hover:after {
background: url(../img/answer-on.png) no-repeat;
}
.dwqa-best-answer .dwqa-pick-best-answer:after {
left: 320px;
top: -150px;
background: url(../img/best-answer.png) no-repeat;
}
利用した画像は3つ。（コピペOKです）
ファイル名：best-answer.png（162×19px）
ファイル名：answer-off.png（32×22px）
ファイル名：answer-on.png（180×22px）
画像の保存場所
/wp-content/plugins/dw-question-answer/templates/assets/img/ここにアップロード
変更後には変化は見られませんが、オンマウスすると
クリックするとベストアンサーに選ばれ、こう表示されます。
施したQ&Aサイトは「KAWASAKI Motorcycle Q & A」です。
しまい
