ワードプレスと賢威などのテンプレートでサイトを作り始めると、やっぱりデザインに拘りたくなりますよね。
特に最初に目に付くヘッダー画像はサイトの第一印象として大切になることも多いです。
もちろんあまりに拘り過ぎて記事内容が薄くなっては本末転倒ですが、僕は『自分の事を書いたブログは自分色に染めたい！』とか思ってしまいヘッダー画像を作って設置しました。
でもよく見ると、ヘッダー画像と本文が書いてある場所との隙間が大きくて変なんです。不必要な余白があると見た目が悪くなりますよね。
『ヘッダー画像を設置した時に出る隙間を何とかしたい！』
今回はこの問題の解決方法を紹介します！
賢威でヘッダー画像の隙間（余白）を無くす手順
ヘッダーに隙間がある場合はこんな感じになります。
画面上部とヘッダー画像の間、ヘッダー画像とグローバルメユーの間に隙間があります。
ヘッダー画像のベースとなる色が白なら隙間は気になりませんが、僕のはそうじゃないので余白となってしまい見栄えがよくないですよね。
初期設定では隙間が出る仕様になっているので、これを修正していきましょう。
画像の準備と設置が終わってからの手順をまとめていきます。
ワードプレス管理画面を開く
ワードプレス管理画面の左下にある『外観』をクリックし『テーマ編集』へ進みます。
テンプレートの下の方を見る
『テーマ編集』の画面に進んだら画面右の『テンプレート』欄を見ながら下の方にスクロールする
base.cssへ進む
テンプレート欄の下の方に『スタイル』という項目があるので、そこのbase.cssをクリック。
ヘッダーを編集する
base.cssをクリックし編集画面に進みます。
たくさん書かれたコードの中で『ヘッダー』の項目にあるpaddingの数値を変更します。
コードを探すのが面倒なら
編集画面にはコードがたくさん記載されていて、一体どこに何があるかが分かりにくいですよね。
そんな時は『サイト内検索』を使うと簡単に解決できます。
base.css編集画面内で『ヘッダー』を探す場合、まず『ctrl+F』を押す（同時押し）と検索ボックスが出てきます。
そこに上図のように『ヘッダー』と入力すると、その画面内にある検索ワードの数が表示されます。
そしてボックス右にある、
上向き、下向きのマークをクリックすると検索語句まで飛ぶことができます。
さらに『ヘッダー』と記載された場所はマーカーで区別されているので、すぐに見つけることができます。
コードを発見したら次にそれを書き換えます。
初期状態だと以下のように、隙間ができるコードが記載されています。
.site-header-conts{
display: table;
width: 100%;
padding: 30px 0;
}
30pxが余白の幅を表す数値で、この値が大きいほど隙間が大きくなります。
僕は隙間を無くしたかったので30pxを0へ変更しました。
.site-header-conts{
display: table;
width: 100%;
padding: 0 0;
}
以上の編集が終わったら、画面一番下にある『ファイルを更新』をクリックしましょう。
プレビューで確認
その後プレビューでサイトを確認すると、
みごとに隙間が無くなっています。これで綺麗なサイトに仕上がりました。
カスタマイズが反映されない時は？
『慣れない編集が終わって一安心！』
そう思いプレビューを見ると、CSSが全く反映されていないことがあります。これはCSS編集でよくあるトラブルですが、どういうことかを知っていればあっさり解決します。
解決策はこちらにまとめているので参考にしてください。
まとめ
ヘッダーに画像を設置した際に目立ってしまう隙間（余白）を調整する方法をまとめてみました。
画像が白ベースなら余白は気になりませんが、それ以外だと変に見えることもあります。
もし違和感を覚えているなら思い切って編集してしまいましょう！
その方がスッキリしますよ◎
特に賢威を使ってる人に参考になれば幸いです。
ブログテクニックまとめ
僕がブログを実践して得てきた知識をnoteにまとめました。
基本的な考え方からちょっとしたテクニックまで、初心者さんに向けの内容になっています。
もしよろしければ参考にしてください。
⇒ アフィリエイト広告の種類は？広告選びで参考にすべき4つの考え方
コメント