2020年7月26日 更新
こんにちは ご訪問ありがとうございます。
今回の記事は、はてなブログで設定しているヘッダー画像の左右方向に出る余白が気になる方に誰でも簡単に出来るCSSコードの貼り付け方法をお伝えする内容です。
この操作方法で作業すれば自分が表示させたいヘッダー画像を横幅いっはいに表示させることが出来ます。
始めに当ブログのブラウザはGooglechrome、デザインテーマはBrooklynを使っています。
CSSコード貼り付けテストは必ずサブブログで行い、IEやMicrosoftEdge・GoogleChrome等のブラウザでどのように表示されるかを確認のうえ導入するようお願い致します。
目次
それでは実践手順に移ります。
主な操作手順
始めに、ヘッダー画像の編集用にサブブログを作成してテスト出来るようにします。
ヘッダー画像を貼り付けている場合は一旦画像を外しておきます。
CSSの書き込みだけで画像が表示するので、あらかじめ画像を外しておいたほうが変化が分かりやすいと思います。
自分がヘッダーに貼りたい画像のURLを確認します。
画像のURLを簡単に確認するには、新しく記事を書くページに見たままモードの状態で画像を貼り付け、HTML編集モードを選択するとコードが表示されるので、メモ帳にコピーしておきます。
src以降にある”この間に書かれているコードが画像のURLです”
言葉で言うとダブルコーテーションの間にある文字列でしょうか?
ヘッダーに使いたい画像のURLを確認する方法については下記の記事で詳しく解説されていますので参考にさせて頂きました。
左右の余白を無くすデザインCSSコード確認
余白を無くすことが確認出来た下記の記事を参考にさせて頂きました。
この記事内に掲載されているはてはブログの入力検索結果の回答者様の書かれた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を貼り付け
スマホでは見にくいと思いますが、イメージとしてとらえて頂けたらと思います。
書き換え後のコードをデザインCSS欄に貼り付け
デザイン→カスタマイズ→デザインCSS欄に書き換えたコードを貼り付けます。
この場合、コードを貼り付けた段階で編集画面のヘッダー部分に選択した画像が表示されます。
※デザインCSS欄に上記編集後のコードを貼り付ければ、カスタマイズから画像を選択する必要はありません。
CSSコード貼り付け後
今回のCSSコード追記によって下記の画像のように余白を無くす事が出来ました。
ブログのデザインテーマがBrooklynを使ってますが、このコードがピッタリのようです。
まとめ
今回参考にさせて頂いた記事の作者様にあらためて感謝です。
ここまでご精読ありがとうございます。
関連記事
グローバルメニューをドロップダウン表示する方法
アドセンス審査申請前に必ずやるべき準備作業