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

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

投稿日: 2016年11月4日

カテゴリー：ブログ（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; 
}