当サイトのリンクにはアフィリエイト広告が含まれています

ドロップダウンカテゴリーの不要なテキストを削除する方法。

今までちゃんとした見直しをしなかったせいで、何時間もかけて内部リンク構造を見直すことになったシェフです。一つのカテゴリーに200記事とかあって、カオスな状態でした(笑)

でも、それも過去の話!しっかり「親カテゴリー」と「子カテゴリー」を設定し、記事をカテゴライズしましたよ!これで、わかりやすくなったかな〜

dropdown-category-1

カ、カオスや…



そんな時はドロップダウンで表示しよう!

今まで極端にシンプルだったので、あまりのカテゴリーの多さに卒倒しそうになりました。さすがに、これはまずいですよね…笑

で、カスタマイズしようかどうか悩んだんですが、ここは素直にデフォルトの機能で対応することにしました。

dropdown-category-6

▲この「ドロップダウン表示」です。今回はこれでたくさんのカテゴリーを表示することにしました。

カテゴリーの中に「カテゴリー」という文字がある

で、「ドロップ表示にチェックを入れて終わりー!」となるはずだったんですが、一つ問題が。なぜか、余計な文字があったんです。

dropdown-category-2

▲カテゴリーの中に「カテゴリー」という文字があるんですよね。「なんか設定ミスったのかな〜」とも思ったんですが、デフォルトでした。

(これ、必要な人とかいるんだろうか…?)

不要なテキストを削除する

ということで、サクッと文字を削除することに。正確には「削除」ではなく「非表示」ですが。その方法は至って簡単。

下記コードをスタイルシート(style.css)に追加するだけです。全体のスタイルに影響する位置に追加してください。

See the Pen dXEgOq by Chef (@chef-aomori) on CodePen.

 

これだけで文字が消えます。ついでに、アーカイブの方も。

dropdown-category-3

 

スマホ表示の時は、画面下にスクロールメニューが。

dropdown-category-4

 

PC表示の時は、インデント(子カテゴリーが親カテゴリーより右にずれる)されたカテゴリーが表示されます。

dropdown-category-5

▲ドロップダウン表示以外では、デフォルトでインデントされてないので、これは楽チンですね。

まとめ

それにしても、この重複文字は何の意味があるんでしょうか…?変更できるわけでもないし、絶対必要ないと思うんですが…

まぁ、サクッと消せるので、良しとしましょう。今まで文字が消せずに悩んでいた方に参考にしていただければ嬉しいです!


カテゴリー:カスタマイズ

シェフ

このサイト「Fantastech」を運営している人