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から日本語化ファイルを
ダウンロードして下さい。
施したQ&Aサイトは「KAWASAKI Motorcycle Q & A」です。
投稿ページのパンくずリスト カスタマイズはその2もご覧下さい。
