はてなブログの html タグには色んなカスタムデータ属性が付けられています。これを利用して CSS セレクタを組み立ててあげればいいです。
例として、このブログの html タグ部分を引っ張ってきました。
<html lang="ja" data-avail-langs="ja en" data-page="entry" data-admin-domain="http://blog.hatena.ne.jp" data-static-domain="http://hatenablog.com" data-blog="shiba-yan.hatenablog.jp" data-blogs-uri-base="http://blog.shibayan.jp" data-globalheader-color="b" data-globalheader-type="pc" data-author="shiba-yan" data-version="fd025f2db0be0a2dbc9cdd570a63a9da" data-blog-comments-top-is-new="" data-device="pc" data-brand="hatenablog" data-has-touch-view="1"
この中の data-device 属性に pc / touch という値で現在の表示モードが入っているので、それを利用してセレクタを組み立てます。
html[data-device=pc] .foo { /* PC 表示の時だけ有効 */ } html[data-device=touch] .foo { /* スマートフォン表示の時だけ有効 */ }
わざわざ F21 ツールとかで PC の時だけ、スマートフォンの時だけ追加されるクラスを調べたりしなくても、あっさりとスタイルの切り替えが出来ます。
例えば、自分はスマートフォン表示の時に記事フッターのコンテンツを中央に持っていきたかったので、以下のようなスタイルを head タグに追加しました。
html[data-device=touch] .entry-footer-html { text-align: center; }
属性セレクタを使うことで分かりやすく書けました。
他にも data-page 属性には今見ているページが一覧なのか、記事なのかといった情報が入ってくるので、これも上手く利用できそうです。独自ドメインが当てられたブログの URL も簡単に取れるので、JavaScript でブログ URL を使った処理を行う時にも便利そうでした。
data-has-touch-view 属性はレスポンシブ対応なのかを持っている気がします。と、まあ小ネタでした。
