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

f:id:azyobuzin:20131022192801p:plain

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

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

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

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

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

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

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

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

とすれば良さそうです。

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

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

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

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

アジョブジ星通信