【コピペだけ!】THE THORのパンくずリストをカスタマイズする方法!

ここあです。

 

私たちが普段何気なく使っているWordPressテーマや

ネットサーフィンして見ているWebサイトには

必ずと言っていいほど「パンくずリスト」が存在します。

 

そもそも「パンくずリスト」とは何かと言うと…

 

あなたが今見ているページがWebサイト全体のどの階層で、

どの位置にあるのかが一目でわかるように表示されているリンクのこと。

 

THE THORで言うなら以下の部分がパンくずリスト。

パンくずリスト

 

この「パンくずリスト」の主な役目としては

  • ネットユーザーの回遊率を高める
  • 検索エンジンのクローラー巡回を手助けする

 

このように、1つはサイト訪問者のナビゲーターとして、

もう1つはGoogleのSEO対策として効果を発揮します。

 

特に「パンくずリスト」はGoogleが公式に発表している

「検索エンジン最適化(SEO)スターター ガイド」の中でも

実装が推奨されているため

 

1.1.1 「パンくずリスト」を使用する
パンくずリストとは、ページの上部か下部にある内部的なリンクの行です。訪問者はパンくずリストを使って、前のセクションやルートページにすばやく戻ることができます。ほとんどのパンくずリストでは、最初の左端のリンクとして最も一般的なページ(通常はルートページ)を置き、右側に向けてより具体的なセクションを並べています。パンくずリストを表示する場合は、パンくずリストの構造化データ マークアップを使用することをおすすめします。
参考:Google「検索エンジン最適化(SEO)スターター ガイド」より

 

現在は、ほとんどのサイトやワードプレステーマにも

しっかりと「パンくずリスト」が実装されています。

 

とは言え、今回は「パンくずリスト」の重要性を

お伝えするための記事ではありません^^;

 

ただ、私が前置きとして書かせていただいたのには訳があり

今の時代は、Webサイト制作に関する知識がなくても

 

WordPressさえ使えば誰でも簡単に自分のサイトやブログを

立ち上げることができてしまいます。

 

だからこそ、Webサイトに関する基礎知識だけでも

あなたに知っておいて欲しいと思い、お伝えさせていただきました。

 

ある意味「パンくずリスト」という言葉を

知っている知っていないだけでも全然違いますからね…^^

 

ということで、今回は

そんな「パンくずリスト」のカスタマイズ方法について

解説させていただきますので

 

もう少し、サイト全体のイメージと「パンくずリスト」を

マッチさせたいというあなたは、ぜひ参考にしてみてください。

 

THE THORのカスタマイズはCSSで

基本的に「パンくずリスト」のカスタマイズはCSSで行います。

なので、まずはCSSコードの記述先について先に解説致しますね。

 

CSSコードの記述先は2箇所ありますが、私のおすすめは

プレビューを見ながら調整ができる「追加CSS」の部分です。

 

ということで、カスタマイズ用のCSSコードを記述する場合は

ダッシュボードメニューから外観 → カスタマイズをクリックし

さらに「追加CSS」をクリックして

 

以下の部分に記述するようにしてくださいね。

追加CSSのスペース

 

WordPressテーマは基本的にどのテーマも

ダッシュボードメニューから外観 → カスタマイズ→追加CSSへと

辿ることができますので、覚えておくと便利です。

 

なお、CSSコードはいつでも書き足したり

削除することができますし、最悪、削除すれば元に戻せますので

あまり神経質にならず気軽にカスタマイズしてみてください。

 

THE THORのパンくずリストをカスタマイズする方法

THE THORのパンくずリストをカスタマイズする方法とは言っても

あまりやることはありませんが(笑)

 

デザインにおいて微調整というのは、かなり重要。

正直、この調整いかんで、プロと素人との差が分かれるのです。

 

ということで、少しでも

「素人臭い如何わしいサイトイメージから脱したい」というあなたは

細かい部分にもこだわって調整していきましょう。

 

パンくずリストの背景色を変える方法

それではまず「パンくずリスト」の背景色を変える方法です。

 

THE THORのパンくずリストは通常、

このように背景色がグレーになっています。

 

THE THORは基本設定でサイト全体の背景色を変えることができても

基本設定

 

パンくずリストの背景色は設定できず

パンくずリストの部分だけがグレーで残ってしまいます。

パンくずリスト背景色

 

ということで「グレーは嫌!」というわがままなあなた(笑)

パンくずリストの背景色をCSSで変更しましょう。

 

とりあえず、以下のCSSコードをコピペすれば

パンくずリストの背景色は「白」になります。

追加CSSにコピペ
.breadcrumb {
padding: 10px 0;
background: #fff;
}

 

パンくずリストの背景色を変える場合は

以下のコードでご調整ください。

background: #fff;

 

#fffの部分をあなたの好きなカラーコードに変更すれば

パンくずリストの背景色が変更できます。

 

パンくずリストの文字色を変える方法

パンくずリストの背景色を変更すると同時に

パンくずリストの文字色を変更したいという場合が

出てくると思います。

 

例えば、背景色を真っ黒にした場合、

パンくずリストの文字が同じ黒では、読めなくなってしまいます。

パンくずリスト

 

ということで、パンくずリストの文字色を変更する場合は

以下のCSSコードをコピペしましょう。

追加CSSにコピペ
.breadcrumb__item {
font-size: 1.2rem;
line-height: 1.75;
color: #000;
}

 

パンくずリストの文字色を変更する場合は

以下のコードでご調整ください。

color: #000;

 

#000の部分をあなたの好きなカラーコードに変更すれば

パンくずリストの文字色が変更できます。

 

パンくずリストの文字サイズを変える方法

これは完全に私の主観ですが、THE THORのパンくずリストは

心持ちフォントサイズが大きいような気がします。

 

というのも、パンくずリストが長くなると

このように、パンくずリストとグローバルメニューが

ごっちゃになって分かりにくいと思うからです。

 

パンくずリスト

 

だから、個人的にはもう少し小さくする方が

パンくずリストとして認識されやすいと感じています。

 

ということで、パンくずリストのフォントサイズを小さくしたい場合は

先にコピーしたコードの中にある

.breadcrumb__item {
font-size: 1.2rem;
line-height: 1.75;
color: #000;
}

 

font-size: 1.2rem;の部分の数字を、例えば「1rem」などに変更しましょう。

 

そうするとグローバルメニューと、

多少はフォントサイズの差が出せますので

グローバルメニューとパンくずリストの区別が付きやすくなります。

 

パンくずリストの境界線を無くしたい

最後に、パンくずリストの境界線を無くす方法です。

 

通常は少し分かりにくいかもしれませんが、

サイト全体の背景色をパンくずリストの背景色と同じにすると

 

このように境界線が表示されます。

パンくずリスト

 

なぜかと言うと、元々THE THORのデフォルトで

境界線が設定されているからです。

 

なので、例えば、白で統一するなど…

サイト全体の背景色とパンくずリストの背景色を同じにする場合は

境界線もない方がスッキリして見えます。

 

ということで、境界線を消す場合は、以下のコードをコピペしてください。

追加CSSにコピペ
.breadcrumb {
border-bottom: none;
}

 

境界線を消す方法としては元々設定されている境界線の色を

あなたが設定する背景色に上書きするという方法もありますが

 

やはり、一番手っ取り早いのは、

境界線そのものを消してしまうという方法です。

 

なので、上記コードは境界線そのものを

消去してしまうというコードになります。

 

とは言え、このコード自体を消去すれば

境界線は復活しますので、あなたの必要に応じて

コピペするなり、消去するなりしてくださいね。

 

THE THORのパンくずリストをカスタマイズする方法まとめ

THE THORのパンくずリストをカスタマイズする方法まとめ

 

今回はTHE THORのパンくずリストを

カスタマイズする方法について解説させていただきました。

 

とは言え、なかなかパンくずリストの背景色まで

カスタマイズしようと考える方は少ないかもしれません。

 

ですが、最近はTHE THORの利用ユーザーも

かなり増えてきていますし

 

他のサイトと差別化するため

「良い感じにカスタマイズしたい」という方も

今後はさらに増えてくると思います。

 

なので、記事にしろ、デザインにしろ

しっかりとこだわって作り込んでいきたいものです。

 

私は、デザイナーとして、サイトデザインにこだわり

記事の編集に関してもかなりこだわって書いてますが、

その理由は決して自己満足のためなんかではありません。

 

あくまでも読者のため、自分のサイトを訪れてくれる

ネットユーザーに喜んでもらうためにこうして

うっとおしいぐらい細部まで気を配り、記事を書いています。

 

なぜなら、いくら記事を書いても

ネットユーザーに伝わらなければ意味がないし

記事の中身を端折はしょるのは誰でも簡単にできるからです。

 

なので、私はそういう意味でデザインだけではなく

記事の一つひとつにこだわることで、

他のサイトとの「差別化」というのを目指しています。

 

だから、ぜひあなたも自分のためではなく

ネットユーザーのことを第一に考え、分かりやすく伝わる記事、

伝わるデザインというのを構築しながら

 

読者に喜ばれ感謝されるサイトを作り込むようにしてくださいね。

 

そうすれば、あなたのサイトは読者に感謝され

やがてはその感謝が収益へと繋がっていきますので…。

 

ということで、

最後までお読みいただきありがとうございました!

 

 

WordPressテーマ「THE THOR」
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか?

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG