レイアウト | HCZ BLOG

レイアウト

DW Question Answer　レイアウトをカスタマイズ　パンくずリスト偏　其の1

2016年11月3日

Categories | ブログ（WordPress) DW Question Answer

DW Question Answer（ワードプレス・プラグイン）のレイアウト「パンくずリスト」を

カスタマイズしました。パンくずリストとは、下画像のようにウェブページ内で自分が

今どのページにいるのかを示すリストです。

デフォルトは英語で、日本語化すると下画像のような表示になります。

ただ単語が羅列してるだけで、芸がないように思えます。また現在どの場所のページが

表示されているかさえ分かりづらい。

個々のテーマスタイルシートに依存（文字サイズなど）しているところもあるでしょうが、

私的にカスタマイズしてみました。

参考まで

バージョンは1.4.3.4　いじるファイルはstyle.css　保存先階層は・・・

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

504行～521行

/* Question Filter */
.dwqa-question-filter {
	margin-bottom: 20px;
}

.dwqa-question-filter span,
.dwqa-question-filter a {
	margin-right: 10px;
}

.dwqa-question-filter a {
	border: none !important;
	text-decoration: none;
}

.dwqa-question-filter a.active {
	border-bottom: 1px solid #ddd !important;
}

変更後

/* Question Filter */
.dwqa-question-filter {
	border-bottom: 1px solid #C0C0C0;
	margin-bottom: 30px;
}

.dwqa-question-filter span{
	display:none
	}

.dwqa-question-filter a {
	border: 1px solid #C0C0C0 !important;
	border-bottom:0 !important;
	margin-left:10px;
	margin-bottom:-1px;
	text-decoration: none;
	font-size:13px;
	padding:2px 10px;
	background-color:#E3E7E4;
	word-break:break-all;
	word-wrap:break-word;
	display:inline-block
}

.dwqa-question-filter a.active {
	border-bottom: 0px !important;
	background-color:#FFFFFF;
}

いちおレスポンシブにも対応していると思いますが、

あくまでも当方が作った日本語化ファイルでのカスタマイズです。

枠からはみ出す場合、おのおの微調整するか、下記URLから日本語化ファイルを

ダウンロードして下さい。

DW Question Answer　日本語化｜ファイルダウンロード　【 WordPress プラグイン】

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

投稿ページのパンくずリストカスタマイズはその2もご覧下さい。

DW Question Answer　レイアウトをカスタマイズ　パンくずリスト偏　其の2

Comment(0) | Trackback(0)

TAGS: レイアウト / カスタマイズ / DW Question & Answer / パンくずリスト | 2016年11月3日 |

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

2016年11月1日

Categories | ブログ（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