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

しばやん雑記

ASP.NET とメイドさんが大好きなフリーランスのプログラマーのブログ

はてなブログの PC 表示とスマートフォン表示で適用するスタイルを切り替える方法

はてなブログ

はてなブログの 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 属性はレスポンシブ対応なのかを持っている気がします。と、まあ小ネタでした。