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

pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

はてなブログでスマホのCSSをカスタマイズする方法

今回はスマホのCSSをカスタマイズする方法を紹介したいと思います。


正当なやり方ではないかと思いますが。。


はてなブログのスマホは、すごくシンプルでそのままでいいじゃん!と思う方も多々いると思いますが、僕はあることがかなり気になり変更したいと思いました。




それは記事内にGoogleアドセンスを表示したときです。


以前の記事で紹介したようにで確かに表示することは可能だということがわかりました。


はてなブログのスマホ画面で記事上部あるいは記事内にGoogleアドセンスを簡単に表示させる方法 - 理系大学生のwebメモはてなブログのスマホ画面で記事上部あるいは記事内にGoogleアドセンスを簡単に表示させる方法 - 理系大学生のwebメモはてなブックマーク - はてなブログのスマホ画面で記事上部あるいは記事内にGoogleアドセンスを簡単に表示させる方法 - 理系大学生のwebメモ


するとある問題が発生します。

アドセンスがはみ出て画面が左右に動く。。。なんと不快な。。。


スマートフォンサイトでは、よくあることのような気もしますがこれではスクロールの度にちょっとずれたり気になる人には気になります。

調べてみると

はてなブログはデフォルトで記事内はentry-listという枠でくくられていて、それがwidth:96%で指定されているので、横のマージンがそれぞれ2%ずつあることがわかります。

そのことが原因でスマホの横幅>アドセンスの横幅なのに画面がはみ出しことがわかりました。


ということはこのwidthを100%にすれば解決するはず。



そこでそれを改善するべくあることをしました。


まずこれをするのにはサーバーを借りる必要があります。
あくまでひとつの手段としてですね…(追記 2013/12/9)


僕は以前から借りていたさくらのVPSを借りています。お試し期間があるので、それで試すのもありかなと。

http://vps.sakura.ad.jp/


そこで

CSSファイルを作成します。
ここでは必要な部分だけ抜粋したいと思います。

例えばここではstyle.cssを以下のように書き、保存します。

.entry-list{
width: 100%;
}

そしてはてなの記事下のhtmlを記述する箇所を編集します。

ここでは先ほど保存したcssファイルの読み込みを行います。


f:id:inagex:20131018110947p:plain


これ一番上あたりに書くとよいでしょう。



はてなブログの説明用


各々のパスは借りたサーバーのドメインを記入します。


すると記事の枠は消滅しますが、横の微々たる動きがなくなりました。


簡単なことで直ったので、もし同じ境遇に悩まされているかつ記事枠を消滅しても良い方はぜひお試しください。