趣味を楽しむDIYな暮らし

手作りのくふうを活かした日常生活ブログ

はてなブログでPCヘッダー画像の左右余白を無くし画面いっぱいに広げる簡単な方法

 f:id:sikinomori117:20191201044710j:plain

 12月4日一部訂正済

 

こんにちは ご訪問ありがとうございます。

 

今回の記事は、はてなブログで設定しているヘッダー画像の左右方向に出る余白が気になる方に誰でも簡単に出来るCSSコードの貼り付け方法をお伝えする内容です。

 

この操作方法で作業すれば自分が表示させたいヘッダー画像を横幅いっはいに表示させることが出来ます。

 

尚、私自身CSSに関しては難しくて判らないので、参考させて頂いた記事内容で繰り返しテストを行いヘッダー左右の余白を綺麗に無くすことが出来ました。

 

 

目次

 

 

これまで判らなかったこと

 

➀デザインカスタマイズから画像選択しても余白が出来てしまうこと?

➁デザインテーマに合ったCSSコードの選び方が判らない?

➂操作的な事ですが、デザインカスタマイズからヘッダー画像を選択する操作を行った場合は自分で画像を選んで貼り付けするので、これで何が出来るか?と迷うことはありません。

 

ところがデザインCSSにコードを張るという作業で何が変化するのか?素人にはその辺がよく判りません。

 

これは後で判った事ですが、デザインCSSを貼り付けるだけでテキストしか表示されていなかったヘッダー部分に自分が選んだ画像が表示されるようになります。

 

それでは実践手順に行きます。

 

主な操作手順

 

始めに、ヘッダー画像の編集用にサブブログ等を作っていろいろテストして来ましたので参考までにお知らせいたします。

 

➀ヘッダー画像を貼り付けている場合は一旦画像を外しておきます。

 

操作手順に書くと一番初めになります。後でも書きますがCSSの書き込みだけで画像が表示するので、あらかじめ画像を外しておいたほうが分かりやすいと思います。

 

➁自分がヘッダーに貼りたい画像のURLを確認します。

 

画像のURLを簡単に確認するには、新しく記事を書くページに見たままモードの状態で画像を貼り付け、HTML編集モードを選択するとコードが表示されるので、メモ帳にコピーしておきます。

 

src以降にある”この間に書かれているコードが画像のURLです

 

言葉で言うとダブルコーテーションの間にある文字列でしょうか?

 

ヘッダーに使いたい画像のURLを確認する方法については下記の記事で詳しく解説されていますので参考にさせて頂きました。 

mmorley.hatenablog.com

 

 

➂左右の余白を無くすデザインCSSコード確認

 

余白を無くすことが確認出来た下記の記事を参考にさせて頂きました。

www.quest-mile.com

 

この記事内に掲載されているはてはブログの入力検索結果の回答者様の書かれたCSSコードが実際に当ブログにも使われています。

 

 

➃CSSコードを書き換える部分

 

上記記事内回答者様のコードコード原文のまま

 

#blog-title {
    background: url('http://cdn-ak.f.st-hatena.com/images/fotolife/t/td318mimeko/20160221/20160221002653.jpg') center 50%;
    background-size: cover;
}

 

書き換える部分

 

下にあるように黄色の部分を自分がヘッダー画像に使いたい画像のURLに書き換えます。

 

スマホでは見にくいと思いますが、イメージとしてとらえて頂けたらと思います。

 

f:id:sikinomori117:20191202130238p:plain

➄書き換え後のコードをデザインCSS欄に貼り付け

 

 デザイン→カスタマイズ→デザインCSS欄に書き換えたコードを貼り付けます。

 

この場合、コードを貼り付けた段階で編集画面のヘッダー部分に選択した画像が表示されます。

 

※デザインCSS欄に上記編集後のコードを貼り付ければ、カスタマイズから画像を選択する必要はありません。

 

⑥CSSコード貼り付け後

 

今回のCSSコードを使うことで下記の画像にもあるように余白を綺麗に無くす事が出来ました。

 

ブログのデザインテーマがBrooklynを使ってますが、このコードがピッタリのようです。

 

f:id:sikinomori117:20191202163539p:plain

 まとめ

 

ブログ開設10カ月目になりますが、ヘッダー画像の余白問題がずっと解決出来ずにいました。

 

今回参考にさせて頂いた記事の作者様にあらためて感謝です。

 

ここまでご精読ありがとうございます。