modern

単色ワンポイントがシンプルで可愛く使いやすいテンプレートです。
今どきのトレンドを取り入れつつ、個人サイトにも使いやすいようアレンジしました。
イエロー・ピンク・ブルー・バイオレットの4色のデザインをご用意してあります。

創作・同人サイト向けテンプレート「modern」
Swiper02
Swiper03
Swiper04

modernは、単色ワンポイントがシンプルで可愛く使いやすいテンプレートです。今どきのwebデザインのトレンドを取り入れつつ、個人サイトにも使いやすいようアレンジしました。イエロー・ピンク・ブルー・バイオレットの4色のデザインをご用意してあります。

  • 単色のワンポイントがシンプルで可愛いデザイン
  • 4色分のcssを同梱
  • divタグを丸ごとコピペするだけで、コンテナを増やしたり減らしたりできる
  • イラスト表示モーダルウィンドウ「fuwaimg」がすぐに使える
  • モバイルファーストのレスポンシブ対応デザイン

仕様について

当テンプレートの特徴はシンプルな中にもかわいらしさがあり、使いやすいデザインです。4色ご用意してあるので、好きな色のデザインに簡単に切り替えることができます。sectionタグで作られたコンテナをコピペするだけで、1カラムおよび2カラムのボックスを簡単に増やしたり減らしたりできます。

同梱htmlファイル

コンテナの増やし方

<!-- 1カラム始まり --> ~ <!-- 1カラム終わり --> と書いてある範囲をコピー・ペーストしたり、削除したりすることで1カラムのコンテナを、<!-- 2カラム始まり --> ~ <!-- 2カラム終わり -->と書いてある範囲をコピペ・削除すれば2カラムのコンテナを増やしたり減らしたりすることができます。

4色分のCSSを同梱しました

cssフォルダには、4色分の基本cssを同梱しています。

  • style.css(デフォルト色:イエロー)
  • style-pink.css(ピンク)
  • style-blue.css(ブルー)
  • style-violet.css(バイオレット)

好きな色のCSSを選び、名前を「style.css」に変更していただくことで使用できます(イエローを使う場合は名前はそのままです)。使わない色のCSSは、サーバーにアップロードする必要はありません。

イラスト展示はページ遷移せずスマートに

イラストの展示はfuwaimgで実装しています。サムネイルをクリックすると、その場でフワッと原寸のイラストが表示されるモーダルウインドウです。ページ遷移なし、ストレスフリーでイラストを見ていただけます。

メールフォームのデザインも実装済

ボタンやテキストボックスも、サイトの雰囲気に合わせてデザインしてあります。ご自分でプログラムを組み込むだけで、すぐに機能を実装していただきます。

変更履歴

2020.12.05
イラストの展示スクリプトをLightBoxからfuwaimgへ差し替えました。