アジョブジ星通信

日常系バンザイ。

はてなブログ: スマホ表示のときだけ適用するCSSを書く

f:id:azyobuzin:20131022192801p:plain

テスト期間真っ盛りですが、毎回の通り勉強してません。

今回はスマホ版だけに CSS を適用させたいときにどうしようというお話です。もちろん Javascript なしで。

やりたかったこと

↑の広告をPC表示のときには左寄せ、スマホ表示では中央寄せにしたかった。

そもそもスマホ版ではカスタムCSSを設定できない

なので、 CSS を適用させるには唯一スマホ版に手を加えられる記事下の HTML をいじることになります。つまりトップ画面とかはいじることができないですね。。

PC 版とスマホ版の HTML の違い

実ははてなブログの HTML は PC 版でもスマホ版でもあんまり変わりません。前にやった記事上に Pocket ボタンを置くやつでは記事タイトル部の class が同じであることを利用してます。……利用してはいないか。

というわけで割りと似通ってて一筋縄では行かないんじゃないかとビクビクしていましたが、意外な違いがありました。

entry-list クラス

スマホ版では記事は entry-list クラスが適用された ul タグの中にあります。単独記事ページなのになぜ ul を使ってるのか謎でしかたありませんが、記事内のスタイルをいじる場合には

.entry-list [selector] {
    /* hoge */
}

とすれば良さそうです。

ついでに PC 版には .entry-list は存在しません。記事リストっぽいトップページは article タグで分かれてるだけです。なぜこっちを ul にしなかった。。

まとめ

スマホ版のときだけ適用させたいスタイルがあるときは記事下の HTML に

<style>
    .entry-list [selector] {
        /* hoge */
    }
</style>

としてやればよさそうです。 head 以外に style タグがあるのは気に喰わないけど仕方ない…。