DW Question Answer レイアウトをカスタマイズ「質問する」ボタン偏

DW Question Answer　レイアウトをカスタマイズ　「質問する」ボタン偏

投稿日: 2016年11月1日

カテゴリー：ブログ（WordPress) DW Question Answer

DW Question Answer（ワードプレス・プラグイン）のレイアウト「質問する」ボタンを

カスタマイズしました。バージョンが変わると、変更する場所（style.cssの行数）も変わると

思うので、いちお備忘録しておきます。

デフォルト（英語版）はこんな感じに表示されます。

日本語化にすると・・・

バージョンは1.4.3.4

いじるファイルはstyle.cssで、保存先階層は

・・・/wp-content/plugins/dw-question-answer/templates/assets/css/style.css

596行目

.dwqa-questions-footer .dwqa-ask-question a {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid #ddd;

変更後と追記（a:hover）

.dwqa-questions-footer .dwqa-ask-question a {
 display: inline-block;
 font-weight:bold;
 color:#666;
 padding: 5px 20px 5px 50px;
 margin:0 10px 10px 10px;
 border: 1px solid #ddd;
 border-radius: 4px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 background: url(../img/icon-q.png) no-repeat 14px 4px #D0E0E8;
}
.dwqa-questions-footer .dwqa-ask-question a:hover {
    color:#FF0000;
}

ボタンの中のアイコンは、フリー素材サイト「icooon-mono」よりダウンロードし、

サイズを22×22に変更ました。

画像のアップロード先

・・・/wp-content/plugins/dw-question-answer/templates/img/icon-q.png