配色
全体背景色:#e5ced7
枠内背景色:#ffffff(白)
文字色:#665c5e
未訪問リンク色→#ed9d7d/訪問済リンク色→#d66757
PC・スマートフォンフォーカス時:文字色→#cc6c8c、背景色→なし
フィーチャーフォン:
◇auフォーカス時:文字色→制御不能(背景色反転)、背景色→未訪問/訪問済リンク色
◇docomoフォーカス時:文字色→白#ffffff、背景色→未訪問/訪問済リンク色
◇SBフォーカス時:文字色→常に白、背景色→#cc6c8c
使用画像
※フィーチャーフォン用の画像はPC/スマートフォン用の画像を縮小したものです。
PC/スマフォ用右上背景
フィーチャーフォン用右上背景
スマフォ用フォームアイテム
各レイアウト
灰色を混ぜたような控えめなピンクの背景に、白い背景のボックスを重ねたデザインのリアルタイム式ブログです。
PC/スマートフォン
PCとスマートフォン向けのCSSはほぼ同じものとなっています。画面サイズによってレイアウトが変わるレスポンシブデザイン。
タブレットなどの大画面サイズの端末にも対応しています。
右上の画像に記事やメニューのボックスがかぶる場合、背景を透過しているのでうっすら背景が見えます。
総横幅は最大880px。中央寄せ。
右サイドバーは最大サイズの時は190px固定。上から順にカレンダー、カテゴリ選択、月別選択の順で縦並び。
カテゴリ、月別はテキストリンク表示のブロックレベル要素化していますので、横幅全部がリンク領域となります。
縦幅は一定サイズを超えるとスクロールバーが出ますので選択肢が多くても大丈夫です。(6行くらいまでならスクロールバーは表示されません)
カラム落ちするような状況(横幅が880px以下)になった場合、メディアクエリ(CSS3)に対応した端末ではサイドメニューは記事の"上"に流れ込みます。
また、テキストリンクになっていたカテゴリと月別は、プルダウンメニューに変わります。
タブレット等の大画面端末では、カレンダーとカテゴリ&月別のボックスが横並びになります。
さらに、画面サイズが480px以下の端末になると、横並びが解除され縦並びになります。
※スマートフォンでは、ほとんどの端末でカラム落ち&画面サイズ480px以下の場合のレイアウトになります。
文章では分かりづらいところがありますので、実際の見え方はスクリーンショットでご確認下さい。
なお、ChromeやFirefox、IE10以上のモダンブラウザでは、ウィンドウの横幅を縮めることで実際の見え方を確認できます。
フィーチャーフォン
一覧画面での表示件数は少なめがオススメです。
タイトルが長くなった時に日付の下にタイトルが流れ込まないよう、TABLE要素を使っています。
丸角等はありませんが、おおよそPC/スマフォ表示と同じようなレイアウトになるよう構成しています。
カレンダー、カテゴリ&月別部分(プルダウンメニュー)が記事の上に表示されます。
PC/スマートフォンと完全に分離して記述していますので、下に持って行きたい場合は振り分けているブロックごと移動させて下さい。
記事画面レイアウトについて
コメント機能をお使いになる方は、コメント送信後の画面で出る『戻る』のリンク先が記事画面となっていますので、記事画面レイアウトも入れておいた方が便利はいいと思います。
『ブログトップへ戻る』などのリンクを貼るのだけでももちろん構いません。
余談
タイトルは『すいみつ』と読みます。
桃色→ピーチ→水蜜桃(すいみつとう)と連想したのですが、桃の画像を使っているわけでもないので短縮形の水蜜にしてみました。
Peach nectarにしようとも思ったんですが、商品名にもなっているしなんだかなと思って。nectarには『果実を絞った濃厚なジュース』の他に『花の蜜』という意味があるそうです。
汎用タグの罫線は、補色に近い色合いだったのもありますが、桃色がテーマということで葉っぱをイメージしています。