sitename

about

ここは○○な××サイトです。○○をご存じない方の閲覧はご遠慮ください。

information

黒っぽい背景のトップページです。リンクはPC版のみオンマウスで縁取りが白っぽくなります。強調はこんな感じです。

画面幅700pxを境にデザインが変わります。
contentsに小説ページのサンプルを置いています。

log

５月１９日　モバイル版のリンクデザインを微調整しました。

source&image

head

<meta charset="UTF-8"><!--文字コードの指定--> <style type="text/css"> /* リセットCSS */ /* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none} </style> <style type="text/css" media="screen and (max-width:699px)"> /*　画面幅699px以下用CSS　*/ /* webフォント */ @import url('https://fonts.googleapis.com/css?family=Oswald:200'); /* 'Oswald' is licensed under the Open Font License. https://fonts.google.com/specimen/Oswald */ /* 共通設定 */ html { font-size: 62.5%; } body { padding: 2rem 0; background-color: #000000; color: #b6ad78; font-size: 1.2rem; font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif; letter-spacing: 0.2em; line-height: 180%; } a { background-image: url('モバイル用画像URL'); background-position: center; background-size: 100%; color: #b6ad78; font-weight: bolder; text-decoration: none; } h1,h2,h3,h4 { font-family: 'Oswald', sans-serif; } h1 { padding: 1em 0; font-size: 2.0rem; text-align: center; text-shadow: 0.1em 0.1em 0.2em #444444; } h2 { margin: 0.8em 0; font-size: 1.2em; color: #ada472; } h3 { padding: 0.3em 1em; } em { font-style: normal; background-color: #4e4c41; } input,textarea,button,select { padding: 0.2em; border: none; color: inherit; font-family: inherit; font-size: 100%; } input,button,select { background-image: url('モバイル用画像URL'); background-position: center; background-size: 100%; } textarea { width: 90%; background: #2a281a; } input[type="text"] { margin-right: 0.5em; width: 6em; text-align: center; } form { padding: 1em; text-align: center; } ul,ol { list-style: none; } /* 段落設定 */ p { padding: 0 1em; } section { margin: 2em 0; } /* メインコンテンツ設定（全頁共通） */ main { display: block; margin: 2rem auto; width: 100%; box-sizing: border-box; max-width: 500px; padding: 1rem; background: #000000; } /* ヘッダー設定 */ header { font-family: 'Oswald', sans-serif; } header ul { display: flex; justify-content: center; padding: 1em 0; font-size: 1.3rem; } header li { margin: 0 0.5em; } /* 小説一覧ページ設定 */ .novel h2 { background: none; color: #555348; text-align: center; } .novel a { background: none; text-shadow: 0.2em 0.2em 0.3em #666666, 0.2em -0.2em 0.3em #666666, -0.2em 0.2em 0.3em #666666, -0.2em -0.2em 0.3em #666666; } .novel a:visited { color: #857f5e; } .novel ul { margin: 2em; } .novel li { padding: 0.3em 0; } /* 小説本文ページ設定 */ main.text { color: #dacf90; line-height: 200%; } .text section { margin: 2em 0; padding: 0 1em; } .text p { text-indent: 1em; } /* 右寄せ設定 */ .right { text-align: right; } </style> <style type="text/css" media="screen and (min-width:700px)"> /*　画面幅700px以上用CSS　*/ /* googleフォント */ @import url('https://fonts.googleapis.com/css?family=Oswald:200'); /* 'Oswald' is licensed under the Open Font License. https://fonts.google.com/specimen/Oswald */ /* 共通設定 */ html { font-size: 62.5%; } body { padding: 5rem 0rem; color: #b6ad78; font-size: 1.3rem; font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif; letter-spacing: 0.2em; line-height: 180%; background-color: #000000; background-image: url('PC用画像のURL'); background-position: center; background-size: 140%; background-attachment: fixed; } a { padding: 0.2em; color: #b6ad78; text-decoration: none; transition: 0.5s; text-shadow: 0.2em 0.2em 0.3em #444444, 0.2em -0.2em 0.3em #444444, -0.2em 0.2em 0.3em #444444, -0.2em -0.2em 0.3em #444444; } a:hover { text-shadow: 0.2em 0.2em 0.3em #777777, 0.2em -0.2em 0.3em #777777, -0.2em 0.2em 0.3em #777777, -0.2em -0.2em 0.3em #777777; } h1,h2,h3,h4 { font-family: 'Oswald', sans-serif; } h1 { padding: 1em 0; font-size: 3.0rem; text-shadow: 0.1em 0.1em 0.2em #444444; } h2 { margin: 0.8em 0; padding: 0.2em 1em; font-size: 1.5em; color: #555348; border-bottom: solid 1px #21201b; } h3 { padding: 0.3em 1em; } em { font-style: normal; background-color: #302f29; } input[type],textarea,button,select { padding: 0.2em; background: rgba(255,255,255,0.3); border: none; font-family: inherit; font-size: 100%; } input[type="text"] { margin-right: 0.5em; width: 6em; text-align: center; } form { padding: 1em; text-align: center; } ul,ol { list-style: none; } /* 段落設定 */ p { padding: 0 1em; } section { margin: 2em 0; } /* メイン設定（全頁共通） */ main { display: block; margin: 5rem auto; width: 50%; min-width: 600px; padding: 5rem; box-sizing: border-box; background: rgba(0,0,0,0.8); } /* ヘッダー設定 */ header { font-family: 'Oswald', sans-serif; } header ul { display: flex; justify-content: flex-end; padding: 0 2em 2em 0; font-size: 2rem; } header li { margin: 0 0.5em; } /* 小説一覧設定 */ .novel a:visited { color: #857f5e; } .novel ul { margin: 2em; } .novel li { padding: 0.3em 0; } /* 小説本文設定 */ main.text { background: rgba(0,0,0,0.95); color: #7d7753; line-height: 200%; } .text section { margin: 2em 0; padding: 0 3em; } .text p { text-indent: 1em; } /* 右寄せ用 */ .right { text-align: right; } </style>

body(index)

<!-- コンテンツエリアの幅などを調整するため、全体をmainで囲っています --> <main> <!-- ここからヘッダー --> <header> <h1>sitename</h1> <!-- ここからナビゲーション --> <nav> <ul> <li><a href="URL">item1</a></li> <li><a href="URL">item2</a></li> <li><a href="URL">item3</a></li> <li><a href="URL">item4</a></li> </ul> </nav> <!-- ここまでナビゲーション --> </header> <!-- ここまでヘッダー --> <!-- ここから説明等 --> <section> <h2>about</h2> <p>ここは○○な××サイトです。○○をご存じない方の閲覧はご遠慮ください。<a href="">リンク</a>と<em>強調</em></p> </section> <section> <h3>heading3</h3> <p> <textarea>テキストエリア</textarea><br> <input type="submit" value="送信ボタン"> </p> </section> <!-- ここまで説明等 --> </main>

body(novel)

<!-- リンクの設定等が異なるのでmainのクラス名をnovelにして囲ってください。 --> <main class="novel"> <!-- ここから名前変換用フォームダミー --> <form> <input type="text" value="名字"><input type="text" value="名前"><input type="submit" value="送信"> </form> <!-- ここまで名前変換用フォームダミー --> <!-- ここから小説一覧 --> <h2>小説名</h2> <ul> <li><a href="design25_sample.html">本文サンプル</a></li> <li><a href="URL">未読リンクサンプル</a></li> <li><a href="">既読リンクサンプル</a></li> <p>クラス名rightで文字が右寄せになります。</p> </ul> <ul class="right"><!-- ※右寄せ --> <li><h3>chapter1</h3></li> <li><a href="">小説タイトル</a></li> <li><a href="">小説タイトル</a></li> <li><a href="">小説タイトル</a></li> <li><a href="">小説タイトル</a></li> <li><a href="">小説タイトル</a></li> </ul> <h3></h3> <ul> <li><h3>chapter2</h3></li> <li><a href="">小説タイトル</a></li> <li><a href="">小説タイトル</a></li> <li><a href="">小説タイトル</a></li> <li><a href="">小説タイトル</a></li> <li><a href="">小説タイトル</a></li> </ul> <!-- ここまで小説一覧 --> </main>

body(text)

<!-- mainのクラス名はtextです --> <main class="text"> <h2>小説タイトル</h2> <!-- 小説本文ここから --> <section> <p>小説本文</p> </section> <!-- 小説本文ここまで --> </main>

image

パブリックドメインの物を加工しました。こちらからお持ち帰りください。

PC用画像

モバイル用画像

元画像をダウンロード（Pixabay）