このサイトは○○を取り扱うサイトです。 現在のサイトデザインをベースに季節ごとの色合いにしてみました。 リンクはこうなって強調はこうなります。
2023/3/10 更新履歴スペース。
管理人：○○ ○○ 色鮮やかな四季がすきです。
サイト名：フォーシーズン URL：https://○○.○○.○○/
長編 ○○と××の話 第一話 / 第二話 / 第三話
短編 小説用ページ サンプル有 タイトル ○○ タイトル ○○
水色小箱 / サイト名 / サイト名
自動改行「しない」で作成。 画像はパブリックドメインのものを使用しています。 こちらからお持ち帰りください。 バージョン違い→ 春 / 夏 / 秋 / 冬
HEAD <style type="text/css"> @import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Noto+Serif+JP&family=Kaisei+Opti&display=swap'); *,::after,::before{box-sizing:border-box} *{margin: 0; padding: 0;} ol,ul{list-style:none} img{max-width:100%} table{border-collapse:collapse} textarea{white-space:revert} :root{ --main-color: #73b8e2; /* アクセントカラー */ } html{ scroll-behavior: smooth; } body{ background: #fff; color: #333; font-family: 'Noto Serif JP', serif; font-size: 0.8em; line-height: 1.5; } a{ text-decoration: none; color: #000; font-weight: bold; border-bottom: 3px double var(--main-color); } .wrp{ width:90%; max-width:600px; margin:15px auto; } header{ margin: 30px auto 5px; } h1 { font-family: 'Kaisei Opti', serif; position: relative; padding-top: 30px; padding-left: 30px; font-size: 2em; font-weight: 400; letter-spacing:0;} h1::before { content: attr(data-en); position: absolute; transform: rotate(-7deg); color: rgba(115,184,226,0.5); /* 英字タイトルの色 */ top: 0; left: 0; font-size: 1.5em; font-weight: 400; font-family: 'Fredericka the Great', cursive; letter-spacing:0; z-index: -1; } h2{ font-family: 'Kaisei Opti', serif; color: var(--main-color); font-size: 2em; line-height:2 ; } h3 { font-family: 'Kaisei Opti', serif; font-size:1.6em; color: #000; border:2px solid var(--main-color); border-radius:30px; margin-bottom: 30px; padding: 1em; text-align: center; background: url(##背景画像URL##) no-repeat left top/cover; background-color:rgba(255, 255, 255,0.8); background-blend-mode:lighten; } p{ padding: 20px;} .menu{ margin: 10px 40px; } .menu a{ font-family: 'Kaisei Opti', serif; color: #fff; font-size:1em; background: var(--main-color); border:3px double #fff; margin: 5px; padding: 5px 1em; } .menu a:hover{ color: var(--main-color); background: #fff; border:3px double var(--main-color); } .box{ border:2px solid var(--main-color); border-radius:30px; margin-bottom: 30px; background: url(##背景画像URL##) no-repeat left top/cover; background-color:rgba(255, 255, 255,0.8); background-blend-mode:lighten; } .text{ line-height: 1.8; width: 95%; margin: 1em auto; } .atgk{ border: double 3px var(--main-color); margin: 1em 1em 0 1em; padding: 0.5em; } .mark{ font-size: 1.1em; background: var(--main-color); color: #fff; padding: 0 1em; } em{ background:linear-gradient(transparent 60%, #ecec66 60%); font-weight: bold; padding: 0 0.2em; } .page_top_btn { position: fixed; bottom: 10px; right: 10px; font-weight: bold; padding: 1em; text-align: center; background: var(--main-color); color: #fff; border-radius:30px; transition: 0.3s0; } footer{ text-align: center ; margin: 50px auto 20px; } </style> BODY <a href="#page_top" class="page_top_btn">▲</a> <header id="page_top"><h1 data-en="for season"><span>フォーシーズン</span></h1> <div class="menu"><a href="#info">info</a> <a href="#main">main</a> <a href="#bkm">bkm</a><div> </header> <div class="wrp"> <h2 id="info">Information</h2> <div class="box"> <p>このサイトは○○を取り扱うサイトです。<br> 現在のサイトデザインをベースに季節ごとの色合いにしてみました。<br> リンクは<a href="">こう</a>なって強調は<em>こう</em>なります。</p> <p><span class="mark">2023/4/1</span><br> 更新履歴スペース。</p> </div> <div class="box"><p> 管理人：○○ ○○<br> 色鮮やかな四季がすきです。<br> </p><p> サイト名：フォーシーズン<br> URL：https://○○.○○.○○/<br></p> </div> <h2 id="main">Main Contents</h2> <div class="box"> <p><span class="mark">長編</span><br> ○○と××の話<br> <a href="">第一話</a> / <a href="">第二話</a> / <a href="">第三話</a><br> </p> <p><span class="mark">短編</span><br> <a href="">タイトル</a> ○○<br> <a href="">タイトル</a> ○○<br> <a href="">タイトル</a> ○○<br> </p> </div> <h2 id="bkm">Bookmark & Thanks</h2> <div class="box"> <p> <a href="https://aqua.lovesick.jp/box/" title="template" target="_blank" rel="noopener">水色小箱</a> / <a href="サイトURL" title="用途" target="_blank" rel="noopener">サイト名</a> / <a href="サイトURL" title="用途" target="_blank" rel="noopener">サイト名</a></p> </div> <footer> <a href="">Back</a> </footer> </div> 小説ページBODY <div class="wrp"> <h3>タイトル</h3> <div class="text"> 本文 <div class="atgk"> あとがきスペース </div> <footer> <a href="">Back</a> </footer> </div>
▲
