はてなブログで左右余白を小さくする&謎の余白も解消

こんにちわ、かまさんです。

ブログの左右の余白気になりますよね(-_-;)

最初は単純にbodyをいじったら変わるのかなと思っていたのですが・・・

何をしても思い通りの形にはならず一度諦めて放置しました(´;ω;`)ウゥゥ

はてなブログを初めて一ヶ月、テーマ(ブログデザイン)をデフォルトからストアのテーマで一番気に入ったのに変更したらデフォルトの時より余白が広くなってしまったのでこれを機会に外観を整えようと色々調べてみました(^^)

使わせていただいているテーマはこちら(UnderShirt)です。

デザインはシンプルでアーカイブの記事一覧でのアイキャッチ画像は大体16:9くらいのサムネサイズなのですごく気にいってます。

※少しいじってますが・・・⇩のスタイルになります。

width: 60%;

今回はコチラ(UnderShirt)のテーマで出来たことです。

※他のテーマでも要素が同じならできます

変更される場所💡

変更される箇所は⇩の画像で黒く配色してある左右の余白部分

※画像はスマホでのPC表示にした画面です。

表示部分の構造💡

色々と調べて記事ページや、記事一覧ページのメイン箇所の構造は

#wrapper#mainが入っていて、#main#main-innerが入っているようです。

そして#main-innerの中にメインのコンテンツが入っているとのこと

図解にすると⇩のようになっています。

※あくまで私が使用しているテーマの内容なので違う場合もあります。

ブレイクポイントを決めましょう💡

変更する前に・・・

まず、画面のサイズ(どのデバイスで)表示を変更したいのかを決めます。

上記の画像では、スマホをPC表示させたときのものを使用していますが、実際に適応させたのは、スマホ表示の場合です。

スマホのPC表示サイズとタブレットは大体同じサイズみたいす。

※筆者は超ド級のブログ初心者です。プログラミング知識はほぼありません(-_-;)

間違い表記などもあるかと思いますが実際にできたことだけを紹介しています。

いろいろと分け方はあるようですが、私はタブレット以下を1024px、スマホを640px以下の2か所でブレイクポイントを付けています。

要は、PCとタブレットとスマホと3つに分けているということになります。

ブレイクポイントを3つ、4つと細かくつけている方もいらっしゃるみたいですが、私はちょっとめんどくさがりな部分があるのでちょっとおおざっぱに分けました(;^_^A

分け方は人それぞれで、自分で納得できればそれでいいかなと思います(^_-)-☆

CSS記述💡

以下のCSSコードをまるっとコピーして【デザインCSS】に貼り付けるだけなので簡単です。

※張り付ける箇所がわからない場合はもう少し下まで読んでください(^^)

タブレット&スマホのPC表示画面で適応したい場合は1024pxまでに適応を使ってください。

スマホ画面サイズで適応したい場合は640px以下を使いましょう。

もちろんご自身のブログに合わせてpxの数字は変更してください(^^)

⇩タブレット、スマホPC表示を変更する場合⇩※1024px以下なのでスマホ画面も同様に変更されます。

/*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;
}
}

⇩スマホ表示だけを変更したい場合⇩

/*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;
}
}
はてなブログCSSデザインの場所💡

【ダッシュボード】の【デザイン】➡【スパナマーク】➡【デザインCSS】

※デザインCSSを変更する場合は一度バックアップすることをお勧めします。

張り付けた後は必ず【変更を保存する】を押してくださいね(^^♪

余白を消したら⇩の画像のようになります

※画像はスマホでのPC表示の画面です。

右側にすこし気になる謎の余白ができていますがこちらが気になる方はもう一文付け足します。

#wrapper{
  width: 100%;
  overflow: hidden;
}

※PCでのデザイン幅が変わったりもあるみたいなので注意です。

ついでに💡

#wrapperのpadding(内側の余白)を追加で記述するとさらに余白を狭くすることができます。

もしくわ、そこを追加しないと効かない場合もあるかもしれません。

どの要素でデザインに効くかわからないので1個1個追加することをオススメします(;'∀')

※いろいろ試している最中になんか色々変わって戻すの大変でした(-_-;)

まぁ・・・追加したものは消せば大丈夫なので試してみるのありです(^^♪

コメント

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