趣味を楽しむDIYな暮らし

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

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

 f:id:sikinomori117:20191201044710j:plain

 

2020年7月26日 更新

 

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

 

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

 

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

 

始めに当ブログのブラウザはGooglechrome、デザインテーマはBrooklynを使っています。

 

CSSコード貼り付けテストは必ずサブブログで行い、IEやMicrosoftEdge・GoogleChrome等のブラウザでどのように表示されるかを確認のうえ導入するようお願い致します。

 

目次

 

 

 

それでは実践手順に移ります。

 

主な操作手順

 

始めに、ヘッダー画像の編集用にサブブログを作成してテスト出来るようにします。

 

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

 

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に書き換えます。

 

メモ帳にコピーしておいた画像のURLを下の黄色い線の部分に張り替えます。

 

①黄色い線の部分を削除

②コピーしたURLを貼り付け

 

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

 

f:id:sikinomori117:20191202130238p:plain

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

 

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

 

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

 

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

 

CSSコード貼り付け後

 

今回のCSSコード追記によって下記の画像のように余白を無くす事が出来ました。

 

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

 

f:id:sikinomori117:20191202163539p:plain

まとめ

 

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

 

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

 

関連記事

 

www.mominokihausu.com 

 

www.mominokihausu.com

 

www.mominokihausu.com 

 

www.mominokihausu.com 

www.mominokihausu.com