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もご覧下さい。
コメントを残す