information
簡単なあらすじと相手の名前が書けるスペースのある小説分岐ページのリクエストをもとに作成しました。
画面幅1000pxを境に余白が変わります。
画像をダイヤの形にしたくて頑張りました。ページ下部に使い方の説明も書いてみましたのでビギナーの方はそちらもご覧ください。
source&image
head
body
image
パブリックドメインの画像です。こちらからお持ち帰りください。※一部加工しました。
使い方
長編追加用テンプレート
body
長編追加用テンプレートの???部分に任意のクラス名を追加する。
<ul>
<li><i class="fas fa-gem image title_1"></i>
<div><h3><a href="">タイトル</a><span>相手</span></h3>
<p>説明文</p></div>
</li>
</ul>
css
CSSに.クラス名を追加してプロパティを記述していく。
※最初のピリオドを忘れずに
※background-positionやbackground-sizeの部分は適宜変更
/* ここから背景設定 */
.title_1 {
background-image: url('画像URL');
background-position: center;
background-size: 120%;
}
/* ここまで背景設定 */