みなさんの日記にも、iPhoneをはじめとしたスマートフォンによるアクセスが増えていると思います。たいていの場合、tDiaryによる日記はスマートフォンでも問題なく表示されますが、拡大しないと読めないなど、使い勝手が落ちる場合があります。この記事では、スマートフォン向けのカスタマイズ方法について説明します。

サイドバーを非表示にする

スマートフォンは画面の横幅が狭いので、サイドバーなどを設けた2カラムデザインのサイトは見づらくなります。tDiaryでサイドバーを設けている場合には、これを表示しないようにしましょう。

tDiary 2.3系には、「@conf.iphone?」というメソッドが提供されています¹。これを使って、サイドバーを生成しないようにできます。まず、設定の「ヘッダ・フッタ」にてサイドバーを生成している場所を特定します。多くの場合、フッタにて以下のような記述があるでしょう:

<div class="sidebar">
   :
サイドバー項目の記述
   :
</div>

この部分全体を、「<% unless @conf.iphone? %>」～「<% end %>」で囲みます:

<% unless @conf.iphone? %>
<div class="sidebar">
   :
サイドバー項目の記述
   :
</div>
<% end %>

tDiary 2.2系の場合「iphone?」は使えないので、サイドバーの生成自体は抑制できませんが、CSSで非表示にすることはできます。上記の代わりにappend-cssプラグインなどを使って以下の指定をしましょう:

div.sidebar {
   display: none;
}

iPhone向けのデザインを追加する

iPhoneなど横幅に制約がある場合、専用のデザインを指定できます。自作のテーマを使っている場合は.cssファイルの中に、そうでない場合はappend-cssプラグインなどで以下のような指定をしましょう:

@media screen and (max-device-width: 480px) {
   // この中にiPhone用のデザインを記述する。以下は例。
   div.main {
      width: 480px;
   }
   div.commet textarea {
      width: 480px;
   }
}

使っているテーマによって、修正箇所は異なります。いろいろ工夫してみて下さい。2.2系だとちょっと難しいかも知れません。

tDiary 2.3系では今後、あまり苦労しなくてもスマートフォンでも自然に表示できるような変更を加えていこうと考えています。

脚注