Infomation
黒白系統で固めたシンプルなテンプレートです。PCとスマートフォンでは、リンクや入力フォームのフォーカス時、薄い青になるのがアクセント。広告が下設定の方向け。上設定の方はPC表示で広告部分がメニューで隠れますので利用不可です。
あらゆるページに対応させるためと自分趣味に走った結果、CSSがとても長くなりました…。
タイトルや見出しの画像はデコヤさんと自作です。
2013/10/14に先行公開してから早四ヶ月、ようやくサンプルサイト付きの正式公開となりました。長らくおまたせしてすみません…!
リンク色
通常未訪問リンク色→#666666/訪問済リンク色→#888888
PC・スマートフォンフォーカス時:文字色→#66aacc、背景色→なし
フィーチャーフォン:
◇auフォーカス時:文字色→制御不能(背景色反転)、背景色→未訪問/訪問済リンク色
◇docomoフォーカス時:文字色→白#ffffff、背景色→未訪問/訪問済リンク色
◇SBフォーカス時:文字色→常に白、背景色→#666666
メニュー部分
背景色→#333333
未訪問/訪問済リンク色→#efefef
PCフォーカス時:文字色→#efefef、背景色→#666666
スマートフォンフォーカス時:文字色→#efefef(下線つき)
フィーチャーフォン:
◇auフォーカス時:文字色→制御不能(背景色反転)、背景色→未訪問/訪問済リンク色
◇docomoフォーカス時:文字色→#333333、背景色→未訪問/済訪問リンク色
◇SBフォーカス時:文字色→常に白、背景色→#666666
各レイアウト
PCPCの方は、ヘッダ(タイトルとメニュー部分)が固定される擬似フレーム仕様。実際は、ヘッダ部がページ上に浮いた状態です。⇒擬似フレームの詳しい説明(図解付)
横幅700pxのボックスに対し、リンク領域は一つ100pxに設定していますので、一行7つまで入ります。メニューは中央寄せしています。
ブラウザ差異が出ないよう、サイトタイトルとメニューの文字サイズは固定です。
CSS3対応ブラウザは枠線に灰色のボックスシャドウがついています。
ページ最上部、ブラウザとページとの境目にもボックスシャドウを入れているので、ちょっとだけ立体的に見える…といいな。
また、分かりにくいですがサイトタイトル内のテキスト自体に白のテキストシャドウをつけているので可読性には問題ないはずです。
サイトタイトル部分にはストライプ画像の下に、上部から下部に向けて白⇒灰色のグラデーションが入っています。(IE9以下はbackground-imageの複数指定が未対応のため、灰色一色になります)
CSS3対応ブラウザは、メニュー・入力エリア・送信ボタンにオンマウス時、変化の時間を遅く設定してあるので、気持ちふんわりと色が変わるようになっています。
スクロールバーの有無で画面が横にずれないよう、内容が短くても縦のスクロール部分が最初から表示されています。
スマートフォン
スマートフォンの方は、全てスクロールと同時に動きます。理由は擬似フレームの詳しい説明(図解付)の下の方に書いてあります。
メニュー一つ一つはボックス化して横並びにしていますので、メニューの文字が途中で途切れることはありません。
その代わり、メニューが横に入りきらない場合はまとめて次の行に移るため、機種によっては左右に不自然なスペースが空くかもしれません。メニューは中央寄せしています。
一行以内に入るメニュー数は文字数によっても変わりますが、5個くらいまでなら大丈夫だと思います。
サイトタイトル部分にはPCと同じくストライプに背景白⇒灰色のグラデーションが入り、テキスト自体に白のテキストシャドウをつけています。
フィーチャーフォン
フィーチャーフォン(ガラケー)の方は、全てスクロールと同時に動きます。
メニューは中央寄せしています。
メニューリンクを横に並べ過ぎると機種によっては文字の途中で折り返されます。auの機種に、リンク文字が途中で折り返されている場合、リンクエラーが起こることがあるようです。不安な方は適度に改行<nopc><br /></nopc><を加えてあげて下さい。
一応、PCとスマートフォンはメニュー内の改行を無視する設定にしていますので、上のようにフィーチャーフォン用の振り分けをしなくてもデザインは崩れないようにはなっています。
※<br>改行『する』『しない』設定に関わらず、視覚的に改行するとPCでメニューの表示が崩れますのでご注意下さい。
使用画像
※全て1KB以下(見出し2の画像はデコヤさんのものなので、CSSをコピーすればそのまま使えます)
サイトタイトル背景画像
見出し1画像
見出し3画像
スマートフォン用アイコン
スクリーンショット(トップページ)
PC / スマートフォン / フィーチャーフォンコピーページ
★テンプレート作成手順└初期設定部分も忘れずに!
★統一CSS
★全体レイアウト
(Back-HOME)