Site name(123456)
 

※お知らせ※
CSS一部修正(2014.10.13)
└大画面スマートフォン閲覧時のレイアウトを改善

シリーズ全体の説明
 《color+img》は『トップ画&サイト名(タイトル)&メニュー&メッセージ欄付き拍手』という、巷のどこにでもありそうなデザインにあえて挑戦してみるテンプレートシリーズです。というかcolorシリーズに画像を追加しただけなような…。
 (見た目は)同じようなテンプレートが配布されていたり個人のサイトさまと被っている可能性も十二分にありますが、ちゃんと最初から最後まで自分で考えたものですのであしからず。
 テンプレートに使う部分は、画像のみ、配色のみなど一部分だけで使っても構いません。もっとシンプルにいきたいから画像いらないかなって場合には消してしまってももちろんOKです。自由にアレンジしてお使い下さいませ。

 タイトルは画像を見て浮かんだイメージから適当につけてます。
 なおトップ画は、auのブラウジング中の画面サイズに横幅最小で228pxなものがあるようですので、横幅200px以内のものを使うと綺麗に収まると思います("yohaku"内に画像を入れた場合、フィーチャーフォンの左右余白計20px入るため)。
 また、"waku"内で表示する画像は画面サイズ(PCは枠サイズ)を超えると自動で縮小されます。
 200pxが小さいと感じるならフィーチャーフォン、PC、スマートフォンで端末振り分けして変えてもいいかなと思います。

 サイト名(タイトル)の自己主張は控えめ。この部分はspan(インライン)要素なので、改行せずにトップ画の横に並べたり、トップ画とサイト名部分を前後して使ったり好きなように変えられます。
 基本はこの形で、高さを変えたり位置を入れ替えたりして数を増やしていけたらな〜と思っています。

 PCで閲覧するとメイン部分に比べて余白部分がかなり広く感じるかも。良く言えばあっさりしていてコンパクトにまとまってる。悪く言えば物足りない・ちょっと寂しい感じ。どう取られるかはその人次第でしょうか。
 気になる場合は、端末振り分けでPCのみ表示などにして下にサイト説明文とか増やしてやったら幾分解消されるような気がします。もちろん、全端末表示しても問題ありません。

レイアウト構成
 PC表示で500pxの枠がつく(中央配置)以外は全端末見え方は殆ど変わりません。(2014.10.13より、PC・スマートフォンでは560px(余白含)以上になると枠がつき、それ以外は画面いっぱいで表示するようになりました。レイアウトは全端末殆ど変わりません。)
 セット的に使う場合を考え、文章サイトさまなどではあんまり狭いと逆に読みづらいので、多少広めな幅設定です。
 なお、横幅でpx指定しているのはこのPC枠だけなので、お好みの幅に調整しても他の要素に影響はありません。
 ただ、300px以下にするとPC閲覧時にフォーム入力枠幅がはみ出す場合があるのでご注意下さい。

クラス名
このシリーズでは以下のクラス名を統一して使用します。
<div class="waku">PC枠</div>
<div class="yohaku">全端末の四方余白設定</div> ※"waku"と"yohaku"は基本的にセットで使います。

<span class="title">サイト名やページタイトルなど</span>
<div class="menu">コンテンツメニュー</div>※PCとスマートフォンでは押しやすいようにリンク領域が少しだけ広くなります。

<div class="centar">中身中央寄せ</div>※"left"で左寄せ、"right"で右寄せ
<div class="midashi">見出し。一行ブロック</div>※『<span class="midashi">文字列</span>』で使えば文字の分だけ適用されます

リンク色
未訪問リンク色→#333333/訪問済リンク色→#666666
PC・スマートフォンフォーカス時:文字色→#9d896c、背景色→なし
フィーチャーフォン:
◇auフォーカス時:文字色→制御不能(背景色反転)、背景色→未訪問/訪問済リンク色
◇docomoフォーカス時:文字色→白#ffffff、背景色→未訪問/訪問済リンク色
◇SBフォーカス時:文字色→常に白、背景色→#9d896c

コピーページ
テンプレート作成手順
└初期設定部分も忘れずに!
全体レイアウト/HEAD内CSS
機能ページで使う方法改変指南

こぼれ話
 画像とか色とかを気分で変えて気軽に楽しめるような感じのテンプレートが作りたくなってシリーズ展開してみました。
 端末によって見た目を全く別なものに振り分けるようなテンプレート製作に行き詰まった時の息抜きがてら、あまり深く考えないゆる〜い気持ちで作っています。小難しいことはしないつもりです。
 全端末見え方を変えようとすると、並び順や不具合解消など色々考えるところが多くて飽きそうになるのです…。
 参考として、PC横幅をpx指定ではなく40emなどグリッドレイアウトにしても面白いかなと雑感(40文字分という意味。閲覧者のモニタで設定されている文字サイズによって横幅が変わります)。
 相変わらず説明長くてすみません。
×
「#エロ」のBL小説を読む
BL小説 BLove
- ナノ -