LOVE/LIKE

ここは○○サイトなど説明文やインフォメーションにお使いいただけます。これはサンプルです。幅600px以上のデバイスから見ると、下記コンテンツが二段になります。600px以下だとメニューリンクが表示されて、クリックで移動します。メニューリンク以外のリンクはこうなります。<strong>～</strong>で強調されます。

long story

君の影が剥がれない

白いワンピースについた染み / 言えないかなしみ / 君だけみえなくなっちゃった / かげに染まるよ / ういている

おちゆく天使

注意書き・説明文・あらすじや傾向などお好きにご使用ください。

short story

お気に入りの君へ / 未来の遺影 / だって子どもだもん / 不確かなものでも信じていたい / 左手に隠した指輪 / Give me,your...

▲ top

about site

site name

https://alicex.jp/○○○/

owner

○○○（memo / bkm）

▲ top

自動改行“しない”で設定しています。
幅600px以上のデバイスから見るとコンテンツが二段になり、600px以下だとメニューリンクが表示されて縦一段に並びます。
幅600px以下のデバイスで見たときのみ、メニューリンク及びトップへ戻るリンクが表示され、クリックで移動します。
フォームは拍手機能を使用しています。使用の際はご注意ください。

HEAD

@import url('https://fonts.googleapis.com/css?family=Barrio|Dosis');

body{
font-family:"Dosis","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#665e51;
background:#fbfaf5;
margin:0;
padding:0;}

@media screen and (min-width: 601px){
.wrp{
max-width:800px;
margin:0 auto;}

.width{
display: table;
width: 100%;}

.left{
display: table-cell;
width: 65%;
padding:10px 10px 10px 20px;}

.right{
display: table-cell;
width: 35%;
padding:10px 20px 10px 10px;}

.menu{
display:none;}

.back{
display:none;}
}

@media screen and (max-width: 600px){
.wrp{
width:100%;
margin:0 auto;}

.left,.right{
padding:10px 20px;}

.menu{
overflow: hidden;
margin:0 20px 20px;
font-size:13px;}

.menu a{
color:#fbfaf5;
background:#665e51;
border:solid 1px #665e51;
border-radius:5px;
margin:0 3px;
padding:2px 3px;
text-align:center;
width:80px;
display:block;
float:left;
transition:0.5s;}

.menu a:hover{
border:solid 1px #665e51;
color:#665e51;
background:#fbfaf5;}

.back{
margin:20px 0 0;}
}

.top{
margin:10px 20px 0;
padding:0;}

.info{
background:#fff;
margin:10px 5px;
padding:5px;}

hr{
border-top:dashed 1px #665e51;
border-bottom:0;
margin:20px 0;}

.ft{
padding:10px;
margin:20px;
text-align:center;
border-top:double 3px #665e51;}

strong{
text-decoration:underline;}

h1{
font-size:28px;
color:#bf545e;
font-family:"Barrio", sans-serif;
font-weight:normal;
margin:30px 20px 20px;
padding:0;}

h2{
font-family:"Barrio", sans-serif;
font-size:18px;
font-weight:normal;
background:repeating-linear-gradient(-45deg, #e9e4d4, #e9e4d4 7px, #fbfaf5 0, #fbfaf5 14px);
text-align:center;
margin:20px 0;
padding:5px;}

h3{
color:#bf545e;
font-family:"Barrio", sans-serif;
font-weight:normal;
font-size:15px;
font-weight:normal;
margin:10px 0;
padding:0;}

a{
color:#665e51;
text-decoration:none;
padding:0 1px;
border-bottom:dashed 1px #e9e4d4;
}

a:hover{
color:#e9e4d4;
border:0;
}

input[type],textarea{
height:50px;
width:100%;
font-family:"Arsenal","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#e9e4d4;
color:#665e51;
border:solid 1px #e9e4d4;
border-radius:5px;
box-shadow:none;
margin:10px 5px 5px;
padding:2px 3px;
}

input[type=text]{
height:24px;
width:170px;
margin:5px 0;}

input[type=submit]{
height:auto;
width:100%;
cursor:pointer;
text-shadow:none;
background:#665e51;
color:#fbfaf5;
border:solid 1px #665e51;
box-shadow:none;
margin:5px 5px;
}

</style>

BODY

<div class="wrp">
<div id="first"><h1>LOVE/LIKE</h1></div>
<div class="menu">
<a href="#contents">contents</a> <a href="#mail">about site</a>
</div>

<div class="top">
ここは○○サイトなど説明文やインフォメーションにお使いいただけます。これはサンプルです。幅600px以上のデバイスから見ると、下記コンテンツが二段になります。600px以下だとメニューリンクが表示されて、クリックで移動します。メニューリンク以外のリンクは<a href="#">こう</a>なります。<strong><strong>～</strong></strong>で強調されます。

</div>

<div class="width">
<div class="left">
<div id="contents">
<h2>contents</h2></div>
<h3>long story</h3>
<a href="#">君の影が剥がれない</a>
<div class="info">白いワンピースについた染み / 言えないかなしみ / 君だけみえなくなっちゃった / かげに染まるよ / ういている</div>
<a href="#">おちゆく天使</a>
<div class="info">注意書き・説明文・あらすじや傾向などお好きにご使用ください。</div>
<hr>
<h3>short story</h3>
<a href="#">お気に入りの君へ</a> / <a href="#">未来の遺影</a> / <a href="#">だって子どもだもん</a> / <a href="#">不確かなものでも信じていたい</a> / <a href="#">左手に隠した指輪</a> / <a href="#">Give me,your...</a>
<div class="back">
<a href="#first">▲ top</a>
</div>
</div>
<div class="right">
<div id="mail"><h2>about site</h2></div>
<h3>site name</h3>
<div class="info">https://alicex.jp/○○○/</div>
<hr>
<h3>owner</h3>
○○○（<a href="#">memo</a> / <a href="#">bkm</a>）<br>
<form action="/サイトID/clap/機能数字/" method="POST" ><input type="hidden" name="CSID" value="" /><br />
<textarea name="message" id="">なにかあればこちらからどうぞ</textarea><br />
<input type="submit" value="send" /><br />
</form>
<div class="back">
<a href="#first">▲ top</a>
</div>
</div>
</div>
<div class="ft">2017.1.31~ / Thank you,123456hits.</div>
</div>