読者です 読者をやめる 読者になる 読者になる

けつあご日記

こんちは.菊地です.なんか浅ーいことをいろいろ書きます

【はてなブログ】PC画面だけ記事幅を変える(スマホ画面そのまま&タイトル調節)

はてなブログ

f:id:kichiku_kikuchi:20151129183019p:plain

こんちは.菊地です.

今のところ私のブログは"Blank"というテーマをちょこちょこカスタマイズしながら使用しています.
このテーマはデフォルトだとGoogle Adsenseの「ビッグバナー」という728×90の広告を入れたときに少し記事から横にはみ出してしまいます.

こんな感じに.

f:id:kichiku_kikuchi:20151129163749j:plain

このままでも許せなくはないけど,ちょっと見た目が悪いですねww

これをスマホの画面がおかしくならないようにしながら直していきたいと思います.
ちなみにわたしはいまのところスマホ版には広告は表示していないので,そちらの調節はひつようありません.

横にはみ出さないようにするには記事幅を変更すればよいので,こちらを参考にして...

#content-inner {
  width: 1200px;
  margin: 0 auto;
}
#wrapper {
  width: 920px;
  float: left;
}

sato-san.hatenadiary.jp

少し数字をいじれば,PCの方は全く問題ないんですが...一応スマホで確認したところ...

f:id:kichiku_kikuchi:20151129171049p:plain

なんじゃこりゃあ!(ノ゚ρ゚)ノ ォォォ・・ォ・・ォ・・・・
文字くっそ小せええええ

あ,違う違う.下の方にちゃんと書いてありますねwwwwwすいませんwwwww
この方も同じことやってますねwww

@media screen and (min-width:****px) ってのが必要らしいです.これが,PCの方だけを変更するための呪文ってことですね.****の数字は,その数字以上の画面で見たときに有効になる,ということらしいです.

わたしはLet's noteをデュアルディスプレイにしています.サブディスプレイは大きいんで****を1400にしておけばよいんですが,Let's noteのメインディスプレイ(多分12.1型)ではやっぱりはみ出してしまいます.
なので1200に設定しました.(もっと小さいディスプレイのPCをお使いの方はやはりはみ出てしまうかもしれませんが...ほとんどの方は大丈夫だと思いますんで...本当は画面サイズごとにうまく変化する設定が可能なのかもしれませんね.)

サイドバーの幅も設定したかったので,こちらも参考にして,と.

wannabe-jellyfish.hatenablog.com

実際には,#mainのwidthがこれでは大きすぎるので,740pxにしました.

@media screen and (min-width:1200px) {
#container {
  width: 1150px;
  margin: 0 auto;
}
#wrapper {
  width: 1100px;
  float: left;
}
#main {
width: 740px;
}
}

これで横幅はよいのですが,なぜかタイトルの背景画像にまで記事が食い込んでしまいましたw

f:id:kichiku_kikuchi:20151129163744j:plain

これはあまりにもかっこわるいですねぇ.少しいじくってみると,#blog-titleのheightをいじると直ることが分かりました.

#blog-title {
    height: 140px;
}

をもとのCSSに加えます.heightは実際に見ながら変えていく必要があるかもしれません.すると今度は...

f:id:kichiku_kikuchi:20151129165011j:plain

タイトルがタイトル画像の上の方に行ってしまいましたwwいたちごっこですねぇ...

ブログタイトルの位置はpaddingで調整することができるらしいので,以下のように追記.

#blog-title {
    padding: 100px 0px 0px 0px;
    height: 140px;
}

これでやっと正常になりました!
ちなみにpaddingは

padding: 上 右 下 左;

という順番らしいです.

スマホから見ても通常通りになりました!

f:id:kichiku_kikuchi:20151129171639p:plain

まとめますと,以下をCSSに加えればよいということになります."blank"以外のテーマでも似たようなことをすればいけると思います.

@media screen and (min-width:1200px) {
#container {
  width: 1150px;
  margin: 0 auto;
}
#wrapper {
  width: 1100px;
  float: left;
}
#main {
width: 740px;
}
}

#blog-title {
    padding: 100px 0px 0px 0px;
    height: 140px;
}


これで,

・スマホ(広告なし)の見た目を損なうことなく
・12.1型(?)以上にはうまく対応する

記事幅になりました!