こんにちは、小林です。

 

今回は、賢威7カスタマイズ!第2弾

ということで、”ヘッダー画像の上下余白を無くす方法”

について、解説していきます。

 

実は、昨日、この記事を書くために作業をしていましたが、

余白がなくならず、元のままだったので、記事を取り止めた

のですが、今朝パソコンを開けて、ブログを見てみると、

なんと!余白がなくなっているではありませんか!!(^^)!

 

なので、ひょっとすると、多少のタイムラグが

あるかもわかりませんが、下記のやり方で、

余白がなくなることは間違いありません。

 

また、保存キーの押し忘れ等にも

注意を払いつつ、早速作業に参りましょう!

 

SPONSORED LINK

 

1.はじめに ~HTMLとは?~

今回の”ヘッダー画像の上下余白を無くす方法”は、

ワードプレスの外観➡テーマの編集➡base.cssと移動して、

一言でいえば、HTML言語を変更することで、可能になります。

 

そこで、この”HTML”について簡単な知識を取り入れてから、

作業に入っていきましょう!

 

 

■HTMLとは?

 

HTMLとは、Hyper Text Markup Language の略で、

ウェブページを制作するために開発された言語です。

 

日本語に訳せば、”ハイパーテキストに目印を付ける言語”

という意味で、この”ハイパーテキスト”とは、ハイパーリンク

を埋め込むことができるテキストということです。

 

”ハイパーリンク”とは、あの、下線が付いた文字をクリックすると、

サイトに飛ぶあのリンクのことです。

 

そして、”目印を付ける”とは、見出し、段落、表、小見出しなどを

生成することを意味し、文章をわかりやすく表示し、検索エンジンや

読者が読みやすくしてくれる言語で、上記の要素を作り出すことが、

HTMLの役割なのです。

 

 

2.ヘッダー画像の上下余白を無くす方法

 

まず、下記の画像をご覧ください。☟

(画像が小さいですが余白を無くす以前の画像です。)

 

 

 


これが、無くすとこのように変わります。☟

 

 

上下の余白を無くすと、スッキリしています。

 

そして、一番上の記事も、2行ぐらいが、閲覧できるように

なっていますので、メルマガ登録フォームが見られやすくなります。

 

それでは、早速、作業に入っていきましょう!

 

❶ワードプレス管理画面から外観➡テーマの編集➡body.cssへ、移動します。

 

  テーマの編集で、下記のように、右下に、”body.css”があります。☟
 ❷そして、base.cssが開いたら、パソコンの”Ctr+Fキー“を押して、
検索窓を取り出して、【.site-header-conts{】と入力してください。☟
 ❸ソースコードの一番下の”padding:50px”を0px
 にして、保存をクリックすると、
 余白がなくなります。
.site-header-conts{
  display: table;
  width: 100%;
  padding: 50px 0;
}

上記赤文字の50を0にして、保存しますと、余白がなくなります。

 

是非、お試しください。

 

それでは、次回の記事でお会いしましょう!

 

小林 伸二

 

SPONSORED LINK