carat

information

簡単なあらすじと相手の名前が書けるスペースのある小説分岐ページのリクエストをもとに作成しました。

画面幅1000pxを境に余白が変わります。

画像をダイヤの形にしたくて頑張りました。ページ下部に使い方の説明も書いてみましたのでビギナーの方はそちらもご覧ください。

更新履歴

20/03/14：配布用のCSSを修正しました。（詳しくはこちらをご覧ください）

source&image

head

<meta charset="UTF-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Italiana"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"> <style type="text/css" media="screen"> /* フォントのライセンス表記 */ /* This distribution contains content that is licensed under the Open Font License. You can download the original contents from here. 'Italiana' https://fonts.google.com/specimen/Italiana 'icons' https://fontawesome.com/icons/gem */ /* リセット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:bolder}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} /*　　PC、モバイル共通CSS　　*/ /* 共通設定 */ html { background: transparent; font-size: 62.5%; } body { font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif; letter-spacing: 0.2em; line-height: 180%; } /* 背景設定 */ i[class*="img_"] { background-color: #999999; } i.img_1 { background: url('画像URL') center #e296de; } i.img_2 { background: url('画像URL') center #6bc9d1; } i.img_3 { background: url('画像URL') center #d1c16b; } i.img_4 { background: url('画像URL') center #6059a8; } i.image { background-clip: text; -webkit-background-clip: text; color: transparent; } /* その他の設定 */ .right { text-align: right; } </style> <style type="text/css" media="screen and (min-width:800px)"> /*　　PC用CSS　　*/ /* 共通設定 */ body { font-size: 1.3rem; } a { background: #ededed; color: #000000; text-decoration: none; transition: 0.7s; } a:hover { background: #d7eceb; } h1 { padding: 0.5em 0em; font-family: 'Italiana', serif; font-size: 4rem; text-align: center; } h2 { display: inline-block; padding: 0em 1em; margin: 0.5em 0em; border-bottom: solid 2px #cccccc; font-family: 'Italiana', serif; font-size: 1.3em; } h3 { margin: 0.5em 0em 0.5em 1em; color: #555555; } em { color: #888888; } ol,ul,dl { list-style: none; } input,textarea,select,button { border: solid 1px #cccccc; font-family: inherit; font-size: 100%; } /* 段落設定 */ p { padding: 0em 1em; } section { margin: 2em 0em; } /* メインコンテンツ設定 */ main { display: block; margin: 5rem auto; width: 50%; min-width: 600px; } /* 小説設定 */ .novel { text-align: center; } .novel a { padding: 0em 0.5em; } .novel a:hover { background: #cfcfcf; } .novel ul { padding: 2em 0em; } .novel li { display: flex; align-items: center; padding: 2em 0em; box-sizing: border-box; } .novel li div { padding: 1em; width: 100%; } .novel li i { display: inline-block; padding: 0rem; font-size: 20.0rem; } .novel li h3 { padding: 0.5em 0em; font-family: 'Italiana', serif; font-size: 2.0rem; } .novel h3 span { padding: 0em 1em; color: #000000; font-size: 0.6em; font-weight: normal; } .novel p { color: #444444; text-align: left; } </style> <style type="text/css" media="screen and (max-width:799.999px)"> /*　　モバイル用CSS　　*/ /* 共通設定 */ body { font-size: 1.2rem; } a { background: #ededed; color: #000000; text-decoration: none; transition: 0.7s; } a:hover { background: #d7eceb; } h1 { padding: 0.5em 0em; font-family: 'Italiana', serif; font-size: 4rem; text-align: center; } h2 { display: inline-block; padding: 0em 1em; margin: 0.5em 0em; border-bottom: solid 2px #cccccc; font-family: 'Italiana', serif; } h3 { margin: 0.5em 0em 0.5em 1em; } em { color: #999999; } ol,ul,dl { list-style: none; } input,textarea,select,button { border: solid 1px #cccccc; font-family: inherit; font-size: 100%; } textarea { padding: 0.2em; width: 90%; } /* 段落設定 */ p { padding: 0em 1em; } section { margin: 2em 0em; } /* メインコンテンツ設定 */ main { display: block; margin: 2rem auto 5rem; width: 90%; max-width: 500px; } /* 小説設定 */ .novel { width: 90%; max-width: 500px; text-align: center; } .novel a { padding: 0em 0.5em; } .novel a:hover { background: #cfcfcf; } .novel ul { padding: 2em 0em; } .novel li { display: flex; align-items: center; padding: 1em; } .novel li i { padding: 0rem; font-size: 8.0rem; } .novel li div { width: 100%; } .novel li h3 { display: block; padding: 0em 0.5em; margin: 0em; font-family: 'Italiana', serif; font-size: 1.2rem; text-align: center; } .novel h3 span { padding: 0em 1em; color: #000000; font-size: 1rem; font-weight: normal; } .novel p { padding: 0.5em 1em; color: #444444; text-align: left; } </style>

body

<main class="novel"> <h2>連載中</h2> <ul> <li><i class="fas fa-gem image img_1"></i> <div><h3><a href="URL">title1</a><span>佐藤</span></h3> <p>世界で一番大嫌いな佐藤と偽装カップルを演じる話。</p></div> </li> <li><i class="fas fa-gem image img_2"></i> <div><h3><a href="URL">title2</a><span>相手</span></h3> <p>説明文</p></div> </li> </ul> <h2>完結済み</h2> <ul> <li><i class="fas fa-gem image img_3"></i> <div><h3><a href="">title2</a><span>鈴木</span></h3> <p>同級生の鈴木と出会って恋に落ちる話。（全１２話）</p></div> </li> <li><i class="fas fa-gem image img_4"></i> <div><h3><a href="">title3</a><span>高橋</span></h3> <p>幼馴染の高橋と５年ぶりに再会する話。（全１０話）</p></div> </li> <li><i class="fas fa-gem image img_5"></i> <div><h3><a href="">title4</a><span>田中</span></h3> <p>バーで知り合った田中と一夜限りの関係を築く話。（全５話）</p></div> </li> </ul> </main>

image

パブリックドメインの画像です。こちらからお持ち帰りください。※一部加工しました。

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

※左上から記載順

①、 ②、 ③、 ④、 ⑤

使い方

長編追加用テンプレート

<main class="novel"> <ul> <li><i class="fas fa-gem image img_?"></i> <div><h3><a href="URL">title1</a><span>相手</span></h3> <p>説明</p></div> </li> <li><i class="fas fa-gem image img_?"></i> <div><h3><a href="URL">title2</a><span>相手</span></h3> <p>説明</p></div> </li> </ul> </main>

body

長編追加用テンプレートimg_?の？部分を変更して任意のクラス名を指定する。

<ul>
<li><i class="fas fa-gem image img_novelTitle"></i>
<div><h3><a href="">タイトル</a><span>相手</span></h3>
<p>説明文</p></div>
</li>
</ul>

css

CSSにクラス名を追加してプロパティを記述していく。
※i.img_XXXにするのを忘れずに。
※ショートハンドで記述しています。左から順にbackground-image、background-position、スラッシュを挟んでbackground-size、background-colorの値です。別々に書いてもOKです。

/* 背景設定 */
i.img_novelTitle {
background: url('画像URL') center / 120% #000000;
}