SeesaaBLOGはスマートフォンでアクセスした時にスマートフォン専用ページに強制的に切り替わる。しかしながらスマートフォンサイトは広告が多く、また、表示速度も遅いという欠点も持っている。それを改善したいところだが、SeesaaBLOGはスマートフォンのHTMLをいじることが出来ないために、表示速度を改善出来ない。そこで出てくるのが、スマートフォンで見た時にもPC画面を強制的に表示し、画面を軽くするという方法を用いる。その方法は下記の通りである。また、この方法は右にサイドバーがある場合に限られる。これは「とある秘密ブログの更新うぇぶろぐ」さんのページをかなり参照している。
まず、「デザイン」-「スマートフォン」-「コンテンツ」から、「スマホコンテンツ」をすべて削除する
次に「自由記述」をトップに位置させ、下記スクリプトを記述する
<SCRIPT LANGUAGE=”JavaScript”>
<!–
document.cookie=’force_pc=1; max-age=15768000; path=/’;
document.cookie=’force_sp=0; max-age=15768000; path=/’;
setTimeout(“redirect()”, 0); // リダイレクト0秒
function redirect(){
location.href=location.pathname; // スマホ版からデスクトップ版にリダイレクト
}
//–>
</SCRIPT>
記述後は、保存をし、「コンテンツ」自身も保存をする
文中のmax-age=15768000;はクッキーの有効期限で、半年間有効にしておく、と言う設定になっている。僕はテストのためにここを600秒=10分という設定に変えている。
「とある秘密ブログの更新うぇぶろぐ」さんのページでは、スマートフォンのCSSのbodyタグにdisplay: none;を記述するよう書かれているが、実際にそれを入れるとスマートフォンページで表示が止まったまま、にっちもさっちもいかないので、僕の方法ではこれは記述しない。その代償として、リダイレクトしている間、何も記事のないスマートフォンページが表示されたままという事態が起こることは、了承いただきたい。
「デザイン」-「PC」-「HTML」を選択し、<head>内に以下の記述を追加する
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=3″>
<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>
「デザイン」-「PC」-「デザイン設定」を選択し、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%}
}
記述後は保存をする
これで、スマートフォンで見た時にも強制的にPCサイトにリダイレクトするので、表示が改善される。
コメント