DW Question Answer レイアウトをカスタマイズ パンくずリスト偏 其の2
2016年11月4日
Categories | ブログ（WordPress) DW Question Answer
DW Question Answer（ワードプレス・プラグイン）のレイアウト「パンくずリスト」を
カスタマイズ 其の２。
その1ではトップページのフィルターナビゲージョン的なパンくずリストをカスタマイズ
しましたが、今回は投稿ページのパンくずをカスタマイズ。
デフォルトだとこんな感じ・・・
当自作テーマだと、パンくずリストの文字サイズがでかすぎて、全体的な文字バランスが
悪いです。改良方法は、スタイルシートの変更だけで見栄え良くシンプルしていきます。
バージョンは DW Question Answer1.4.3.4 いじるファイルはstyle.css
保存先階層は ・・・
/wp-content/plugins/dw-question-answer/templates/assets/css/style.css
※ 何かしらstyle.cssに手を加えている場合、変更するところ（行数）が変わります。
どこをいじるかは「 /* Breadcrumbs */ 」で、css内を検索して探してください。
432行～435行
/* Breadcrumbs */
.dwqa-breadcrumbs {
margin-bottom: 20px;
}
変更後
/* Breadcrumbs */
.dwqa-breadcrumbs {
margin: 30px 0;
font-size:12px;
line-height:26px;
}
.dwqa-breadcrumbs .dwqa-current{ display:none}
.dwqa-breadcrumbs a {
padding: 0em 1em 0em 2em;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #ddd;
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
.dwqa-breadcrumbs a:hover{
background: #33F6F8;
}
.dwqa-breadcrumbs a::after,
.dwqa-breadcrumbs a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}
.dwqa-breadcrumbs a::after{
z-index: 2;
border-left-color: #ddd;
}
.dwqa-breadcrumbs a::before{
border-left-color: #ccc;
right: -1.1em;
z-index: 1;
}
.dwqa-breadcrumbs a:hover::after{
border-left-color: #33F6F8;
}
.dwqa-breadcrumbs .current,
.dwqa-breadcrumbs .current:hover{
font-weight: bold;
background: none;
}
.dwqa-breadcrumbs .current::after,
.dwqa-breadcrumbs .current::before{
content: normal;
}
結果的にスタイルの指定が多くなってしまいましたが、利用される方はコピペでね。
レスポンシブにも対応してます。
施したQ&Aサイトは「KAWASAKI Motorcycle Q & A」です。
しまい
