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

今までちゃんとした見直しをしなかったせいで、何時間もかけて内部リンク構造を見直すことになったシェフです。一つのカテゴリーに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

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

まとめ

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

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

注目 DMM.comの動画や映画が月額500円で見放題!無料お試しあり!

注目 【dマガジン】初回31日間無料で180誌以上の雑誌が読み放題!

注目 【2週間無料】Huluの登録・解約方法〜おすすめ映画まで!

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!