peta2は、メモ紙をぺたぺたと張り付けたようなレイアウトのテンプレートです。個性的な３カラムのデザインで、シンプルながら賑やかさも持ち合わせています。ブルー・ピンク・レッド・グリーンの4色のデザインをご用意してあります。
- コンテンツが賑やかに見える３カラムレイアウト
- 4色分のcssを同梱
- divタグを丸ごとコピペするだけで、コンテナを増やしたり減らしたりできる
- イラスト表示モーダルウィンドウ「fuwaimg」がすぐに使える
- Bootstrapを用いたレスポンシブ対応デザイン
仕様について
当テンプレートの特徴はメモ用紙をカラフルな壁にぺたぺたと貼り付けたような可愛いデザインです。ひとつひとつのボックスが、読みづらくない程度に少しだけ傾くようにデザインしてあるので、手貼り感があります。photo_wrapperクラスを持つdivタグを中身ごとコピペするだけで、ボックスを自由に増やしたり、移動させたりできます。まるでグリッドデザインのような仕上がりで、パズルを組み立てるようにサイト構成を作り上げることができます。
同梱htmlファイル
また、デフォルトで名前変換フォームを設置していますので、夢小説サイトさんならそのままお使いいただけます。夢小説の展示のない場合も、フォーム部分を削除していただければ、イラストサイトや小説サイトとして運用できます。
メモ用紙の増やし方
<!-- 白い紙ここから --> ～ <!-- 白い紙ここまで --> と書いてある範囲をコピー・ペーストしたり、削除したりすることで、好きなだけメモ用紙を増やすことができます。
３本のカラムのうち、最も左のカラムに追加したい場合は <!-- 左カラムはじまり --> ～ <!-- 左カラムおわり --> の間に、
真ん中のカラムに追加したい場合は <!-- 真ん中カラムはじまり --> ～ <!-- 真ん中カラムおわり --> の間に……というように、挿入する位置についてはコメントを参考にして下さい。
４色分のCSSを同梱しました
cssフォルダには、４色分の基本cssを同梱しています。
- style.css（デフォルト色：ブルー）
- pink.css（ピンク）
- red.css（赤）
- green.css（緑）
好きな色のCSSを選び、名前を「style.css」に変更していただくことで使用できます（ブルーを使う場合は名前はそのままです）。使わない色のCSSは、サーバーにアップロードする必要はありません。
シンプルな分、カスタマイズも簡単です
３種類のカラーコードを一括置換するだけで、オリジナルの配色に変更できます。詳しくは、cssに書いてあるコメントを参照してください。
イラスト展示はページ遷移せずスマートに
イラストの展示はfuwaimgで実装しています。サムネイルをクリックすると、その場でフワッと原寸のイラストが表示されるモーダルウインドウです。ページ遷移なし、ストレスフリーでイラストを見ていただけます。
メールフォームのデザインも実装済
ボタンやテキストボックスも、サイトの雰囲気に合わせてデザインしてあります。ご自分でプログラムを組み込むだけで、すぐに機能を実装していただきます。
変更履歴
- 2022.05.16
- 同梱fuwaimgプログラムをVer1.4.2へアップデート。
- 2020.12.05
- イラストの展示スクリプトをLightBoxからfuwaimgへ差し替えました。