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


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

<賢威7>賢威7 パンくずリスト

<賢威6.2>1

これですね。

このパンくずリストのフォントサイズ(文字の大きさ)や表示を、賢威7と賢威6.2で変更する方法について解説していきます。

賢威7のパンくずリストのフォントサイズを変更する方法

まずは、賢威7のパンくずリストのフォントサイズを変更します。

賢威7でパンくずリストのフォントサイズを変更するには、

ワードプレスのダッシュボード→外観→テーマの編集→base.css

の順にクリックし、以下の『パンくずリスト』と書かれた箇所を探します。

賢威7 base.css パンくずリスト

赤枠部分に、フォントサイズ(文字の大きさ)を指定する『font-size: 1em』のコードを書き加えます。

書き加えると以下のようになります。

賢威7 base.css パンくずリスト フォント

画像 『em』は、フォントサイズ(文字の大きさ)を指定するCSSコードの一つで、1の値を基準とします。

なので、文字を大きくする場合は、『1.25em→1.5em→1.75em…』という具合に、少しずつ数値を大きくします。

逆に、文字を小さくする場合は、『0.75em→0.5em→0.25em…』という具合に、少しずつ数値を大きくします。

今回は、例として、文字を大きくしますので、『em』の値を『1.5em』に指定します。

『1.5em』にすると、以下のように、パンくずリストのフォントサイズ(文字の大きさ)が大きくなります。

賢威7 パンくずリスト フォントサイズ

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

次に、賢威6.2のパンくずリストのフォントサイズを変更します。

まずは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つ解決していきます。

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



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

このページの先頭へ