PROJECTは、企画・イベント告知サイト向けにデザインしたテンプレートです。たくさんの情報を掲載することを念頭に、最新のWebトレンドに則ったいまどきなレイアウトになりました。もちろん個人サイトにもお使いいただけます。
- 大きなイラスト・写真などが目を引くトップページ
- ヘッダーナビ・フッターナビ・最上部に戻るボタンでサイト内導線に配慮
- 「メンバー一覧」ページのサンプルが付属
- イラスト表示モーダルウィンドウ「fuwaimg」がすぐに使える
- モバイルファーストのレスポンシブ対応デザイン
仕様について
企画・イベント系サイトさんで使いやすいように配慮いたしました。訪問者の目を引く大きなアイキャッチや、それを邪魔しないデザインでスクロールすると色が変わるヘッダーナビ、そしてフッターエリアにも多彩な情報を入れ込めるようにしました。
同梱htmlファイル
PHP版について
HTMLをある程度扱いなれた方、もっと効率的にサイトを制作・運営したい方には、PHP版テンプレートの利用をおススメします。
- あらかじめヘッダーやフッターなどのページ共通パーツが分割してあるため、変更に強いサイトづくりができます。
- トップページに表示されるニュース一覧をPHPで出力するため、古いニュースを自動的にトップページから削除し、「すべてのニュース一覧」ページにしか表示されないように管理することができます。ニュースを更新する手順はCSVファイルに一行書き足すだけで非常にカンタン、手間がかなり軽減されます。
PHP版の利用方法の詳細はこちらをご参照ください。また、以下の記事も参考にしてください。
コンテンツの増やし方
<section>～</section>をコピー&ペーストしたり、削除することで、ブロック（コンテンツの塊）を増減できます。また、<section>に指定のclassを与えると、ブロックの背景が薄いグレーになり、コンテンツが切り替わったことがわかりやすいデザインになります。詳しくはhtmlファイルに記載のコメントを読んでください。
メンバー紹介ページを同梱
たくさんの人が関わる企画やイベントにおいては、関係者紹介が欠かせません。このテンプレートでは、プロジェクトに関わったメンバーを紹介するためのテンプレートページを同梱しているため、レイアウトにあれこれ悩まなくてもサクッとメンバー紹介ページを作ることができます。
個人サイト等においては、キャラクター紹介ページとして使うこともできます。
イラスト展示はページ遷移せずスマートに
イラストの展示はfuwaimgで実装しています。サムネイルをクリックすると、その場でフワッと原寸のイラストが表示されるモーダルウインドウです。ページ遷移なし、ストレスフリーでイラストを見ていただけます。
メールフォームのデザインも実装済
ボタンやテキストボックスも、サイトの雰囲気に合わせてデザインしてあります。ご自分でプログラムを組み込むだけで、すぐに機能を実装していただきます。
変更履歴
- 2023.02.02
- グローバルナビのサブメニューの文字数が多くなるとデザインが崩れる問題を修正。その他細かなブラッシュアップ。
- 2022.05.16
- 同梱fuwaimgプログラムをVer1.4.2へアップデート。
- 2020.01.15
- PHP版の配布を開始しました。
- 2021.01.13
- ハンバーガーメニューを開いているとき、メニュー以外のエリアをクリックするとメニューが閉じるよう変更しました。
ページ内遷移した場合にコンテンツの上部がヘッダーメニューで隠れてしまう問題を修正しました。
- 2020.12.05
- イラストの展示スクリプトをLightBoxからfuwaimgへ差し替えました。
その他細かなブラッシュアップを行いました。
- 2020.09.16
- トップイメージのレスポンシブ対応が無効になっていた点を修正しました。