DW Question Answerをカスタマイズ ベストアンサー偏

Categories | ブログ(WordPress) DW Question Answer

DW Question Answerをカスタマイズ ベストアンサー偏です。

DWQAには回答にベストアンサーを選ぶことが出来ます。

がぁ、どこにその選択があるか、ぱっと見分かりません。

分かったところでもただのチェックマーク(レ点)にしか過ぎず、

インパクトに欠けます。

 

1107 01 400x300 DW Question Answerをカスタマイズ ベストアンサー偏

※ 通常はグレーのレ点で、ベストアンサーにすると色がグリーンに変わります。

 

やはり某知恵袋みたいな感じにしたいですよね。

でぇ、私的に画像を使って改良してみました。

 

バージョンは 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 DW Question Answerをカスタマイズ ベストアンサー偏ファイル名:best-answer.png(162×19px)

 

answer off DW Question Answerをカスタマイズ ベストアンサー偏ファイル名:answer-off.png(32×22px)

 

answer on DW Question Answerをカスタマイズ ベストアンサー偏ファイル名:answer-on.png(180×22px)

 

画像の保存場所

/wp-content/plugins/dw-question-answer/templates/assets/img/ここにアップロード

 

変更後には変化は見られませんが、オンマウスすると

1107 02 400x300 DW Question Answerをカスタマイズ ベストアンサー偏

 

クリックするとベストアンサーに選ばれ、こう表示されます。

1107 03 400x300 DW Question Answerをカスタマイズ ベストアンサー偏

 

施したQ&Aサイトは「KAWASAKI Motorcycle Q & A」です。

しまい

Comment(0) | Trackback(2)

TAGS: / / / | 2016年11月7日 |

« »

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です