パンくずリストの最後の項目を非表示にする方法【WorsPressカスタマイズ】

デザインノウハウ
この記事は約 2 分で読むことができます。

みなさんはパンくずリストというものをご存じですか?

今どこにいるかを読者に伝えるために表示する、サイトの案内板のようなものです。

設置することでユーザビリティの向上(ユーザーにとって見やすく、使いやすいサイトのこと)やSEOにも効果があります。

そんなパンくずリストですが、最後の項目(現在のページ名)まで表示すると邪魔だなーと思うことがあります。

特にこういったブログ記事のページ。

最後の項目がタイトルになるので、とても長くなってしまいます。
パンくずリストの最後の項目
↑スマホで見ると分かりやすいですね。

そこで今回はパンくずリストの最後の項目を非表示にする方法を解説していきます!

※WorsPressテーマのCocoonを使用している場合は、30秒で設定可能です。
⇒Cocoonのパンくずリスト設定方法はこちら
そうでない方はこのまま記事を読み進めてもらって大丈夫です。
スポンサーリンク

パンくずリストの最後を非表示にする方法

①Simple CSSをダウンロード

simple css DL画面

まずはプラグインのSimple CSSをDLしましょう!

非表示にするためにcssコードを入力するのですが、サイトに関するものはこのプラグインに入力すればすべて反映されます。

本来はstyle.cssにコードを書いてFTPにアップするのが普通ですが、毎回その作業をするのは大変です。

このプラグインを使えば管理画面上で作業が完了するのでとっても楽ちん!

ASK
ASK
今後cssコードを入力する必要が出てきた時も使えるのでDLしておいて損はないですよ!

「Simple CSS」について詳しく書いた記事があります!

合わせてこちらもご覧ください!

【Simple CSS】はブログデザインに必須なプラグイン!ダウンロードから使い方まで徹底解説します!

②cssコードをコピペする

次に下記のコードをコピーしてSimple CSSに貼り付けてください。

管理画面 ⇒ 外観 ⇒ Simple CSS

/* パンくず最後の項目非表示 */
.breadcrumb li:last-child,.breadcrumb div:last-child{ 
 display:none; 
}

貼り付けたらSave CSSのボタンを押せば作業完了です。

サイトを見るとパンくずリストの最後の項目が消えているはずです。

簡単ですね!

もしうまくいかない場合

クラスが違うかも

先ほどのコードは「breadcrumb」というクラスを指定して非表示にしています。

クラスというのは名前のようなもので、基本的にパンくずリストには「breadcrumb」が付いています。

使っているWorsPressテーマによってはもしかしたらクラス名が違うかもしれません。

そのせいで効いていない可能性が…

そんな時は慌てずにクラス名を確認しましょう!

まずパンくずリストの上で右クリックを押して検証を選択

パンくずリストを検証

するとコードが出てくるので、class=の後の””に「breadcrumb」が入っているか確認しましょう!

パンくずリストのタグ

もし違うクラス名が入っていたら、コードの「breadcrumb」の部分を正しいクラス名に直してあげれば非表示になります!

優先度で負けているかも

cssには優先度があります。

他のコードに優先度で負けていて非表示にするcssが効いていないのかもしれません。

そんな時は魔法のコード「!important」を使いましょう!

これはいかなる場合であってもこのコードを最優先にするという効果を持ちます。

/* パンくず最後の項目非表示 */ 
.breadcrumb li:last-child,.breadcrumb div:last-child{
 display:none!important;
}

優先度で負けていた場合はこれで解決するはずです!

WorsPressテーマのCocoonを使用している場合

Cocoonを使用している場合は設定で消すことができるので、とっても簡単です。

管理画面に入って

Cocoon 設定 ⇒ 投稿 ⇒ パンくずリスト設定

パンくずリストに記事タイトルを含めるのチェックを外せばOK!

管理画面のCocoon 設定

まとめ

パンくずリストの最後の項目を消すことでだいぶサイトがすっきりしましたね。

これで心置きなく長いタイトルの記事が書けそうです!

最後に注意点が1つ!パンくずリストはユーザビリティの向上やSEOにも効果がある大切なものです。

ASK
ASK
くれぐれもパンくずリストすべてを非表示にするのはやめましょう!

現在のページ名を非表示するだけにとどめておきましょうね。

参考【HTML&CSS】ブログの余白を細かく調整する方法!

参考条件分岐を使ってスマホ・タブレット・PCの表示を切り分ける方法【WordPress】

デザイナーを目指すならスクールに通おう

当サイトでは、
本気でWebデザイナーになりたいならデザインスクールに通うことをおすすめしています。

なぜかというと、デザインの勉強は独学では難しいからです。

独学が難しい理由

  • モチベーション維持が難しい
  • 自分のデザインの良し悪しを判断できない
  • 無意識のうちに、好きなデザインばかりを作ってしまう
  • いくら勉強しても就職できるかは別問題

デザインというものは勉強すればするほど上達できるわけではありません。

プロに見てもらいながら、正しく勉強して初めて、デザインは上達するんです。

独学で無駄な時間を費やすくらいなら、多少お金はかかってもWebデザインスクールに通って最速でデザイナーになるべきです!

当サイトおすすめのWebデザインスクールについては下記リンクよりご覧ください!

おすすめWedデザインスクール17選!現役デザイナーが解説します!
デザインノウハウ ブログカスタマイズ
スポンサーリンク

応援クリックをポチッとお願いします!
ブログランキング・にほんブログ村へ   

ハジデザ | 初めてのWebデザイナー転職

コメント