ブログをカスタマイズする(6) – 微修正とWeb Matrix 2のインストール

微修正

TwentyTwelveのテーマに移行する際、フレーム構造を下の図の右にように変更した。サイドバーを一番上まで持っていったのだ。

最初はそのままfloat:leftして、ヘッダーの幅を縮めてやればいいかなと思ったら下記のようになった。

どうもこれはフロートの仕様でこうなってしまうようである。

5.フロートの上外辺は、ソース文書中で前にある要素により生成されるブロックボックスやフロートの上外辺よりも上にならない。
6.フロートの上外辺は、ソース文書中で前にある要素により生成されるボックスを含む行ボックスの上辺よりも上にならない

つまりテーマのHTML上ではヘッダー→コンテンツ→サイドバー→フッターの順に並んでいるので、サイドバーがコンテンツの上外辺より上にならないのでこうなってしまうのだ。回避するにはコンテンツとサイドバーの順序を入れ替えればよいのだが、そうするとモバイル用の画面では表示順序がおかしくなる。

結局どうしたかというと、Wordpressのwp_is_moblie()テンプレートタグを使って、モバイルの場合はサイドバーをコンテンツのあとにすることで回避した。

<?php 

  if(!wp_is_mobile()) { 
      get_sidebar(); 
  } 
  ?>
  <div id="primary" class="site-content s">
    <div id="content" role="main">
  .
  .
  .  
  </div><!-- #primary -->
  <?php 
  if(wp_is_mobile()) { 
      get_sidebar(); 
  } 
  ?>
<?php get_footer(); ?>

Web Matrix 2のインストール

HTMLやPHPコードの編集はXAMPP + Aptanaで十分なのだが、Web Matrix 2にはiPhoneシミュレータが使えHTMLのテストに便利そうなので入れてみた。インストールも簡単であった。追加したのはPHPとiPhone,iPadシミュレータくらいである。

IIS Express同時にインストールされる。MySQLはXAMPPで導入済みなので、Wordpressのディレクトリを丸ごとコピーして動かしてみるとIIS上でそのまま動作した。

起動画面はこれだ。一応インテリセンスは効くが、その範囲は限られている。たとえばAptanaであればclass属性を指定するときにそのパラメータをCSSから読みっとって補完するがWebMatrixではできない。エディタとしてはAptanaのほうが優秀なように思う。

iPhone/iPadシミュレータ

iPhone/iPadシミュレーターの画面ショットは下記のとおり、まずはiPhone。

モバイル向け画面は、ブラウザの幅を狭くすることでもシミュレーションできるけれど、Wordpressのwp_is_mobileテンプレートタグのチェックはできない。UAかでモバイルかどうかを判断しているので。シミュレータだとUAもきちんと反映されるのでそのあたりもテストできるのがありがたい。

iPadの画面はこちら。なんか縦に長いような気がするけど。。

なんと右上に空白ができてしまっている。iPadはwp_is_mobileではモバイルと判断されてしまうのだな。。

編集はAptanaで、デバッグはWebMatrix/Aptanaで

とりあえずそうしようかなと思っている。ひょっとするとAptanaにもシミュレータがあるかもしれんので、探してみることにする。Aptanaも使いこなせているとは到底いえないし、WebMatrixもまだ始めたばかりなので、理解が進めばどちらか一方にできるかもしれないが。