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

Categories | ブログ(WordPress) DW Question Answer

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

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

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

 

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

 

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

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

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

 

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

 

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

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

参考まで

 

バージョンは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;
}

 

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

 

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

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

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

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

 

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

 

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

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

 

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

 

Comment(0) | Trackback(0)

TAGS: / / / | 2016年11月3日 |

« »

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です