テンプレートの説明 +
リンク色
未訪問リンク色→#7cb4c3/訪問済リンク色→#5b7e91
PC・スマートフォンフォーカス時:文字色→#007bbb、背景色→なし
フィーチャーフォン:
◇auフォーカス時:文字色→制御不能(背景色反転)、背景色→未訪問/訪問済リンク色
◇docomoフォーカス時:文字色→白#ffffff、背景色→未訪問/訪問済リンク色
◇SBフォーカス時:文字色→常に白、背景色→#478384
使用画像
画像1 / 画像2 / 画像2(差し替え用)
フォームアイテム
各レイアウト
全端末リアルタイム形式です。画像1、2の表示場所が、PC&スマートフォンとフィーチャーフォンで違います。
PC/スマートフォン
リンク下線は、サムネイルリンク等で不自然な位置に下線が出るのが気になったので、PC/スマートフォンでは表示しないようにしました。
上部テキストのタイトル"Diary"の位置に、『画像2』が背景として表示されます。
メニューと記事部分のレイアウトは、PCとスマートフォンレイアウトを画面サイズのピクセル数で判別して振り分けています。
▼PC用レイアウト
総横幅は最大840px。中央寄せ。枠線は非表示。
右サイドバーは200px固定。上から順にカレンダー、カテゴリ選択、月別選択です。
カテゴリと月別はテキストリンク表示、ブロックレベル要素に変えているので一行全てリンクエリアです。マウスオン・タップ時は、リンクボックスの右端に『画像2』が背景として表示されます。
記事部分は640px固定。タイトル部分は1.4倍の文字サイズ(約20px)で明朝体設定。
記事それぞれの右上の背景に『画像1』が表示されます。
▼スマートフォン用レイアウト
上のPCレイアウトがカラム落ちする(840px以下になる)と、メディアクエリに対応した機種(IE9+/Chrome他モダンブラウザ)はスマートフォン用表示に切り替わり、記事一覧の下にサイドバーのレイアウトが表示されます。ブラウザを縮めると変化後の表示が見れます。
※スマートフォンは基本的にメディアクエリに対応していますので、画面の大きな端末ではPC表示になるものが幾つか出てきます。
スマートフォン用レイアウトでは、記事部分、サイドバー部分は画面サイズに合わせて広がります。
また、カテゴリと月別部分は余白を広げてリンク領域を大きくしているので、タップしやすくなっています。
フィーチャーフォン
一覧画面での表示件数は少なめがオススメです。
フィーチャーフォンでリンク下線を消すと、サムネイルリンク等でカーソルの位置が分からなくなる(どれを選択しているのか分からなくなる)のを防ぐため、リンク下線は消していません。
bodyの背景右上に、PC/スマートフォンでは記事内に表示される『画像1』を表示しています。固定しているのでスクロールしても動きません。
記事内の右上画像には『画像2』が表示されます。
リアルタイム形式の場合、1ページ内にいくつも記事を表示するとどうしてもページ容量が大きくなります。
同じ画像を使用していてもそれなりに容量がかさむので、『画像1』よりも容量の小さい『画像2』を使っています。
特に容量について気にならなければ、『画像1』に切り替えてもいいかもしれません。
サイドバー部分は、PC/スマートフォンと完全に分離しています。
カレンダー未表示(お好みで独自タグを追加して下さい)、カテゴリと月別部分はプルダウンメニューです。テキストリンクにすると場所をとるのでおそらくこっちの方が使いやすいかな、と。
記事画面レイアウトについて
コメント機能をお使いになる方は、コメント送信後の画面で出る『戻る』のリンク先が記事画面となっていますので、記事画面もレイアウトは入れておいたほうがいいかもしれません。
『ブログトップへ戻る』などのリンクを貼るのだけでももちろん構いません。
また、フィーチャーフォンでの一覧画面だけスレッド形式にするのも面白いかなと思います。
- PREV │ LIST │ NEXT