eg
o
ism
last up - 2022/01/
info
コンテンツページのテンプレートです。
画像
は
Pixabay
様からお借りしたものを加工しています
フォント
は
Leafscape
様より刻明朝を、
Google Fonts
様よりNoto Sans JPをお借りしています
サンプルテキスト
source code
episode
テキストタイトル
リンクを貼って一話ずつのレイアウトもできます
chapter
テキストタイトル
01.
愛読書の印象
02.
アグニの神
03.
カルメン
04.
海のほとり
05.
機関車を見ながら
06.
悪魔
07.
蜘蛛の糸
01.
愛読書の印象
02.
アグニの神
03.
カルメン
04.
海のほとり
05.
機関車を見ながら
06.
悪魔
07.
蜘蛛の糸
チャプター形式にしたい場合はリスト表示など
横並びリストは<ul class="list_inline">、二列縦並びは<ul class="list_block">にすれば上記のような表示になります
使用画像
HEAD
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> <style> @charset "utf-8"; @import 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400&display=swap'; @font-face { font-family: 刻明朝; src: url('https://cdn.leafscape.be/kokumin/font_1_kokumr_1.00_rls_web.woff2') format("woff2"); } /*-- Template by Luca --*/ /**-- https://as.lclla.com/ --*/ /*-- Template name EGOISM--*/ * { margin: 0; padding: 0; font-weight: 300; box-sizing: border-box; } *:focus { outline: none; } html { font-size: 62.5%; scrollbar-width: thin; scrollbar-color: rgba(117,96,96,0.50) transparent; } body { font: 1.4em/2.2 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'MS Pゴシック', 'MS PGothic', sans-serif; font-weight: 300; overflow-wrap: break-word; color: #76706a; font-weight: 300; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; letter-spacing: 2px; } html::before, html::after, body::before, body::after { content: ""; background: #fff; mix-blend-mode: exclusion; position: fixed; z-index: 1; } body::before, body::after { left: 0; right: 15px; height: 1px; width: 100%; } body::before { top: 15px; } body:after { bottom: 15px; } html::before, html::after { height: 100%; bottom: 15px; top: 0; width: 1px; } html::before { left: 15px; } html:after { right: 15px; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; border: none; } ::-webkit-scrollbar-thumb { background: rgba(117,96,96,0.50); box-shadow: none; } a { color: #856d4f; text-decoration: none; } /* 重要 */ strong { font-weight: bold; } /* 強調 */ em { background-color: #fdeeea; padding: 3px 5px; font-style: normal; } /* 画像 */ img { max-width: 100%; vertical-align: bottom; } /* 水平線 */ hr { margin: 10px 0; border: 1px solid #ccc; } h1 { display: block; margin-top: 15px; transform: rotate(7deg); } h1 span { background: linear-gradient(45deg, #999 50%, #000 50%); -webkit-background-clip: text; color: transparent; } h1 a { font-size: 1em; font-family: 刻明朝; letter-spacing: 4px; color: #ab5271; text-transform: uppercase; } h2 { font-size: .7em; color: #ABABAB; margin-bottom: 10px; text-transform: uppercase; } h2::before { content: attr(data-txt); font-family: 刻明朝; color: #7e7e7e; padding-bottom: 15px; background: linear-gradient(140deg, #cdcdcd 0% 50%, #968979 50%); background-repeat: no-repeat; background-size: 35px 4px; background-position: center 35px; font-size: 1.4em; display: block; text-transform: lowercase; } .title { margin-bottom: 15px; font-size: 1.3em; font-family: 刻明朝; letter-spacing: 3px; color: #ab5271; } .title a { color: #ab5271; } h3 { font-size: .9em; font-family: 刻明朝; display: inline-block; line-height: 70px; color: #4B4B4B; background: #fff; box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.07) inset; position: absolute; top: -35px; left: calc(50% - 35px); width: 70px; height: 70px; border-radius: 50%; text-align: center; } h4 { font-size: 1.1em; color: #968979; text-align: center; margin: 15px auto; padding-bottom: 25px; background: linear-gradient(140deg, #cdcdcd 0% 50%, #968979 50%); background-repeat: no-repeat; background-size: 35px 4px; background-position: center 35px; display: block; } .border { background: linear-gradient(rgba(0, 0, 0, 0.00) 60%, rgba(195, 195, 195, 0.40) 40%); } .wrap { width: 100%; } .wrap::before { content: ""; background: linear-gradient(45deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.03) 75%, rgba(0, 0, 0, 0.03)), linear-gradient(-45deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.03) 75%, rgba(0, 0, 0, 0.03)), url("画像のURL"); background-size: 60px 60px; position: fixed; top: 0; background-repeat: repeat, repeat; filter: brightness(1.10) opacity(90%); z-index: -1; width: 100%; height: 100%; } .wrap::after { content: ""; position: fixed; background: #4e4a47; width: 100%; height: 20vh; bottom: 0; z-index: -1; } header { height: 70vh; width: 90%; display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; background: url("画像のURL") no-repeat center / contain; max-width: 650px; margin: 0 auto; } .sub { font-size: .9em; position: relative; top: 10px; } section { display: flex; flex-direction: column; text-align: center; margin: 10px auto 110px; padding: 15px; background: #fff; border-radius: 10px; max-width: 650px; width: 90%; position: relative; box-shadow: rgba(0, 0, 0, 0.30) 0 0 15px 0; } section:not(:first-of-type)::after { content: ""; position: absolute; background: url("画像のURL") no-repeat center / contain; display: block; width: 40px; height: 80px; left: calc(50% - 20px); top: -95px; } section:last-of-type { margin-bottom: 20px; } .inner { text-align: left; padding: 30px 10px 10px; } .contents { text-align: left; padding: 0 10px 10px; word-break: break-all; } .list_inline { list-style: none; } .list_inline li { display: inline; color: #7e7e7e; word-wrap: break-word; word-break: initial; line-height: 2.5; padding-right: 5px; } .list_inline li:not(:last-child):after { content: "|"; padding-left: 10px; opacity: .5; position: relative; top: -1px; } .list_inline a::before, .list_block a::before { content: ""; padding-left: 3px } .list_inline a, .list_block a { color: #968979; } .list_block { columns: 2 auto; } .list_block li { display: block; line-height: 2.5; } .list_block li a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .maintext { font-size: 1em; line-height: 2.3; margin: 90px auto 20px; padding: 40px 25px; background: #fff; border-radius: 10px; max-width: 650px; width: 90%; position: relative; box-shadow: rgba(0, 0, 0, 0.30) 0 0 15px 0; } .text > p { margin-top: 50px; text-align: right; font-size: .9em; } .text_nav { list-style: none; margin: 30px auto 0; text-align: center; } .text_nav li { display: inline-block; margin-right: 20px; } .text_nav li:last-child { margin-right: initial; } .footer { padding: 15px 0; text-align: center; } .footer li { list-style: none; display: inline-block; color: rgba(145, 145, 145, 0.75); } .footer li a { padding: 0 5px; color: #fff; } /* メディアクエリ */ @media (orientation: landscape) and (max-width: 823px) { h1 a { font-size: 1em; } h1::before { top: 29px; left: -6px; font-size: .9em; letter-spacing: 6px; } header { margin: 20px auto 50px; } } @media screen and (min-width:768px) and (max-width:820px) { body { font-size: 1.6em; } header { height: 65vh; } .text { max-height: 100%; } } @media screen and (max-width:767px) { body::before { top: 10px; } body:after { bottom: 10px; } html::before, html::after { height: 100%; } html::before { left: 10px; } html:after { right: 10px; } body { font-size: 1.2em; } header { height: 65vh; } .list_block { columns: 1; } .text { max-height: 100%; } h1 { font-size: 1.4em; } } </style>
copy
HTML(index)
<div class="wrap"> <header> <h1><a href="index.html">eg<span>o</span>ism</a></h1> <p class="sub">last up - 2022/01/</p> </header> <section> <h3>info</h3> <div class="inner"> コンテンツページのテンプレートです。<br> <strong class="border">画像</strong>は<a href="https://pixabay.com/images/id-6539381/">Pixabay</a>様からお借りしたものを加工しています<br> <strong class="border">フォント</strong>は<a href="https://leafscape.be/">Leafscape</a>様より刻明朝を、<a href="https://fonts.google.com/">Google Fonts</a>様よりNoto Sans JPをお借りしています <ul class="list"> <li><a href="text.html">サンプルテキスト</a></li> <li><a href="#source">source code</a></li> </ul> </div> </section> <section> <h2 data-txt="01">episode</h2> <p class="title"><a href="">テキストタイトル</a></p> <div class="contents">リンクを貼って一話ずつのレイアウトもできます</div> </section> <section> <h2 data-txt="02">chapter</h2> <p class="title">テキストタイトル</p> <div class="contents"> <ul class="list_inline"> <li>01.<a href="">愛読書の印象</a></li> <li>02.<a href="">アグニの神</a></li> <li>03.<a href="">カルメン</a></li> <li>04.<a href="">海のほとり</a></li> <li>05.<a href="">機関車を見ながら</a></li> <li>06.<a href="">悪魔</a></li> <li>07.<a href="">蜘蛛の糸</a></li> </ul> <br> <ul class="list_block"> <li>01.<a href="">愛読書の印象</a></li> <li>02.<a href="">アグニの神</a></li> <li>03.<a href="">カルメン</a></li> <li>04.<a href="">海のほとり</a></li> <li>05.<a href="">機関車を見ながら</a></li> <li>06.<a href="">悪魔</a></li> <li>07.<a href="">蜘蛛の糸</a></li> </ul> <br> チャプター形式にしたい場合はリスト表示など<br> 横並びリストは<ul class="list_inline">、二列縦並びは<ul class="list_block">にすれば上記のような表示になります </div> </section> <ul class="footer"> <li>Template by<a href="https://as.lclla.com/" target="_blank">Luca</a></li> </ul> </div>
copy
HTML(text)
<div class="wrap"> <div class="maintext"> <div class="text"> <h3>01</h3> <h4>夕映えのむこうの国</h4> 一 <br> 昔々、一人の王女がおりました。さて、この王女は夕映えの遥か彼方の美しい国に住まい、永久とわの若さと尊き家名を継いでいました。とても裕福で、宮殿は隅々まで大理石やアラバスターやその他贅を凝らした造りでした。ですが、王女の何が一番素晴らしかったかというと、その妙なる美しさ――夕映えのこちら側の世界では誰も目にしたことがないような美しさでした。王女の美しさは光り輝く心の美しさにあったのです。身体は魂を覆うヴェールに過ぎず、王女の完璧な心の光をそのまま外見そとみに顕していました。ちょうど、澄んだ水が輝く陽の光を通すように。王女がどれほど美しかったか、私には語れません。髪の毛や目の色も、花のかんばせもまた。王女に会ったことがある男は沢山いて、それぞれのやり方で説明しているのですが、その説明があまりに人によりけりなので、幾つか読むだけでもう、王女の恋人達が残した記録から容姿を再現するのは無理だと悟りました。 それというのも、王女について書いた男は誰もが王女に恋していたからです。もちろん王女の顔を見て恋に落ちないでいられる男はいなかったのですが。暁のように麗しいという人も、夜のように暗いという人も、アレグロのように陽気で楽しいという人も、ペンセローゾ(*1)のように悲しく微かで甘美だという人もいました。ですが誰からも等しく、全ての美のエッセンスにして中核に見えたのです。思い描ける中で最も純粋で、貴く、気高く、威光のある存在に。王女に恋した全員分を書こうとすると本が何巻あっても足りないので、三人分だけ話しましょう。典型的な三人で、大層目立った来歴があるからです。 他の恋人みながそうだったように、この三人の男も旅人でした。父や祖父から聞かされた美しい淑女に会おうと、遠くの国々からこの夕映えのむこうの国へとやって来たのです。父祖がいうには、この淑女は遠い古代ギリシャに遡る不滅の神々の血を引くために、いつまでも若さを失うことがありません。 三人の男がどれ程長く王女の国に留まったのかは存じませぬが、その間に王女をとても、とても愛するようになりました。そして三人が遂にこの国を去らねばならなくなった時――「死者」でない限り誰も夕映えの彼方には長く留まることができないからですが――王女はそれぞれに美しい小鳥を一羽ずつ渡しました。可愛い生きた鳥達で、この上なく甘い歌を歌いました。太陽神アポローン御自ら歌をお教えになったのです。王女の美しさを語れないのと同様に、この歌の甘美さも言い表すことができません。 それとともに王女は、旅人たちに、恐れぬ心と雄々しい希望を持ちなさいと告げました。ありったけの勇気を奮って立ち向かわねばならない試練が待っているが、それを乗り越えれば大変なご褒美があるだろうと。「さあ、」王女は言いました。「妾わらわを愛すことを覚え、この地で妾とともに生きんと欲した者よ、汝らの騎士としての精神が試される時が来たのです。妾は決して手の届かぬ存在ではありませぬ。だが男子たる者、淑女を得んとせば、まず高貴なる任務を果たし己の忠誠を示さねばならぬのです。これから汝らが向かう世界は蜃気楼と幻の国に他ならず、ただ日輪のこちら側に来たことのない者どもにとってのみ真実に見えるのです。汝らを待ち構えるのは妖怪ども、残忍なヒュドラ、キメラ、火を吐く奇妙なドラゴンどもが蔓延る荒野。美しい夏の海の影なす小島を行く時は、肥沃なる港で狡猾なセイレーンの歌が聞こえます。山を行けば野蛮極まる盗賊やゴブリンや人を貪り食うのが大好きなオーガに雄々しく立ち向かわねばなりませぬ。されど恐れることはないのです。全てが幻なのですから。これらを倒すには剣も槍も必要がなく、専ら忠誠心と揺るがぬ決意があれば事足りるのです。目を曇らさぬように、心を惑わされぬようにし、数多の罠を躱して、無傷で妾が許にお戻りなさい。そのとき汝に授ける報酬の価値と至高さをゆめ疑ってはなりませぬ。孤立無援だと思わぬように。一人一人に手渡した案内人兼監視役の声をよく聞き、指し示す所に従いなさい。」 <p>続きが気になる方は<a href="https://www.aozora.gr.jp/cards/001882/card57998.html" target="_blank">こちら</a>から</p> <ul class="text_nav"> <li><a href="">prev</a></li> <li><a href="index.html">home</a></li> <li><a href="">next</a></li> </ul> </div> </div> <ul class="footer"> <li><a href="https://www.aozora.gr.jp/" target="_blank">青空文庫</a>、</li> <li><a href="https://www.aozora.gr.jp/cards/001882/card57998.html" target="_blank">夕映えのむこうの国</a>より引用</li> </ul> </div>
copy
Template by
Luca