ワードプレス、PS Auto Sitemap サイトマップのスタイルを変更してみる

ワードプレス
スポンサーリンク

こんばんゎ。
今日はこしょっとカスタマイズしました。
サイトマップのデザインの変更しました。

Table of Contents Plus と似たデザインにやっと出来たかな?
クラス名とか何が何じゃら、どこにタグを入れたら希望通りになるやら2日も悪戦苦闘しました。

PS Auto Sitemap のスタイル・シンプル2を参考に変更した訳です。
検索しても希望のことが見つからなかったんです。
間違いがあっても、スタイルシートは詳しくないので色々と間違いがあるかもしれませんね(笑。

とにかく自分へのメモとして残しておくことにしましょう。

css
#sitemap_list {
	padding: 0;
	margin: 0;
}
#sitemap_list li {
	list-style-type: none;
	list-style: none;
}
#sitemap_list li ul {
	padding: 10px 0 10px 0;
	margin-left: 5px;
}
#sitemap_list a {
	display: block;
	text-decoration: none;
}
#sitemap_list a:hover {
	background-color: #f4f4f4;
}
#sitemap_list > li > a {
	border-bottom: 1px dotted #eacece;
}
#sitemap_list > li > ul > li > a {
	border-bottom: 1px dotted #e5e5e5;
}

自分で見る限り Table of Contents Plus と似ていると思います・・。
たぶん・・。
#sitemap_list > li > a {
ここで使われている > が分からず調べたら子供セレクタと言うもの。
使い方間違えているかもしれないな。

更にカテゴリーとかホームのアイコンを変えたい気になったので以下を追加。

css
#sitemap_list .home-item a:before,
#sitemap_list .cat-item a:before,
#sitemap_list .post-item a:before,
#sitemap_list .page_item a:before {
	font-family: FontAwesome;
	margin-right: 4px;
	color:#333;
}
#sitemap_list li.home-item a:before {content: "\f015";} /* ホーム */
#sitemap_list li.cat-item a:before {content: "\f101";} /* カテゴリ */
#sitemap_list li.post-item a:before {content: "\f105";} /* 記事 */
#sitemap_list li.page_item a:before {content: "\f138";} /* 固定 */

ホームにはアイコンと文字を。
固定記事のメールにもそれぞれ指定してみました。

もう少し細かく設定したいときは、

css
#sitemap_list li.cat-item.cat-item.cat-item-1 > a:before {content: "\f133";} /* 未分類 */
#sitemap_list li.page_item.page-item-2 a:before {content: "\f0e8";} /* サイトマップ */
#sitemap_list li.page_item.page-item-3 a:before {content: "\f003";} /* メール */
#sitemap_list li.page_item.page-item-37 a:before {content: "\f007";} /* プロフィール */

li.page_item.page-item-2 の数字には固定ページのIDに変更したらOK
赤ラインが固定ページのクラス。
li.cat-item.cat-item.cat-item-1 これはカテゴリー。

一応これで表示はされていてChromeの検証ではエラーにはなってみたいだから完了!

スポンサーリンク

関連記事一覧

  1. この記事へのコメントはありません。

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)