KASABUTA-ENDLESS

*

[STINGER5]カテゴリーでの親子階層の段差を表示する方法

   

スポンサーリンク

STINGER5カスタマイズ…カテゴリーの親子で階層表示の段差を表示する方法

以前、カテゴリーでの記事数の表示と階層の表示の方法についての記事を書きました。

ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法 | KASABUTA-ENDLESS


この記事中では階層の表示ができずに陳腐な代案でしのぎました。

2014-09-27_170519

こんな感じで(笑)空白と矢印入れてます。

親子ですよ、っていうのはなんとなく見てわかりますが、流石にこのままじゃイカンだろと改善策を探しました。

STINGER5ではデフォルトで階層表示のための段差がついていません。

2014-09-27_164335

「WordPress」が親カテで「使い方」「問題解決」が子カテなのですが、この表示方法だと理解できません。

一般的には子カテには段差がつくはずなのですが…

まぁ色々とやってみると簡単にできたのでここにシェアしたいと思います。

STINGER5親子カテゴリー階層で段差をつける

CSSをいじります。

「外観」→「テーマ編集」からスタイルシート (style.css)を編集します。

「コメント」の中の【ul.children】を探します。

3分の2くらいのとこにあります。

2014-10-02_160545

私は【child】で検索してますね。CtrlとFの同時押しでページ内検索ができます。

STINGER5ではデフォルトでpaddingの値が0になっていると思います。

paddingの後ろに-leftをつけて数値を入力します。

2014-10-02_161048

ここを変更すると…(私は20にしていますがお好みでドウゾ)

2014-10-02_161314

段差が出来ていますね!

矢印が気持ち悪いので…

2014-10-02_170439

おおー!完璧じゃ!!

これでスッキリとカテゴリーの階層を表示させることが出来ました。

以上で完了でございます。

STINGER5親子カテゴリー階層で段差をつける~のまとめ

簡単にまとめると、

「スタイルシートのul.childrenにpadding-leftを追加する」ですね。

padding-leftはmargin-leftでも大丈夫です。

今回はこちらのサイトを参考にさせていただきました。

トピック: 【stinger5】カテゴリの階層が表示されない | STINGER3 BBS
STINGER5 のカテゴリ名と件数をカスタマイズする方法 | キャリコ

ありがとうございました!

さて、

ここまでお付き合いいただき誠にありがとうございました。

またお見えできる機会を楽しみにしています。

 - WordPress, 問題解決

336adosensu

336adosensu

Message

メールアドレスが公開されることはありません。

  関連記事

By: Shannon Kringen
[WordPress]子テーマ作成の一番手軽で簡単な方法!プラグイン『Duplicate Theme』

ブログの文字サイズを大きくしようかと思い、子テーマのCSSをいじろうかとしたら、 …

By: Waiting For The Word
WordPressインデックスされない!原因と理由は?

スポンサーリンク WordPressブログがインデックスされない原因と理由を調査 …

pagetop
[STINGER5]トップへ戻るのボタンを好きな画像に変更する方法「PageTop」

スポンサーリンク [STINGER5]トップへ戻るのボタンを好きな画像に変更する …

By: maaco
ワードプレスで他のサイトをスクリーンショット画像とタイトル付きリンクで紹介するプラグイン?

スポンサーリンク ワードプレスの記事中で他のサイトをスクリーンショット画像とタイ …

By: jeffreyw
助けて!ワードプレスのビジュアル編集のレイアウトぐっちゃぐちゃ\(^o^)/

スポンサーリンク 助けて!ワードプレスのビジュアルモードでの編集で画像をいれると …

By: Andrew Abogado
[Hueman使い方]サイドバーの背景色を変更する方法。その2

スポンサーリンク [Hueman使い方]サイドバーの色を変更する方法。その2 前 …

14924952180_a6cbfdafda_z
センス良いね!画像をポップアップで拡大表示するワードプレスプラグイン

Photo:Le Danseur by Roy Barnett Jr. &nbs …

By: Wrote
ブログの写真・画像に枠をつけてチョット綺麗に見せる方法

スポンサーリンク ブログに掲載する写真や画像に枠をつけてチョット綺麗に見せる簡単 …

By: Kohei Uesaka
[STINGER5]サイドバーのウィジェットとかの順番を入れ替える方法

スポンサーリンク [STINGER5]サイドバーのウィジェットとかの順番を入れ替 …

By: Brantley Davidson
[WordPress]オシャレなSNSボタンをサイドバーウィジェットに追加するプラグイン「Lightweight Social Icons」

スポンサーリンク [WordPress]オシャレなSNSボタンをサイドバーウィジ …