はてなブログで謎の余白を解消する方法!左右余白も小さくする![初心者編]

かまさん
かまさん

ブログの左右余白って気になりますよね?

気にならない方はそっと違う記事を読んでください。

かまさん
かまさん

ホントは読んでほしいけど・・・

今回の記事を読むと以下の事ができるようになります。

  • はてなブログでの左右余白が自由自在
  • はてなブログでの謎の余白を解消

はてなブロガー

筆者は[はてなブログ]でこのサイトとは別にブログを書いています。

かまさん
かまさん

一応はてなブロガーです。

はてなブログでは沢山のテーマが用意されています。

デフォルトや公式テーマを使うのも、デザインされたテーマを使うのも自由です。

かまさん
かまさん

はてなブログは簡単にぶろぐが始められるのでおすすめです。

はてなブログのテーマ

かまさん
かまさん

はてなブログにはテーマが多数あると上記で紹介しましたね

今回は実際にはてなブログで使っているテーマで解説していきます。

かまさん
かまさん

僕は[UnderShirt]というテーマを使わせていただいています。

はてなブログのレスポンシブデザインテーマUnderShirt
UnderShirt
かまさん
かまさん

結構気にいってます。

[UnderShirt]はレスポンシブに対応できているテーマの1つで、アイキャッチがYouTubeのサムネイル(16:9)とほとんどサイズが同じなのでデザイン性も満足しています。

はてなブログKamasanchi-blog
かまさん
かまさん

ただ、左右の余白がデフォルトよりも広く設計されています。

はてなブログ左右余白を小さくする方法

余白が広いと文字の折り返しもそれだけ早くなります。

吹き出しアイコンなんかをつけると見栄えも微妙になってしまうので、出来たら余白は小さい方がいいと思い外観を整える事にしました。

かまさん
かまさん

最初は単純にbodyをいじったらいいと思っていたのですが全然違いました。

はてなブログでのコンテンツまわり構造

かまさん
かまさん

余白を解消する為には・・・

まず構造を理解しなくてはいけません。

はてなブログを開設後しばらくは何の知識もなく、デフォルトからストアでテーマを選んでちょこちょこ変更していただけでデザインを変えたくても何もできませんでした。

かまさん
かまさん

ここから勉強の成果が発揮されました。

パソコンを使えばブラウザ表示がどういった情報を元に構成されているかを確認することが出来ます。

かまさん
かまさん

右上の[︙]から見れるよ!

確認すると#wrapper#mainが入っていて、#main#main-innerが入っている事がわかりました。

かまさん
かまさん

メインコンテンツは#main-innerの中

はてなブログコンテンツ構造
かまさん
かまさん

実際の画像で見るとこんな感じ

はてなブログUnderShirt余白イメージ
かまさん
かまさん

画像で黒に配色してある左右の部分をなくします。

左右余白をなくす手順

かまさん
かまさん

余白を消す前に1つ決めないといけない事があります。

ぶろぐは様々な媒体でみる事(閲覧)が出来ます。

かまさん
かまさん

パソコン、スマホ、タブレット等!

表示されるものは一緒でもそれぞれではサイズが異なってきます。

どの端末で余白を消すのかは任意となるので、ブレイクポイントを決めておきましょう。

かまさん
かまさん

手順をまとめると下記のようになります。

  1. ブレイクポイントを決める
  2. CSSの記述をコピーする
  3. デザインCSSへ貼り付け

ブレイクポイントを決める

すべての媒体で余白をなくすのであれば必要はありませんが、パソコン表示等、サイドバーが横にある場合では意図しない変化がおきてしまう事があります。

かまさん
かまさん

使用しているテーマに依存します。

基本的にパソコン表示では元々広く表示できるようになっているので余白の調整も必要ないと思いますが、やはり任意です。

かまさん
かまさん

自分の好きなようにするのが1番!

実際に筆者が選んだブレイクポイントはタブレット表示とスマホ表示です。

かまさん
かまさん

現在はスマホサイズのみで余白調整しています。

ブレイクポイント

先程からのブレイクポイントという言葉がわからない方もいるかもしれないので、少しだけ説明しておきます。

かまさん
かまさん

難しく考えないでいいよ!

ブレイクポイントは画面(ブラウザ)サイズによって表示を変えるときの基準となるものです。

画面(ブラウザ)サイズはpxという単位で表すことが出来ます。

ブレイクポイントはこのpxによって適用するかしないかを決めるという事になります。

かまさん
かまさん

実際にやってみると早いので先に進みます

CSSの記述をコピー

かまさん
かまさん

余白を消す為の記述を2つ用意しました。

実際にはてなブログで筆者が余白を消すために使用している記述です。

タブレット用CSS

かまさん
かまさん

まず、タブレットサイズでの記述です。

/*1024.pxまでの幅に適応*/
@media screen and (max-width: 1024px){
#main{ 
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;
}
#main-inner{
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;
}
}
かまさん
かまさん

#mainと#main-innerの左右余白を0にしてます。

上記は#wrapperに調整は加えず、#wrapperの内側に入っている#main#main-innerだけ余白を0にしています。

かまさん
かまさん

#main#main-innerの余白はなくなるけど謎の余白が出現する可能性があります。後程対策!

先頭の@media screen and (max-width: 1024px)は1024pxまでの端末で適用させるという意味になっているのでタブレット等でも1024px以上あれば適用外となります。

スマホ用CSS

かまさん
かまさん

次にスマホ端末用です。

/*640pxまでの幅に適応*/
@media screen and (max-width: 640px) {
#main{ width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;
}
#main-inner{
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;
}
#wrapper{
  width: 100%;
  overflow: hidden;
}
}
かまさん
かまさん

#wrapperにも変化を加えています。

筆者が使用しているテーマでは#wrapperに謎の余白が出てきたので表示幅を100%に最大化してoverflow: hidden;ではみ出したものを表示しないようにしています。

かまさん
かまさん

#wrapperのどこに余白があるかはテーマに依存します。

余白が他にあった場合は#wrapperに下記の指定も加えると大丈夫かと思います。

  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;

pxサイズでは640pxまでに対応するように指定していますがタブレットでも含まれる場合もあり、スマホでも適用外の場合もあります。

かまさん
かまさん

機種によってバラバラなので、新しい機種に対応できるようにたまに変更したほうがいいかもしれません。

CSS記述の注意点

かまさん
かまさん

CSSの変更、追記はバックアップを推奨します。

CSSの変更や追記は基本的にデザイン等を追加、変更するものですので以下の事にご注意ください。

  • CSSの変更、追記は自己責任です。
  • すべて端末で動作を保証するものではありません。
  • CSSはあとがき優先
かまさん
かまさん

CSSの変更、追記は何が起きてもご自身の判断の結果という事です。

CSSの記述もコピペして使用して大丈夫ですが、あくまで参考としてご使用ください。

かまさん
かまさん

ちなみに僕はCSSバックアップに下記のアプリを使用しています。

Qreatia Free - テキスト/HTMLエディタ

Qreatia Free – テキスト/HTMLエディタ

iehok無料posted withアプリーチ

デザインCSSへの貼り付け

かまさん
かまさん

まずは、はてなブログでダッシュボードを開きます。

下記はスマホのPC表示を使った画像です。

はてなブログデザインCSSルート

テーマ自体の要素は直接変更することができないので、追記することで上書きが可能になります。

CSSはあとがきが優先されるので、追記する順番を間違うときちんと機能することはありません。

かまさん
かまさん

今回の場合は適用pxの数字が大きい方から追記してください。

実際はテーマにもよるので内側からの#main-inner#main#wrapperの順で個別に指定を追加していくと変化も確認できると思います。

かまさん
かまさん

追記が終わったら忘れずに変更を保存しましょう。

はてなブログUnderShirt余白解消後

ブレイクポイントについて追記

かまさん
かまさん

ブレイクポイントは簡単に説明しましたが少し追記します。

どこに(px)ブレイクポイントをもうけるかで表示される状態が変わってきます。

テーマにもそれぞれブレイクポイントとなる基準が設けられているのでテーマに沿って合わせるのが1番良いと言えます。

パソコンを使えば、端末で表示されている元の情報を見る事が出来ます。

かまさん
かまさん

デベロッパーツールというところ!

筆者は色々理解する前にデザインを触りまくっている為その辺はスルーしていますが、揃えるものは揃えた方が無難です。

かまさん
かまさん

あくまで助言です。

自身で納得できればそれでオッケー!

あとがき

かまさん
かまさん

終わったら必ず変更保存をしましょう。

デザインを変更した際は必ず、スマホ、タブレット、PCの表示で問題がないか確認しましょう。

かまさん
かまさん

僕は良く失敗します。

色々試しているときは戻すのに一苦労しました。

はてなブロガーへのおすすめ書籍

かまさん
かまさん

僕は本をあまり読む方ではなかったのですが、ぶろぐを始めてからめちゃくちゃ読むようになりました。

ぶろぐ、プログラミングに関して書籍は沢山ありますが、はてなブロガーさんにおすすめしたい書籍をいくつか載せておきます。

かまさん
かまさん

きっと誰かの役に立つと思います。

かまさん
かまさん

初心者におすすめ!

かまさん
かまさん

第二弾!新しいVer

かまさん
かまさん

入門編!プログラミング初心者はここから!

かまさん
かまさん

実践編!上記とセットで持つことをおすすめ!

かまさん
かまさん

事典!なにげに一番使います。

はてなブログでは知識が無くてもテーマ等を使って自分好みのサイトが作れますが、CSSやHTMLの知識がつくとさらに自由度が上がります。

かまさん
かまさん

構造さえわかればまったくのオリジナルデザインも可能です。

かまさん
かまさん

最後までお付き合いいただきありがとうございました。

コメント

タイトルとURLをコピーしました