Site name

サイトオープン記念企画 A. 専用テンプレートのリクエストテンプレートです。

シンプルな2カラムテンプレート。
コンテンツが大容量な場合でもスッキリと見られるよう設計しました。

メインメニューには通常のページ移動と、サブメニューの開閉が可能です。
スマホ表示の場合閉じると自動でメインメニューの位置まで戻り、次のアクションに備えます。
サブメニューの子メニューは、ページ内の指定位置に飛ぶように使うと便利です。

ページ内移動のためのショートカットボタンエリアも用意しました。
見出しが多くなることも考慮し、あえて固定せず、ページトップへ移動ボタンと併用して使用するようにデザインしています。

小説ページにはページ送り、目次、TOPへ戻るなどのショートカットボタンを設置。ページ下部にコンパクトにまとめています。
必要ないボタンは簡単に削除可能です。

また、ページの雰囲気がガラッと変わるダークなページも作成しました。
通常のページと同じ色を使用することで、雰囲気が変わっても統一感を持った仕上がりになるよう注意しています。

バナーはおまけでデザインに合わせて作りました。

リクエスト内容
  • 2カラム
  • コンテンツが多いのでページ移動多め
  • スッキリシンプルなページ構成
  • 白ベースに青や緑
  • 画像はTOPページにワンポイント等、季節と気分で変えられるようにしたい
その他サンプルページ
色設定

 テキスト色
 背景色
 メインカラー
 メインカラー(明)
 メインカラー(淡)
 サブカラー
 サブカラー(明)
 アクセントカラー1
 アクセントカラー2

テキストと装飾

通常テキストサンプル

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすイロハニホヘトチリヌルヲワカヨタレソツネナラムウヰノオクヤマケフコエテアサキユメミシヱヒモセス

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789

class="text-center"を指定すると、指定された要素のテキストが中央寄せになります。
見出し要素に同じclassを指定すると、見出しも中央寄せにできます。

中央寄せテキスト

中央寄せ見出し

class="text-right"を指定すると、指定された要素のテキストが右寄せになります。
見出し要素に同じclassを指定すると、見出しも右寄せにできます。

右寄せテキスト

リンク

↓画像リンク

見出し

H2 sample

H3 sample

H4 sample

H5 sample
装飾

<b>要素

<em>要素

<strong>要素

<hr>水平線


トップ画像

トップ画像としてでなく、ページ中のワンポイントとしても使用できるようになっています。
画像は簡単に変更できるので、コンテンツ毎に変更してもOKです。

四角形

四角形のトップ画像です。
950*200のサイズでご用意いただくとぴったりです。
class="shadow"を設定すると影が付きます。

円形

円形トップ画像です。
400*400のサイズでご用意いただくと、スマホでも綺麗に表示されます。
class="shadow"を設定すると影が付きます。

リスト

リスト
  • リスト
  • リスト説明など書けます
  • リスト
    説明部分を改行させることができます
  • リスト内リンク
タイトルと説明文
タイトル
内容
改行OK
タイトルを太字にしてもOK
内容
タイトルと説明文(横並び)

スマホ表示の場合横幅が狭くなるため、縦並びと同じように表示します。

タイトル
内容
改行OK
タイトルを太字にしてもOK
内容
タイトルと説明文(枠あり)

スマホ表示の場合横幅が狭くなるため、タイトルと内容を改行して表示します。

タイトル
更新履歴などに良いです
タイトル
タイトルを太字にしても見やすいです
改行できます
目次

リストタイプの目次です。説明書きなどをしたい場合に向いています。
ジャンルなど、タグのようにコンパクトに見せたいものに使える要素を設定しています。
続きがある場合、次のタイトルの<li>要素にclass="next"を指定すると、矢印マークがつきます。

目次(コンパクト)

タイトルとタグを使ってコンパクトに並べる目次です。短編小説に向いています。
続きがある場合、次のタイトルの<li>要素にclass="next"を指定すると、矢印マークがつきます。

シンプルなテーブルデザインです。
スマホ表示の場合は横スクロールを有効にしています。

タイトル タイトル タイトル
タイトル コンテンツ コンテンツ
タイトル コンテンツ コンテンツ

フォーム要素

※サンプルは送信できません。

横並びのフォーム
大きなフォーム

項目名が不要の場合はコンテンツ幅いっぱいに表示されます。

大きなフォーム(項目名あり)

メールフォームの場合はこちらがおすすめです。
項目名のclassrequiredを設定すると必須マークが付きます。

name
message

表示非表示

ボタンクリックで開閉します。

コンテンツ
コンテンツ