【覚書】風柳亭（ココログプロ）をレスポンシブWebデザイン化（Bootstrap3使用)

先月末に本ブログ（風柳亭）を最低限ながらレスポンシブWebデザイン化し、スマートフォン等でも閲覧しやすいようにしてみたので、覚え書き。

過去記事をスマートフォンで見ることもあるため ・風柳亭（ http://t.co/LAFCnBq5K5 ）※ココログプロ ・風柳メモ（ http://t.co/hfDqHolpUO ）※はてなブログ をレスポンシブデザインに変えてみた…つもり。 ※Nexus5では一応見られる

— 風柳 (@furyutei) 2015, 9月 20

本ブログはTypePadベースのココログプロを使用。ココログプロのみ使用可能な上級者向けテンプレート（HEADを含むHTMLに手を加えることが可能）を利用しているため、これ以外のプランではレスポンシブ化は困難だと思われる。

実際に本ブログで使用しているテンプレートは、GitHubにあげてある。

■ベースにしたテンプレート

• 右サイドバー付
• アポロ/シルバー（ココログオリジナル・テーマ／テーマの種類 シンプル）

これを上級者向けテンプレートへと変換した上で、カスタマイズを実施。
TypePadのタグ等は、基本的には、標準的な TypePad のテンプレート等を参考にして、実際に出力されるHTMLと見比べながら、適当に置き換え。

■ポイントなど（そのうち整理して書くかも）

• Bootstrap3を使って、最低限のレスポンシブ化（window幅が一定以下になったら、サイドバーを下に落とすように class 設定）。
• link[media="handheld"]要素を出力するTypePadのタグ（<$MTWeblogTypeCastMobileLink$>）を有効にしていると、スマートフォンで見ている場合にモバイル対応ページへとリダイレクトされてしまうため、これを無効化。
• ココログの標準で読み込まれる flash_check.js を使用すると、スマートフォンで表示した際に、なぜか Twitter のツイートが表示されなくなるなどの不具合が生じるため、現状は無効化してある。
• ココログ間でリンクを張っている場合に、リンクをクリックすると、URLに余計なフラグメント（#_ga=…）が付加されてしまう。
  調べてみると、Googleアナリティクスのクロスドメイン自動リンク設定(autoLink)が原因らしい。
  ココログの標準で読み込まれる onload.js で Google Analytics のスクリプトが読み込まれており、ココログのドメインが autoLink の対象にされていた。
  これを読み込んでいるスクリプト全体を無効化するのは不安だったため、autoLink の機能のみ無視されるように細工するスクリプトを、sidebar 上に設置しておいた。