2017年01月23日

さくらブログのスマホ対応

 このブログ、スマホで見た時に「タイトルだけ」しか見えないのが気になっていたので、デザインを修正しました。参考にしたのは下の記事。そのものズバリ。

さくらブログをレスポンシブ化

 簡単に手順をメモしておく。最初に、スマホ専用サイトから PC サイトへのリダイレクトを設定。スマホサイトの「コンテンツ」を「自由形式」のみにして、その内容を次のようにする。

<SCRIPT LANGUAGE="JavaScript">
<!--
document.cookie = 'force_pc=1; max-age=15768000; path=/';
document.cookie = 'force_sp=0; max-age=15768000; path=/';
location.href=location.pathname; 
setTimeout("autoLink()",1000);
// -->
</SCRIPT>

 「スマートフォン専用ページを表示」という案内を消す。

#iphone-link{display: none !important;}

 PC サイトの HTML に Viewport 設定の追加。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">

 CSS にメディアクエリを追加。

@media screen and (min-width : 0px) and (max-width : 767px){
#container{width: 100%}
#content{width: 100%}
.blog{width:100%; margin-left:auto; margin-right:auto;overflow:hidden}
#links{width: 100%}
}

 「移転のお知らせ」も外して、こんな感じになった。本文が横幅いっぱいに表示される。

2017/08/14 追記:その後、うまく表示されなくなったため、さらに改良しました。「さくらブログのスマホ対応(改良)

タグ:スマホ
posted by toshinagata at 21:41| 日記