賢威のパンくずリストのフォントサイズや表示の変更方法


賢威にはパンくずリストというものが標準でついています。

1

これですね。

これのフォントサイズや表示を変更する方法について今回は書いていきます。

パンくずリストのフォントサイズを変更する

まずはCSSファイルに行きます。

2

ワードプレスのダッシュボード→外観→エディター→design.cssに行って、上の画像の赤枠の部分を探してください。

ここがパンくずリスト(パン屑ナビ)のレイアウトを指定している箇所です。

まずは、フォントサイズを変更してみます。

「#breadcrumbs{」にある「font-size: 1.2em;」の数値がデフォルトの大きさになりますので、分かりやすく 「2.2em;」にしてみたいと思います。

設定ができたら下の「ファイルを更新」ボタンをクリックして保存します。パンくずリストはトップページには現れないので、どこかの記事ページで確認してください。

3

このようになります。

例として大きくしましたが、ここはサイト全体のレイアウトとのバランスを考えて変更して下さい。

尚、「font-size: 1.2em;」の上にある「margin-bottom: 1.5em;」という数値は、いわゆる「パンくずリスト空白部分」だと思って下さい。この数値を大きくすると、下のメインコンテンツとの距離が広がります。ここも例として広げてみたいと思いますので、「11.5em;」にしてみます。

4

このようになりました。こちらも同様に、サイト全体のレイアウトとのバランスを考えて変更して下さい。

パンくずリストの表示を変更する

デフォルトでは、パンくずリストは左側に配置され、そこから指定した階層構造に沿って、リストを表示しています。また、横並びになっているのも特徴です。

今回の例としては、まず横並びを解消すること。その後、その位置を変更するというものです。

横並びの解消と位置の変更

まずは、横並びを解消しましょう。

5

先ほどのCSSファイルの画像です。今度は下の赤枠の「#breadcrumbs li{」の部分です。

まず、「display: inline;」となっている部分ですが、ここの「inline」を「block」に変えます。

するとこのようになります。

6

縦並びになりましたよね。

「inline」というのは、階層構造の表示を横並びにするためのコードです。階層構造の表示は、特に設定がないと縦に並んでしまうので、こうしてコードで横並びにするのです。

そして今回設定した「block」は、この階層構造を丸ごと箱に詰め込むもの、と思って下さい。

で、同じコード欄に今度は「text-align: right;」というのがあると思います。

これが配置を決定しています。現在は「right(右側)」に設定されているので、「block」を指定したパンくずリストは右側に偏っています。これを「center(中央)」や「left(左側)」と指定することで、パンくずリストを動かすことができます。

「center(中央)」にするとこうなります。

7

「left(左側)」にするとこうなります。

8

このようにして表示を変えることができます。

また、この縦並びのリストの幅を広げる時は、「#breadcrumbs li{」内の「line-height: 1.8;」の数値を上げ下げすることで変更できます。

今回は例として、3.8にしてみました。

9

縦の幅も広がりましたね。

横並びの間隔を広げる方法

また、パンくずリストのリスト同士の間隔をちょうど良くしたいという時は、「#breadcrumbs li{」内の「margin-right: 0.5em;」の数値を上げ下げすることで、感覚を調節できます。

例として、「2.5em;」にした画像がこちらです。

10

このように広がります。

以上がパンくずリストについての説明です。

次ページ

12次

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームより僕にお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。

このブログは、

・アフィリエイト開始初月から9万円のネット収入が得られた秘密

アフィリエイト開始2ヶ月目で以前勤めていた会社からの給料と
 同額
のネット収入を確保した方法

・5ヶ月目で月収120万円を達成した最先端テクニック

・これから流行り始めるブログマネタイズの新しい思考法

などを書いています。

只今、ブログの内容をより体系的にまとめたビジネス教科書を
無料でプレゼントしています。

以下のフォームに教科書を受け取るメールアドレスと、
あなたの苗字を記入してプレゼントをお受け取り下さい。





記事一覧


著者:ヒデアキ
現在は、毎月100万円の収入を得ているブログアフィリエイトの知識を活かして「新たな収入源を手に入れ大切な人を守りたい」と真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら


このページの先頭へ