このブログ、スマホで見た時に「タイトルだけ」しか見えないのが気になっていたので、デザインを修正しました。参考にしたのは下の記事。そのものズバリ。
簡単に手順をメモしておく。最初に、スマホ専用サイトから 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/12/26 追記:後日談があります。
- 「さくらブログのスマホ対応(改良)(2017/08/15)」
- 「さくらブログのスマホ対応(再改良)(2017/12/25)」
タグ:スマホ