「白い花」は小説展示向けのテンプレートです。24作目です。
白い紙を重ねたようなデザイン
どの端末からも見やすく、1カラムで表示されるレスポンシブデザインです。
「小説展示向け+周囲がカラー、文字部分のテーブルが白」のご要望にお応えしました!
こんな方におすすめです
- 小説を展示したい
- 春っぽい色が好き
- 和風テイストが好き
※ご利用の際は利用規約の独自ライセンスの項目をご一読ください。
「白い花」の特徴2つ
和を感じる小説にぴったりです
桜の画像と明朝体のタイトルで少しだけ和風の雰囲気になっています。フォントと画像、背景色を変えてポップな感じにしてもいいですね!
作品リストの部分はol
(番号付きリスト)を使っているので、数字を入力する必要はありません。連載小説に便利なタグです。
小説展示向けのテンプレートですが、サイト用にもお使いいただけるかと思います。
ちょっと変わった白テーブル
「文字部分のテーブルが白」とのご要望でしたので、何か新しい要素を取り入れようと思い、box-shadow
と::before
要素で紙を重ねたような装飾を施してみました。
パソコンと大きめのタブレットでのみ表示されます。
また、本文の長さで紙の重なり方が変わります。長い小説ですと右側にせり出す部分が大きくなるので、気になる場合は非表示にしましょう。
トップページは装飾あり・小説ページは装飾なしとするなら、CSSに.no-paper::before{display: none;}
と追記して(/* 小さい画面での表示 */の前に)、次に小説ページの<div class="wrapper">
を<div class="wrapper no-paper">
としてください。
no-paperの文字列はなんでも構いません。
テンプレートのデータ
文書型宣言 | HTML4.01 Transitional |
文字コード | Shift_JIS |
フレームワーク | One% CSS Grid |
CSSの書き方 | PCファースト |
サイト作りに慣れていなければ「HTMLテンプレートを使ったサイト制作の流れ」をご覧ください。