【はてなブログ】デザイン「SOHO」でのヘッダー画像設置のカスタマイズ時に参考にした記事とレスポンシブ時のダブルレクタングルの設定についての記事の紹介

こんにちは。やぁしえです。

はてなブログは本当にデザインテンプレートが豊富です。

その中でも比較的人気で当ブログでも使用しているデザインテンプレート「SOHO」のカスタマイズするのに参考になるサイトをご紹介します。

今から紹介する記事は全て僕が実際にSOHOでやってみて、ちゃんと違和感なく設定出来たもののみとなっていますので記事に載っていないような細かい設定も不要です。

 

また、

カスタマイズというか設定というか、このブログに適用されているカスタマイズのみ紹介しています。なので、その他細かいところのカスタマイズ方法は当記事では紹介しません。

当ブログはレスポンシブに設定しています。

ヘッダー画像のカスタマイズ

おしゃれなヘッダー画像を無料で作ってヘッダー画像設定してブログの見栄えを良くしたい時はこの記事!

lf2.hatenablog.com

 

上の記事で紹介されているCanvaはコチラ!

www.canva.com

当ブログのヘッダー画像もコレで無料で作りました。

f:id:narana:20180107215658j:plain

 

続きまして、

 

はてなで推奨されているヘッダー画像サイズ1000x200のサイズで作ったは良いものの、実際に設定してみたら無駄な余白が出来てしまいます。

そんな時に見るべき記事がコレ!

sprout-wings.hatenablog.com

pxの調整についてはヘッダーにグローバルナビ等を設置したりする方もいらっしゃったり、はたまた他のアイテムを設置する方もいらっしゃるので人それぞれ設定値が変わってきます。なので、ご自分で適切な値に調整していただけると嬉しいです。

レスポンシブでもパソコン、スマホ両方の値が同じ訳では無いのでそれぞれ適切な値を入力してください。

 

続いて、

ヘッダー画像の下の部分の余白は無くなったけどサイドの余白が気になる方は次の記事をご覧ください。

www.youji0511.com

ヘッダー画像の外側の色に背景色を合わせることで例え50型のモニターでブログを見ても、しっかりとサイドにも色が入っており画像が横に引き伸ばされて見にくくなる訳でも無く自然な感じでサイドの余白が無くなっています。

 

ヘッダー画像についてのカスタマイズは以上です。

 

アドセンスをダブルレクタングルにする際の注意点

もはやカスタマイズと言えるのかは分かりませんがこの方法を知っていて損は無いでしょう。

ネット業界で一番有名な広告の置き方が記事下にダブルレクタングル。

ダブルレクタングルを記事下に設置しているブロガー、皆さんも多いと思いませんか?

正直、ダブルレクタングルにするだけであればビジログ様が書かれている以下の記事で十分なのですが....

www.netlifehack.com

実はレスポンシブの場合、それだとルール違反になってしまうのです。

(スマホでダブルレクタングルと言うのがルール違反)

え?じゃあ、どうしたら良いか?って?

スマホでのみダブルにならないようにするんです。

そのCSSが紹介されているのがこの記事!!!

www.bombkun.com

ボムくん.com様で紹介されている通りにCSSを設定するとパソコンで見たらダブルレクタングル、スマホから見たら1つだけ。

もちろん、

ルール違反にもなっていないので安心してその置き方を利用してください。

 

今回は以上です。

皆様のお役に立てていれば幸いです。