ベストアンサー

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）