賢威7のパンくずリストの上下マージンを変更する方法

どうも。葉です。

この記事では、賢威7のパンくずリストの上下マージンを変更する方法を紹介していきます。

1.この記事を読んでできるようになること

まずは、この記事を読んでできるようになること「変更前」→「変更後」の画像より確認していきましょう。

次のように、賢威7のパンくずリストの上下のマージンを大きくしたり小さくしたりできるようになります。

変更前

賢威7のパンくずリストの上下のデフォルトマージン

変更後

賢威7のパンくずリストの上下のマージン変更後の画像

では、実際にコード編集を行って、パンくずリストの上下マージンを変更していきます。

2.賢威7のパンくずリストの上下のマージンを変更する手順

まず、WordPress管理画面の左メニューより「外観→テーマの編集」をクリックしてください。

賢威7のパンくずリストの上下のマージンを変更する手順1

「base.css」をクリックしてください。

賢威7のパンくずリストの上下のマージンを変更する手順2

ここから、コードの編集を行っていきます。編集は、2箇所行なう必要があります。それぞれ、編集を行ってください。

1箇所目

開いた「base.css」の中で「.breadcrumbs-in」と記述されている場所を探してください。その内側に、

    margin: 2em 0;

と記述されいます。この2emの部分を変更すると、パンくずリストの上下のマージンが変更されます。

ちなみに、2emとは、デフォルトのフォントサイズの2倍を意味しています。

賢威7のパンくずリストの上下のマージンを変更する手順3

2箇所目

ただ、このままでは、グローバルナビとパンくずリストの間のマージンが変更されない場合があります。その場合は、

「メインボディ」のすぐ下にある「.main-body」を探してください。その内側に

    margin-top: 2em;

とあるので「2em」の部分を1箇所目と同じ数値にしてください。

賢威7のパンくずリストの上下のマージンを変更する手順4

これで、パンくずリストの上下マージンが変更されたはずです。

3.まとめ

この記事では、賢威7のパンくずリストの上下マージンを変更する方法を解説しました。

この他にも、パンくずリストのデザインを変更したい場合は、次の記事を参考にしてください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします