賢威7ヘッダー部ブログタイトルの上下マージン(余白)を変更する方法

どうも。葉です。

この記事では、賢威7のブログタイトルの上下マージンを変更する方法を解説します。

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

まずは、この記事を読んでできるようになることを、画像を交えて確認していきましょう。

下図のようにブログタイトルの上下の余白を変更できるようになります。

変更前

賢威7ヘッダー部ブログタイトルのデフォルト上下マージン

変更後

賢威7ヘッダー部ブログタイトルの上下マージンを縮めた

では、実際に、ブログタイトルの上下の余白を変更していきます。

2.賢威7ヘッダー部ブログタイトルの上下マージン(余白)を変更する手順

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

賢威7ヘッダー部ブログタイトルの上下マージンを変更する手順1

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

賢威7ヘッダー部ブログタイトルの上下マージンを変更する手順2

「base.css」内でヘッダーと書かれている場所を探してください。

そのすぐ下に、「.site-header-conts」で囲まれたコードがあります。その内側に、「padding: 30px 0;」という記述があるはずです。このコードがブログタイトルの上下マージンを指定しています。

この「padding」について書かれている場所を次のコードに変更してください。

    padding: 15px 0 0;

賢威7ヘッダー部ブログタイトルの上下マージンを変更する手順3

これで、「1.この記事を読んでできるようになること-変更後」と同じ余白になったはずです。

補足:paddingについて

ちなみに、paddingで指定できる余白は、次のようになります。参考にして、あなたの好きなように余白を編集してください。

padding: 30px; 上下左右の余白:30px
padding: 30px 0;

上下の余白:30px

左右の余白:0

padding: 30px 20px 0;

上の余白:30px

左右の余白:20px

下の余白:0

padding: 30px 20px 10px 0;

上の余白:30px

右の余白:20px

下の余白:10px

左の余白:0

3.まとめ

この記事では、賢威7のブログタイトルの上下マージン(余白)を変更する方法を解説しました。

この他にも賢威7のヘッダー部の編集を行いたい場合は、次の記事を参考にして下さい。

 

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

最新情報をお届けします