この記事の所要時間: 338

賢威7のヘッダー上下の余白を調整する方法 を画像と動画で徹底解説

賢威7のヘッダー上下の余白とは?


賢威7のヘッダー画像を変更した際に、ヘッダーの上下が必要以上にスペースが空いてしまっているので、これは修正しておくべきでしょう。

※クリックで画像が拡大します。
賢威7のヘッダー上下の余白を調整する方法 を画像と動画で徹底解説

このヘッダー上下の余白を調整するにはソースコードを直接編集する必要がありますが、一箇所の数値を変更するだけですので、この記事で説明しているとおりに進めていただければ問題なく余白を調整することができるはずです。

もし賢威をまだお持ちでない場合には、私も賢威を特典付きでご紹介しておりますので、是非とも下記のページをご覧ください。

これまで3年間で8回も賢威を大幅にリニューアルしたり、賢威のカスタマイズに関して、200名以上の方をサポートをしてきた実績から、賢威のサポートなら誰にも負けない自信があります。


あなたも賢威のカスタマイズを本気で極めてみませんか?


それでは賢威7のヘッダー上下の余白を調整する方法について詳しく解説していきます。

賢威7のヘッダー上下の余白を調整する方法


賢威7のヘッダー上下の余白を調整する方法するには、まずソースコードを編集する必要がありますので、ダッシュボードの左メニュー一覧から【外観】にマウスを合わせて【テーマの編集】をクリックします。

※クリックで画像が拡大します。
賢威7のヘッダー上下の余白を調整する方法 を画像と動画で徹底解説

次に、右側のソースコードメニュー一覧の中にある【base.css】をクリックして、ソースコードの編集画面を開いてください。

※クリックで画像が拡大します。
賢威7のヘッダー上下の余白を調整する方法 を画像と動画で徹底解説

そのソースコードの中から下記のソースコードを見つけて編集していきます。

/*----------------------------
ヘッダー
----------------------------*/

.site-header-conts{
	display: table;
	width: 100%;
	padding: 50px 0;
}

このソースコードの一番下にある【50px】という数値を小さくすればするだけ、ヘッダー上下の余白は狭くなりますので、ここでは【15px】にしていきます。

/*----------------------------
ヘッダー
----------------------------*/

.site-header-conts{
	display: table;
	width: 100%;
	padding: 15px 0;
}

数字の編集ができたら、最下部にある【ファイルを更新】をクリックして、ブログを確認すれば無事に余白が狭くなっているはずです。

※クリックで画像が拡大します。
賢威7のヘッダー上下の余白を調整する方法 を画像と動画で徹底解説

もし余白を広くしたければ先ほどの数字を大きくすれば余白を広くすることができますので、お好みに合わせて調整してください。

ヘッダー上下の余白を調整方法を動画で解説


それでは賢威7のヘッダー上下の余白を調整する方法を動画で詳しく説明していきます。

賢威7のヘッダー上下の余白を調整する方法


賢威7のヘッダー上下の余白を調整方法まとめ


今回のカスタマイズは細かい部分になるので、もしかしたら気にならない人もいると思いますが、ブログで差別化を図るためには、こうした細かい見た目を意識することも大切です。

また賢威7はスマホでも表示させることができるレスポンシブ表示対応なので、PCだけでなくスマホからも確認しながらデザインを調整していく必要があります。

カスタマイズ自体は簡単でそれほど時間もかかりませんので、しっかりと調整しておきましょう。

他にも賢威7のカスタマイズ方法を動画と画像で徹底的に解説していますので是非ともご覧いただき、あなたの賢威7カスタマイズにお役立てください。


賢威7のカスタマイズ方法を画像と動画で徹底解説


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

【完全無料】話題沸騰の史上最強の初心者向け企画!
アフィリエイト初心者のための覚醒メールセミナーNEO

分からないことは今すぐに解決してください!
ネットビジネスで分からないことをナオトに質問する

よく読まれている関連記事をご紹介します!