２０２０年７月２６日 更新
こんにちは ご訪問ありがとうございます。
今回の記事は、はてなブログで設定しているヘッダー画像の左右方向に出る余白が気になる方に誰でも簡単に出来るＣＳＳコードの貼り付け方法をお伝えする内容です。
この操作方法で作業すれば自分が表示させたいヘッダー画像を横幅いっはいに表示させることが出来ます。
始めに当ブログのブラウザはGooglechrome、デザインテーマはBrooklynを使っています。
ＣＳＳコード貼り付けテストは必ずサブブログで行い、ＩＥやMicrosoftEdge・GoogleChrome等のブラウザでどのように表示されるかを確認のうえ導入するようお願い致します。
目次
それでは実践手順に移ります。
主な操作手順
始めに、ヘッダー画像の編集用にサブブログを作成してテスト出来るようにします。
ヘッダー画像を貼り付けている場合は一旦画像を外しておきます。
ＣＳＳの書き込みだけで画像が表示するので、あらかじめ画像を外しておいたほうが変化が分かりやすいと思います。
自分がヘッダーに貼りたい画像のＵＲＬを確認します。
画像のＵＲＬを簡単に確認するには、新しく記事を書くページに見たままモードの状態で画像を貼り付け、ＨＴＭＬ編集モードを選択するとコードが表示されるので、メモ帳にコピーしておきます。
src以降にある”この間に書かれているコードが画像のＵＲＬです”
言葉で言うとダブルコーテーションの間にある文字列でしょうか？
ヘッダーに使いたい画像のＵＲＬを確認する方法については下記の記事で詳しく解説されていますので参考にさせて頂きました。
左右の余白を無くすデザインＣＳＳコード確認
余白を無くすことが確認出来た下記の記事を参考にさせて頂きました。
この記事内に掲載されているはてはブログの入力検索結果の回答者様の書かれたＣＳＳコードが実際に当ブログにも使われています。
ＣＳＳコードを書き換える部分
上記記事内回答者様のコード原文のまま
#blog-title {
background: url('http://cdn-ak.f.st-hatena.com/images/fotolife/t/td318mimeko/20160221/20160221002653.jpg') center 50%;
background-size: cover;
}
書き換える部分
下にあるように黄色の部分を自分がヘッダー画像に使いたい画像のＵＲＬに書き換えます。
メモ帳にコピーしておいた画像のＵＲＬを下の黄色い線の部分に張り替えます。
①黄色い線の部分を削除
②コピーしたＵＲＬを貼り付け
スマホでは見にくいと思いますが、イメージとしてとらえて頂けたらと思います。
書き換え後のコードをデザインＣＳＳ欄に貼り付け
デザイン→カスタマイズ→デザインＣＳＳ欄に書き換えたコードを貼り付けます。
この場合、コードを貼り付けた段階で編集画面のヘッダー部分に選択した画像が表示されます。
※デザインＣＳＳ欄に上記編集後のコードを貼り付ければ、カスタマイズから画像を選択する必要はありません。
ＣＳＳコード貼り付け後
今回のＣＳＳコード追記によって下記の画像のように余白を無くす事が出来ました。
ブログのデザインテーマがＢｒｏｏｋｌｙｎを使ってますが、このコードがピッタリのようです。
まとめ
今回参考にさせて頂いた記事の作者様にあらためて感謝です。
ここまでご精読ありがとうございます。
関連記事
グローバルメニューをドロップダウン表示する方法
アドセンス審査申請前に必ずやるべき準備作業
){kind=link}