はてなブログのスマホCSSは編集できる?

はてなブログスマホCSSって編集できる?

カスタム編集したCSSスマートフォン向け表示では適用されず、 関連しそうな設定項目も管理画面で見つけられなかったのですが、 何か編集する方法ってあるのでしょうか…?

どうしても見つけられなかったもので、 ひとまずJavaScriptスマートフォン向けCSSを適用することにしました。

  1.  
  2. <script type="text/javascript">
  3.   (function(){
  4.     var _path = location.pathname;
  5.     if (_path.indexOf('touch') > -1){
  6.       document.write('<link rel="stylesheet" href="(スマホ向けCSSのアドレス)">');
  7.     }
  8.   })();
  9. </script>
  10.  

はてなブログではスマートフォン向け表示のときは、 URLのパス - location.pathname - の先頭に「/touch」を付けるので、 その条件のときにだけスマートフォン向けCSSを読み込みします。

もちろんユーザーエージェントやディスプレイのサイズで判断しても いいと思いますが、どの条件でスマートフォン向け表示にするかは はてなブログ側の仕様なので、パスで判断するのが無難と思いました。

 

追記

ここまで書いたところで、はてなブログの公式アカウントさん - @hatenablog - に念のため聞いてみたところ返事をいただき、やはり編集ができないということでした。

 

おわり

 

参照サイト

 

関連記事