Zephyr Cradle Diary

■ [tdiary][PG] tDiaryの2カラムデザイン化と、iPhone向けデザイン調整

というものに最近こだわってました。今日ようやく完成。

tDiaryはデフォで1カラムデザインなのですが、やっぱり味気ないので次のようなことを目指してました。

• 基本は2カラム表示（今回は左にサイドバー）
• ただしスマフォ（＝iPhone）では1カラムで表示

最近のtDiaryのUpdateでスマフォ用との切り替えが出来るようになっていたのは知っていたので、じゃあそうしようじゃないかってことで色々試行錯誤してました。今回はそのメモ。

2カラムなデザイン

基本的には以下のリファレンスに従います。今回のデザインではヘッダが横いっぱいに広がるほうのデザインにしてます。

• tDiaryドキュメント - ヘッダ・フッタ

ちなみに、サイドバーの内容はフッタ側に書くこと、みたいな推奨事項は、TwitterでtDiaryのボス・ただただしさんと話してて知りました。v1.x系の頃から使ってるのに初めて知ったよ！ 情弱乙。

ということでCSSで、メインフレームとサイドバーフレームに以下のようにフロート指定しときます。widthが足して100%にならないようにするのはおまじない。ウィンドウサイズを小さくしたときにもデザインが崩れないようにする対応ですな。いつの間にか身についてた小技ですが。

div.main {
    float: right;
    width: 73%;
}
div.sidebar {
    float: left;
    width: 25%;
}

スマートフォン向けのサイドバー非表示

以下のコードで挟んだコードは、iPhone（iPod touchを含む / iPadを含まない）で表示されなくなります。これをHTMLに仕込む。

<% unless @conf.iphone? %> hogehoge <% end %>

• ソース：tDiary.org - iPhoneなどのスマートフォン向けデザイン手法

ということで、リンク先の通りにフッタを改良しときます。これでiPhoneで見たときにはサイドバーが表示されなくなります。

スマートフォン向けのメインフレーム幅再設定

ただしこのままだと、メインフレームの横幅にサイドバー分の余白が生まれてしまって気味が悪い感じ（上で73%にしたので）。なのでiPhoneのときは横幅を元に戻す（100%にする）必要があります。というわけでCSSの最後に、コレを追記。上のリンクにも載ってますけどね。

@media screen and (max-device-width: 480px) {
    div.main {
        float: none;
        width: 100%;
    }
}

• 参考：【レビュー】自由に使えるiPhone/iPad/Android/PC向け切り分けCSSテンプレート | エンタープライズ | マイコミジャーナル

画面サイズがいくつ以下の場合は～、みたいな書き方がCSSにあっただなんて、おいちゃん知りませんでしたよ。

スマートフォン向けの微調整

他にもiPod touchで見たときに色々不満があったので、ちょこちょこ変えたりします。以下は全部CSS。

横画面表示にしたときにフォントサイズが変わられるのは割と不便というか不快なので、これはナシにしておく。iPhone限定というわけでもないので、堂々とbodyに設定しておいたりした。

-webkit-text-size-adjust: none;

• 参考：iPhoneのSafariで縦横でもフォントサイズが変わらないCSS | creator note

URLなど長い単語が折り返されなかったりするのがデフォになってるので、これは切りの良いところで折り返して欲しい。ってことで、以下をbodyに記述。スマフォ向け記述内でも良いけど、これはスマフォに限らず設定しちゃった。iPhoneだと、Safari上で横スクロールバーが出るか出ないかは大きな話なので、適当に折り返しておくことが吉な感じ。

word-wrap: break-word;

• 参考：改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 - CSSデザインノート

お次に画像サイズ。これもiPhone向けには大きすぎたりすることが多々あるので、画像は全般的に横幅最大値を240pxくらいに抑えておくように調整。これはiPhone専用の記述内に突っ込む。importantは別に無くても良いかも。念のためということで。div.sectionは個別の日記を囲う要素なので、取り敢えずその中に表示されるであろう画像（imgタグ）だけに適用するように指定。

@media screen and (max-device-width: 480px) {
    div.section img {
        max-width: 240px !important;
        height: auto;
    }
}

一番上にあるタイトル画像。これは空のh1タグに高さ指定しつつ背景画像指定して用意してるのですが、これをiPhoneで見るとかなり画像が粗くなる。それもそのはず、最新のiPhone/iPod touchはRetinaディスプレイなので、PCと同じ表示方法だと画像が縦横2倍ずつ引き延ばされてダサいことになる。ので、これをちゃんとPCと似たような雰囲気で出すために、iPhoneではわざと縮小するように指定しておく。

@media screen and (max-device-width: 480px) {
    h1 {
        zoom: 0.5;
    }
}

ここまでやれば、比較的幸せなiPhone向けデザインになったりするのであります。ひゃっほう。

というわけで現在のCSSはこちら。tDiaryのデフォで提供されているCSSを改変して作ってるのでライセンス文とかがただただしさんのそのまんま表記だったりしてアレですが、そのあたりは目をつむってください。

他にもiPhone向けには色々と手を加えられそうではあるんですよね。メタタグなんか弄れば更に面白いことが出来そう。ここまで来ると専用に新しいプラグイン突っ込まないと行けないんで、今回は見送り。こだわりだしたらキリがないんですけどねえホント。

• iPhone 向けCSSの記述ポイントなど - Office L テクニカルノート
• iphone向けwebページ作成 - iphone wiki
• 各ブラウザで先行実装しているCSS3プロパティまとめ | CSS-EBLOG
• iPhone用CSS [iPhone生活]

そんなこんなで、当ブログはiPhoneからでも見やすいデザインとなりましたとさ。