【tones】PCだけにCSSを適用するために【hatenablog】

  • 投稿 : 2019-02-19
はてなブログのテーマ「tones」
http://blog.hatena.ne.jp/-/store/theme/17680117126967059287

はてなブログのテーマ「tones 3x」
http://blog.hatena.ne.jp/-/store/theme/17680117126976149009

スクリプト

<script>
document.addEventListener('DOMContentLoaded', function(){
 var mobile = /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
 if(mobile){

 }else{
    document.body.classList.add("pc");
 }
});
</script>

「設定」=>「詳細設定」=>「headに要素を追加」に上記を追加してください。

そうすると、bodyタグに、PCの時だけ、pcとくクラスが付加されます

PCだけにCSSを適用

.pc a:hover{
  color: #0056b3;
  text-decoration: underline;
}

.pc .categories a:hover{
  opacity: .8;
}

先頭に「.pc」とつけるだけで、PC(パソコン)のみにCSSを適用することが可能になります。

tonesでは、スマホで無駄な装飾を省くために、この方法を使用しています。主に「:hover」関係で用いています。

スポンサーリンク