Blogger『TicTac Blue』テンプレートをCSS/JSでiPhone対応

MovableType 4ウェブリブログ に続けて、今度は Blogger (Blogspot) のブログを
iPhone で読みやすくしてみます。川崎は『TicTac Blue』テンプレートを使っています。
これは2ペインのテンプレートで、ボディが460ピクセル程度とかなり狭いやつです。
右側のナビゲーションをページ下部に追い出して、ページ横幅500ピクセルにしてみます。


http://www.blogger.com/home
ダッシュボード→ブログを管理→レイアウト→ガジェットを追加→HTML/JavaScript

で、ブログにインライン展開される任意の HTML を記述できます。


今回はタイトルを付ける必要はないので、空にしてください。

<script type="text/javascript"><!--
(function(){
  var ua = navigator.userAgent;
  if(ua.match(" AppleWebKit/") && ua.match(" Mobile/")){
    document.write('<meta name="viewport" content="width=500" />');
  }
})()
//--></script>
<!--[if !IE]>-->
<style media="only screen and (max-device-width: 480px)" type="text/css"><!--
body { width: 500px; -webkit-text-size-adjust: 133%; }
body #navbar-iframe { width: 500px; overflow: hidden; }
body #outer-wrapper { width: 100%; background-position: -41px 0; }
body #header-wrapper { background-position: -41px 0; }
body #header { padding: 10px 25px; background-position: -41px bottom; }
body #content-wrapper { width: 100%; margin: 0; }
body #main { width: 480px; padding-left: 0; }
body #sidebar { width: 100%; float: left; }
body #footer-wrapper { padding: 0; }
body #footer { padding: 25px; background-position: -41px 0; }
--></style>
<!--<![endif]-->


以上で完了。

やっていることは、2ペインの TicTac Blue テンプレートを1ペインに差し替えて、
横幅500ピクセルのレイアウトとして上書きしています(iPhone のみ)。
CSS で body を付けているのは、単なる # ID 指定よりも優先度を上げるためです。
viewport も 500 ピクセルとすることで、iPhone でも読みやすくなりました。
 
  
PS)
来月にも 800x480 ピクセルとか、もっと高解像度の次期 iPhone が出てきたら、
viewport の設定とか変更する必要があるかもしれない。実機が出てから考えよう。

この記事へのコメント

Daitercor
2017年01月13日 02:14
Открылся новый суперсовременный сайт для поиска партнеров на 1 ночь, никаких смс и прочей нечисти, зайди и найди себе вторую половинку на ночь!
Множество анкет девушек и парней из практически любого города планеты! Такого больше нету ни на одном сайте!
http://goo.gl/vKTsVO
Peterwem
2017年08月26日 00:26
マ粢� 糂褌! �瑰燾� � 籵� 鶯!
ヘ璧褄 竟四角数字1� 矜銛 �竟�: ヒ電話� 瑙韲� �溿琺� http://kinobibly.ru/
ヌ蒟: チ褊裝韭� ハ瑟砒�上指差し 珞頸 �黑�瑙� ト跟澵� ト襃��
メ: リ襃ⅳ 褊 4: テ鸙ⅲ / Yeogo gwae-dam 4: Moksori (2005) http://kinobibly.ru/uzhasy/2382-shepot-sten-4-golos-yeogo-gwae-dam-4-moksori-2005.html
メ: http://kinobibly.ru/voennyy/4091-sekrety-voyny-oorlogsgeheimen-2014.html
�電話� 粢褞燾 ⅳ下矢印1 http://kinobibly.ru/vestern/
四角数字1四角数字4糺 琿�
ヌ蒟: �電話� 蓿瑟� 砒�瑣濵 http://kinobibly.ru/drama/
メ: �電話� �褄鮏[]�� 濵粨渼� 2017
Georgebub
2017年08月27日 16:47
硴�� ⅰ四角数字0� � 渼� �褪褞碯[]� - 硴�� ⅰ四角数字0� 韈 粨鰀�, 硴� ⅰ� �璢珸竟.
RolandExaky
2018年01月20日 06:02
マ粢� 糂褌! 竟四角数字1隆 � 籵� 鶯!
ヘ璧褄 竟四角数字1� 矜銛 �竟�: ��� 2016 �炅裼�
ヌ蒟: http://kinoserialtv.net/komediya/7106-posle-raboty-after-hours-1985.html ム�ⅳ下矢印1 マⅲ�� []碚上矢印1 / After Hours (1985) �溿琺� 砒�瑣濵
メ: http://kinoserialtv.net/istoricheskiy/1954-velikolepnyy-vek-muhtesem-yuzyil-sezon-2-2011-2012.html
http://kinoserialtv.net/fantastika/ 炅瑰四角数字4�� 2017 ⅳ下矢印1 � リボン� �璞褥大丸1
ヒ電話� 瑙韲� ⅳ下矢印1 �溿琺�
ホ溿琺� �電話� 瑙韲� ホ溿琺� �電話� 瑙韲�

この記事へのトラックバック