先日、ヘッダー画像を設定しました。
カスタマイズせずにヘッダー画像を設定した場合、上下左右に余白ができ浮いた存在になる場合があります。
今回はどのテーマ（テンプレート）でも上下の余白なし！左右横いっぱいにピッタリ収まるカスタマイズを紹介します。
ヘッダーの種類
ヘッダーに画像を設定するといってもデザインがあります。
ブログタイトルと画像が別
私ははてなブログユーザーなのではてな目線で説明させてもらいますが、初期設定ではブログタイトルとヘッダー画像は別になっています。
ブログタイトルはデフォルトの文字で、その背景として画像が表示されています。
ブログタイトルと画像が一緒
ヘッダー画像に自分でブログタイトルをデザインし１枚の画像で納めるデザインです。
「タイトルヘッダー」といい、初期設定で表示されるブログタイトルを表示させないようにし、カスタマイズでヘッダー画像にブログトップのＵＲＬをリンクさせることにより、ヘッダー画像をクリック（タップ）したらどのページからでもブログトップへ行くことができます。
自分がデザインしたタイトルヘッダー画像のみの表示になる（デフォルトの文字がない）ので、ブログのオリジナリティが上がります。ついでにテンションもあがります。
デザイン（実装イメージ）
ＰＣ画面表示
画像下にグローバルメニュー、左側に記事一覧、右にサイドバーがあります。
画像上側はページの頭から余白なしにはじまり、画像下はグローバルメニューとの間もなくピッタリくっついています。
左右の幅も記事一覧エリアからサイドバーエリアまで画面横幅いっぱいまで広がり余白がありません。
スマホ画面表示
こちらも画面頭からメニューバーまでピッタリに収まり、左右も横幅いっぱいまでピッタリに収まっています。
注意点
上記で紹介した記事は分かりやすいのですが、欠点がいくつかあります。
・コード作成者が設定した横幅サイズは使っているテーマ（テンプレート）や見るデバイスによって合わない場合があります。
・上記記事のコードをそのまま使用すると横幅サイズが合わないで発生した余白がピンク表示になります。
簡単に説明すると上記記事は、「余白を非表示にする」と言っていますが正確には「余白を画像の色と同じに塗りつぶす」方法ではないでしょうか？
これだと私みたいに単色で作られていない画像は、綺麗に表示できない！！
なので、ソースコードの一部を改造して「誰でも・どのテーマでもピッタリになる」カスタムを紹介します。
設定方法
コード内に自分で埋め込む作業もありますので順に説明を読んで行ってください。
手順①
以下のコードをコピペ（コピー<複製>＆ペースト<貼り付け>）します。
<style type="text/css"> .header-image-wrapper {display:none;} #blog-title{display:none;} .headernew img{ max-width:100%; margin: auto; display: block; } .headernew a{ display:block; background-color:#fde6ff; } .headernew{ margin:0px!important; } </style> <h1 class="headernew"> <a href="ブログのトップページURL"> <img src="ヘッダー画像のURL" alt="ブログタイトル" width="100%"> </a> </h1>
ダッシュボード（管理画面）
↓
デザイン
↓
カスタマイズ（スパナマーク）
↓
ヘッダ
↓
タイトル下に上のコードを貼り付けます。
手順②
コードの下から４行目と３行目の中に
「"ブログのトップページURL"」
「"ヘッダー画像のURL"」
「"ブログタイトル"」
という項目があります。
文字通りの内容に入れ替えて記述してください。
「""」は消さずに中だけ変更してください。
「"ヘッダー画像のURL"」が分からない・取得の仕方が分からない方は簡単な方法があります。
設定で、記事編集モードを「見たままモード」にし新しく記事を書くで文章記入欄に使いたいヘッダー画像を貼り付けます。
画像を１クリックで選択し右クリックします。
「画像アドレスをコピー」で画像ＵＲＬを取得できるので、そのまま貼り付けではめ込んでください。
「"ブログタイトル"」の項目は、ページ表示時に画像が表示されない場合テキストとして表示される文字です。画像が見れなくても何の画像化分かるようにするためのもので、訪問者とグーグルに分かりやすくなります。ＳＥＯ対策にもなります。
確認
すべて記述変更ができたら、画面右側のプレビューで確認します。
問題なければ上部の「変更を保存する」をクリックし完了です。
ポイント
なぜどのテーマ・デバイスでもピッタリに表示できるのか？というところを一応説明しておきます。
紹介記事の元のソースコードでは、上から５行目に「 max-width:1120px;」と記述されていました。
これは横幅サイズの指定数値なのですが、画像表示は1120pxと固定です。
つまりそれ以上のサイズのテーマや、デバイスなどでは足りない部分に余白が出来るということです。
上記の参考記事主さんはヘッダー画像が単色なので余白が出来たとしても同色背景に設定していれば、違和感なく全体がヘッダーになります。
しかし私みたいに複数の色のヘッダーだとこのやり方が出来ません。
なので、pxを指定せずに「ヘッダーエリアの〇％を画像を表示する」という指定記述にしました。
100％にすることでテーマもデバイスも関係なく横幅いっぱい（100％）の範囲で表示されます。
これが「max-width:100%;」という記述になります。
おまけ
ちなみにヘッダー画像の背景色は、参考記事のコードのままなのでピンクです。
ページが表示される一瞬ヘッダー部分がピンクになることがたまにありますが、ヘッダー画像が表示されると見えなくなる部分なので問題ないです。
それでも気になる方は、コードの１１行目「#fde6ff」の部分を好きなカラーコードに変更することで変えることができます。
カラーコードはこちらで見れます。
html-color-codes.info
まとめ
最近はオシャレなテーマが多いですし、シンプルなデザインのブログで運営したいと思っているユーザーも多いです。
ヘッダーはブログの顔・玄関です。
デフォルトのままでもいいですが、やはりオリジナリティを出す一番の効果場所です。
アイコンもそうですが、ヘッダー画像を覚えてもらって「あ！この人のブログだ！」とすぐ認識してもらえると今後ファンも付きやすいのかなと思います。
私はブログは「もう一つの自分の家」だと思っています。
カスタマイズをして模様替えをすることで、どんどんオシャレになっていくのが楽しくてたまりません。
あなたもぜひオリジナリティを上げていきましょう☆
▼オリジナルヘッダー画像を作って▼
みたい方はこの記事が役に立ちます
life-is-rpg.hatenablog.jp
・ヘッダー画像下にグローバルメニューを設置して読者回遊率を高めるカスタマイズ
・サイドバーにピッタリなフォローボタンを設置するカスタマイズ
・画像に文字入れをするなら「Pics Art」が最強加工アプリ！
