Olivia

ここにお知らせなど

About this template

04/01: 英雄の器 New
03/27: 影
03/14: カルメン

PC.レスポンシブ対応のテンプレートです。

お借りした素材
フォントGoogle Fonts様からBerkshire Swashをお借りしています。
画像pixabay様からお借りしています。
アイコンICOOON MONO様からお借りしています。
サンプルテキスト青空文庫様からお借りしています。

タグの種類

strongタグ
emタグ

Main contents

縦並び

2021/04/01愛読書の印象
2021/03/01秋
2021/02/01アグニの神

番号付き

横並び

Bookmark

: サイト名; サイトの説明など
: サイト名; サイトの説明など

Contact

owner: ハンドルネーム
site name: Olivia
url: https://xxx.jp
banner

source code

ヘッダー画像

アイコン

HEAD

/*-- templale by Luca --*/
/* temp_name Olivia */
/*-- URL : https://as.lclla.com/ --*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
}

*::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

/* スクロールバー　*/
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background-color: #565255;
  border: none;
}

::-webkit-scrollbar-thumb {
  background: rgba(149, 144, 147, 0.76);
  box-shadow: none;
}

/* ここまで */
body {
  font: 1.4em/2"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  background: #565255;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  letter-spacing: 2px;
  word-wrap: break-word;
}

/* リンク色 */
a {
  color: #9BB7A2;
  text-decoration: none;
}

/* 画像 */
img {
  max-width: 100%;
  vertical-align: bottom;
}

/* 水平線 */
hr {
  border-top: 1px solid;
  margin: 10px 0;
}

/* 強調 */
em {
  background-color: #BD6D8B;
  color: #fff;
  font-style: normal;
}

/* 重要 */
strong {
  font-weight: bold;
}

.dating {
  margin-right: 20px;
  border-bottom: 1px solid;
}

/* Newマーク */
.mark {
  color: #DB9192;
}

article {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  width: 100%;
}

h1 {
  font: 2.5em 'Berkshire Swash', cursive;
  text-shadow: 2px 2px 0 #E6E6E9, 4px 4px 0 #000;
}

h2 {
  font: 1.2em/2 'Berkshire Swash', cursive;
  color: #f4f4f4;
  background: #030303;
  position: absolute;
  top: 25px;
  left: -10px;
  width: 220px;
  text-align: center;
}

h3 {
  display: inline-block;
  font-size: 1em;
  line-height: 1.9;
  font-weight: normal;
  color: #3D4A5A;
  background: repeating-linear-gradient(135deg, #DBDBDB, #DBDBDB 3px, rgba(229, 233, 237, 0.69) 0px, rgba(229, 233, 237, 0.69) 6px);
  padding: 0 3px;
  margin: 15px 0
}

h4 {
  font-size: 1.1em;
  color: #608569;
  text-align: right;
  font-weight: normal;
  margin: 30px 20px;
  padding-right: 20px;
  border-bottom: 1px solid #414D64;
}

header {
  position: fixed;
  width: 40%;
  height: calc(100% - 30px);
  background: #3d4a5a;
  padding: 15px;
  top: 15px;
  bottom: 15px;
  right: 15px;
}

.head-stripe {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  padding: 15px;
  height: 100%;
}

.head-stripe::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  right: 6px;
  background: #3d4a5a;
  z-index: -1;
}

.head-stripe::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(229, 233, 237, 0.69) 0px, rgba(229, 233, 237, 0.69) 6px);
  z-index: -2;
}

.top-img {
  background: url(画像のURL) no-repeat 70%/cover;
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #D6B893;
}

.notice {
  color: #ccc;
  font-size: .8em;
  text-align: center;
  margin: 5px auto;
  padding: 5px;
  border-left: 1px solid;
  border-bottom: 1px solid;
  height: auto;
  width: 200px;
}

nav {
  position: relative;
  z-index: 10;
}

.menu {
  list-style: none;
}

.menu li a {
  font-size: 1.2em;
  color: #D6B893;
}

.wrapper {
  margin-right: calc(40% + 15px);
  width: 100%;
  padding: 15px 0;
}

section {
  margin: 0 auto;
  width: calc(100% - 60px);
}

.inner {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
  padding: 80px 40px 40px;
  position: relative;
  max-height: 100%;
}

.inner>.contents {
  flex: 1 0 50%;
}

.inner:nth-child(even) {
  background: #3d4a5a;
  color: #d6b893;
  outline: solid 3px #E9D6C1;
  outline-offset: -10px;
}

.inner:nth-child(odd) {
  background: #f8eddb;
  color: #4E5F74;
  outline: solid 3px #414d64;
  outline-offset: -10px;
}

.inner::before, .inner::after {
  content: "";
  display: block;
  position: absolute;
  border: 50px solid transparent;
}

.inner::before {
  border-top: 50px solid #565255;
  top: -60px;
  right: -65px;
  box-shadow: 0px -7px 6px -9px black;
  transform: rotate(-135deg);
}

.inner::after {
  border-bottom: 50px solid #565255;
  bottom: -60px;
  left: -60px;
  box-shadow: 0px 7px 6px -9px black;
  transform: rotate(-135deg);
}

.contents {
  padding: 0 10px;
  min-width: 260px;
  text-align: left;
}

.box {
  border: solid 1px rgba(89, 111, 99, 0.60);
  margin: 10px 0;
  padding: 5px;
  width: 100%;
  max-width: 400px;
}

/* 更新履歴*/
.update {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-bottom: 20px;
  overflow-y: scroll;
  height: 70px;
  scrollbar-width: thin;
  scrollbar-color: rgba(133, 129, 131, 0.39) rgba(255, 255, 255, 0.00);
}

.update dt::after {
  content: "-";
  margin: 0 5px;
}

/* 展示リスト 縦並び */
.list_block li {
  display: block;
  width: auto;
}

/* 展示リスト 横並び */
.list_inline li {
  display: inline;
}

.list_inline li:not(:last-child):after {
  content: "|";
  padding: 0 2px 0 8px;
  position: relative;
  top: -1px;
}

/* 展示リスト　番号付き */
.contents ol {
  list-style-type: decimal-leading-zero;
  list-style-position: inside;
}

/*ブックマーク*/
.link {
  margin-bottom: 10px;
}

.link li {
  display: inline-block;
  margin: 3px 0;
}

.link a {
  color: #9BB7A2;
  border-bottom: 1px solid;
}

/* リンク　説明 */
.imglink dt {
  margin-top: 3px;
}

.imglink dd {
  margin-left: 10px;
  padding-left: 5px;
  border-left: 2px solid;
}

/* アバウトリンク */
.grid_link {
  display: grid;
  grid-template-columns: auto 1fr;
  line-height: 2.2;
  margin-bottom: 20px;
}

.grid_link dt {
  margin-bottom: 10px;
  padding: 0 8px;
  text-align: center;
  color: #D6B893;
  background: rgba(84, 102, 89, 0.84);
}

.grid_link dd {
  margin-left: 20px;
}

/* メールフォーム　+　ラジオボタン関連 */
form {
  width: inherit;
}

form h3 {
  margin: 0 0 15px 0;
}

input[type="text"], input[type="submit"], input[type="reset"], textarea, button, select {
  font-family: inherit;
  font-size: 100%;
  height: initial;
  margin-bottom: 15px;
  color: #3D4A5A;
  padding: 7px;
  border: 1px solid;
  appearance: none;
  -webkit-appearance: none;
  border-radius: initial;
  box-shadow: initial;
  background: #B1B8C0;
  font-weight: normal;
}

input::placeholder, textarea::placeholder {
  color: #3D4A5A;
  letter-spacing: 1px;
}

input:focus, textarea:focus {
  outline: none;
}

#name, #email, .comment, .btn {
  width: 100%;
}

.btn {
  color: #3D4A5A;
  background: #B1B8C0;
  width: 100%;
}

.radioArea {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}

.radioArea input[type="radio"] {
  display: none;
}

/*  チェックボックス */
.radioArea input[type="radio"]+label {
  width: calc(100% / 3);
  color: #3D4A5A;
  background: rgba(177, 184, 192, 0.60);
  border: 1px solid #3D4A5A;
  text-align: center;
  margin-right: 5px;
  cursor: pointer;
}

.radioArea input[type="radio"]+label:last-child {
  margin-right: initial;
}

/* 選択されたチェックボックス直後のlabel */
.radioArea input[type="radio"]:checked+label {
  background: #B1B8C0;
  color: #3D4A5A;
}

/* チェックボックス hover */
.radioArea input[type="radio"]:not(:checked)+label:hover {
  background: #B1B8C0;
  color: #fff;
}

/* 名前変換フォーム */
.name_chenge {
  width: 100%;
  padding: 0 10px;
}

.name_chenge h3 {
  margin-bottom: 20px;
}

.name_chenge input[type="text"] {
  width: 160px;
  padding: 7px;
}

.name_chenge input[type="submit"], .name_chenge input[type="reset"] {
  width: 75px;
  padding: 5px;
  height: initial;
}

/* textページ */
.text {
  font-size: 1.1em;
  line-height: 2.2;
  background: #f8eddb;
  color: #414d64;
  margin: 50px auto;
  padding: 70px 60px 40px;
  max-width: 800px;
  outline: solid 3px;
  outline-offset: -10px;
  text-align: center;
}

.text_nav {
  list-style: none;
  text-align: center;
  margin-top: 30px;
}

.text_nav li {
  display: inline-block;
  margin-right: 20px;
}

.text_nav li:last-child {
  margin-right: initial;
}

.contents>.atogaki {
  font-size: .9em;
  text-align: right;
  margin-top: 40px;
}

/* フッター */
footer {
  color: #ADADAD;
  text-align: center;
  padding: 10px 0;
  list-style: none;
}

footer li {
  display: inline-block;
}

footer li a {
  padding: 0 3px;
}

/*--source code--*/
.list {
  padding: 10px 0 10px 25px;
  list-style: disc;
}

.list a {
  border-bottom: 1px solid;
}

.source {
  white-space: pre-wrap;
  text-align: left;
  width: 100%;
  padding: 3px;
  border: 1px solid;
  height: 80px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.btn-clipboard {
  display: block;
  padding: 5px;
  width: 80px;
  text-transform: uppercase;
  color: #F8EDDB;
  background: #414D64;
  cursor: pointer;
}

.btn-clipboard:hover {
  color: #414D64;
  background: #DADDE1;
}

.filter img {
  filter: invert(100%);
}

p>a>img {
  margin-top: 10px;
  width: auto;
  max-height: 100px;
}

/* メディアクエリ */
@media screen and (max-width:912px) {
  body {
    font-size: 1.6em;
  }

article {
    overflow-x: hidden;
    padding: 10px 20px 0;
  }

header {
    width: 100%;
    height: 85vh;
    position: relative;
    left: 0;
  }

.head-stripe {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
  }

.head-stripe::before {
    z-index: 2;
  }

.head-stripe::after {
    z-index: 1;
  }

h1 {
    width: 100%;
    text-align: center;
    z-index: 2;
  }

h4 {
    display: inline-block;
    padding-right: initial;
    border: initial;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }

.top-img {
    height: 200px;
    width: 200px;
    z-index: 3;
  }

.notice {
    z-index: 2;
  }

.wrapper {
    width: 100%;
    margin: 80px auto 0;
    padding-bottom: 0;
  }

section {
    width: calc(100% - 0px);
  }

.inner {
    margin: 50px 5px;
    padding: 80px 20px 40px;
  }

.button_container {
    position: fixed;
    top: 0;
    right: 20px;
    padding: 10px 5px;
    width: 60px;
    height: 55px;
    text-align: center;
    background: #000;
    border-radius: 2px 0 0 0;
    cursor: pointer;
    z-index: 99;
  }

.button_container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 20px solid #000;
    z-index: 10;
  }

.button_container::after {
    content: '';
    display: inline-block;
    background: url(画像のURL) no-repeat center / contain;
    height: 40px;
    width: 40px;
    z-index: 99;
  }

.overlay {
    position: fixed;
    background: #171717;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
    z-index: 10;
  }

.overlay.open {
    opacity: .9;
    visibility: visible;
    height: 100%;
    z-index: 5;
  }

.overlay.open li {
    -webkit-animation: fade .5s ease forwards;
    animation: fade .5s ease forwards;
    -webkit-animation-delay: .35s;
    animation-delay: .35s;
  }

.overlay.open li:nth-of-type(2) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
  }

.overlay.open li:nth-of-type(3) {
    -webkit-animation-delay: .45s;
    animation-delay: .45s;
  }

.overlay.open li:nth-of-type(4) {
    -webkit-animation-delay: .50s;
    animation-delay: .50s;
  }

.overlay.open li:nth-of-type(5) {
    -webkit-animation-delay: .55s;
    animation-delay: .55s;
  }

.overlay nav {
    height: 80%;
    top: 55%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
  }

.overlay ul {
    height: 100%;
  }

.overlay ul li {
    display: block;
    height: calc(100% / 5);
    position: relative;
    opacity: 0;
  }

.overlay ul li a {
    font: 1.5em 'Berkshire Swash', cursive;
    color: #F8EDDB;
    cursor: pointer;
  }

.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
    width: 100%;
  }

.menu li {
    display: none;
  }

.text {
    margin: 30px auto;
    padding: 50px 40px;
    max-height: 100%;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
    bottom: 5%;
  }

100% {
    opacity: 1;
    bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .inner>.contents {
    flex-basis: 100%;
  }

.text {
    margin: 30px 15px;
  }
}

@media screen and (max-width: 600px) {
  body {
    font-size: 1.2em;
  }

article {
    padding: 0 10px;
  }

header {
    top: 10px;
  }

.top-img {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid #D6B893;
  }

h2 {
    left: -7px;
  }

section {
    width: calc(100% - 0px);
  }

.inner {
    margin: 50px 0 50px;
    padding: 80px 12px 40px;
  }

.contents {
    padding: 0 10px;
  }

.text {
    padding: 30px 18px;
    margin: 50px 10px;
  }
}

@media (orientation: landscape) and (max-width: 823px) {
  body {
    font-size: 1.3em;
  }

header {
    height: 90vh;
  }

.top-img {
    display: none;
  }
}
</style>

HTML(index)

<p id="top"></p>
<article>
  <header>
    <div class="head-stripe">
      <h1><a href="index.html">Olivia</a></h1>
      <div class="top-img"></div>
      <p class="notice">ここにお知らせなど</p>
      <div class="button_container" id="toggle"></div>
      <div class="overlay" id="overlay">
        <nav class="overlay-menu" id="menu">
          <ul class="menu">
            <li><a href="#top">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#main">Main</a></li>
            <li><a href="#bkm">Bookmark</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <div class="wrapper">
    <section>
      <div class="inner" id="about">
        <h2>About this template</h2>
        <div class="contents">
          <dl class="update">
            <dt>04/01</dt>
            <dd>英雄の器 <span class ="mark">New</span> </dd>
            <dt>03/27</dt>
            <dd>影</dd>
            <dt>03/14</dt>
            <dd>カルメン</dd>
          </dl>
          PC.レスポンシブ対応のテンプレートです。<br>
          <hr>
        </div>
        <div class="contents"> <em>お借りした素材</em><br>
          <strong>フォント</strong><a href="https://fonts.google.com/" target="_blank">Google Fonts</a>様からBerkshire Swashをお借りしています。<br>
          <strong>画像</strong><a href="https://pixabay.com/images/id-1149909/" target="_blank">pixabay</a>様からお借りしています。<br>
          <strong>アイコン</strong><a href="https://icooon-mono.com/" target="_blank">ICOOON MONO</a>様からお借りしています。<br>
          <strong>サンプルテキスト</strong><a href="https://www.aozora.gr.jp/" target="_blank">青空文庫</a>様からお借りしています。<br>
          <h3>タグの種類</h3>
          <div class="box"> <strong>strongタグ</strong> <br>
            <em>emタグ</em>
          </div>
        </div>
      </div>
      <div class="inner" id="main">
        <h2>Main contents</h2>
        <form class="name_chenge">
          <h3>Name change</h3>
          <br>
          <input type="text" size="16" placeholder="名字">
          <input type="text" size="16" placeholder="名前">
          <br>
          <input type="submit" value="登録" class="chenge_btn">
          <input type="reset" value="削除" class="chenge_btn">
        </form>
        <div class="contents">
          <h3>縦並び</h3>
          <ul class="list_block">
            <li><span class="dating">2021/04/01</span><a href="#">愛読書の印象</a></li>
            <li><span class="dating">2021/03/27</span><a href="#">秋</a></li>
            <li><span class="dating">2021/02/01</span><a href="#">アグニの神</a></li>
          </ul>
          <h3>番号付き</h3>
          <ol>
            <li><a href="#">悪魔</a></li>
            <li><a href="#">浅草公園</a></li>
            <li><a href="#">海のほとり</a></li>
            <li><a href="#">永久に不愉快な二重生活</a></li>
          </ol>
        </div>
        <div class="contents">
          <h3>横並び</h3>
          <ul class="list_inline">
            <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>
            <li><a href="#">黄粱夢</a></li>
          </ul>
        </div>
      </div>
      <div class="inner" id="bkm">
        <h2>Bookmark</h2>
        <div class="contents">
          <ul class="link">
            <li><a href="#"><img src="画像のURL" alt="サンプル"></a></li>
            <li><a href="#"><img src="画像のURL" alt="サンプル"></a></li>
            <li><a href="#"><img src="画像のURL" alt="サンプル"></a></li>
            <li><a href="#"><img src="画像のURL" alt="サンプル"></a></li>
          </ul>
          <ul class="link">
            <li><a href="#">リンク</a></li>
            <li><a href="#">リンク</a></li>
            <li><a href="#">リンク</a></li>
          </ul>
        </div>
        <div class="contents">
          <dl class="imglink">
            <dt><a href="#" class="img"><img src="画像のURL" alt="サンプル"></a></dt>
            <dd>サイト名</dd>
            <dd>サイトの説明など</dd>
            <dt><a href="#" class="img"><img src="画像のURL" alt="サンプル"></a></dt>
            <dd>サイト名</dd>
            <dd>サイトの説明など</dd>
          </dl>
        </div>
      </div>
      <div class="inner" id="contact">
        <h2>Contact</h2>
        <div class="contents">
          <dl class="grid_link">
            <dt>owner</dt>
            <dd>ハンドルネーム</dd>
            <dt>site name</dt>
            <dd>Olivia</dd>
            <dt>url</dt>
            <dd>https://xxx.jp</dd>
            <dt>banner</dt>
            <dd><img src="画像のURL" alt="サンプル"></dd>
          </dl>
        </div>
        <p id="mail"></p>
        <div class="contents"> 
          
          <form action="#" method="post">

<h3>Mail form</h3>
            <input type="text" size="30" id="name" value="" placeholder="your name">
            <br>
            <input type="text" size="30" id="email" value="" placeholder="e-mail">
            <br>
            <textarea name="コメント" rows="4" placeholder="sample" class="comment"></textarea>
            <br>
            <div class="radioArea">
              <input type="radio" id="c1" name="返信" value="返信必要" checked="checked">
              <label for="c1" onclick="">返信必要</label>
              <input type="radio" id="c2" name="返信" value="返信不要">
              <label for="c2" onclick="">返信不要</label>
              <input type="radio" id="c3" name="返信" value="どちらでも">
              <label for="c3" onclick="">どちらでも</label>
            </div>
            <input type="submit" value="send" class="btn">
          </form>
           
        </div>
      </div>
      <footer>
        <ul>
          <li>Template by<a href="https://as.lclla.com/" target="_blank">Luca</a></li>
        </ul>
      </footer>
    </section>
  </div>
</article>
<script>
$(function () {
	$('a[href^="#"]').click(function () {
		var speed = 400;
		var href = $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({
			scrollTop: position
		}, speed, "swing");
		return false;
	});
	$('#toggle').click(function () {
		$(this).toggleClass('active');
		$('#overlay').toggleClass('open');
	});
	$('#menu a[href]').on('click', function (event) {
		$('#toggle').trigger('click');
	});
});
</script>

HTML(text)

<p id="top"></p>
   <section>
      <div class="text">
         <h4>夕映えのむこうの国</h4>
         <div class="contents"> 一 <br>
            昔々、一人の王女がおりました。さて、この王女は夕映えの遥か彼方の美しい国に住まい、永久とわの若さと尊き家名を継いでいました。とても裕福で、宮殿は隅々まで大理石やアラバスターやその他贅を凝らした造りでした。ですが、王女の何が一番素晴らしかったかというと、その妙なる美しさ――夕映えのこちら側の世界では誰も目にしたことがないような美しさでした。王女の美しさは光り輝く心の美しさにあったのです。身体は魂を覆うヴェールに過ぎず、王女の完璧な心の光をそのまま外見そとみに顕していました。ちょうど、澄んだ水が輝く陽の光を通すように。王女がどれほど美しかったか、私には語れません。髪の毛や目の色も、花のかんばせもまた。王女に会ったことがある男は沢山いて、それぞれのやり方で説明しているのですが、その説明があまりに人によりけりなので、幾つか読むだけでもう、王女の恋人達が残した記録から容姿を再現するのは無理だと悟りました。
            それというのも、王女について書いた男は誰もが王女に恋していたからです。もちろん王女の顔を見て恋に落ちないでいられる男はいなかったのですが。暁のように麗しいという人も、夜のように暗いという人も、アレグロのように陽気で楽しいという人も、ペンセローゾ(*1)のように悲しく微かで甘美だという人もいました。ですが誰からも等しく、全ての美のエッセンスにして中核に見えたのです。思い描ける中で最も純粋で、貴く、気高く、威光のある存在に。王女に恋した全員分を書こうとすると本が何巻あっても足りないので、三人分だけ話しましょう。典型的な三人で、大層目立った来歴があるからです。
            他の恋人みながそうだったように、この三人の男も旅人でした。父や祖父から聞かされた美しい淑女に会おうと、遠くの国々からこの夕映えのむこうの国へとやって来たのです。父祖がいうには、この淑女は遠い古代ギリシャに遡る不滅の神々の血を引くために、いつまでも若さを失うことがありません。
            三人の男がどれ程長く王女の国に留まったのかは存じませぬが、その間に王女をとても、とても愛するようになりました。そして三人が遂にこの国を去らねばならなくなった時――「死者」でない限り誰も夕映えの彼方には長く留まることができないからですが――王女はそれぞれに美しい小鳥を一羽ずつ渡しました。可愛い生きた鳥達で、この上なく甘い歌を歌いました。太陽神アポローン御自ら歌をお教えになったのです。王女の美しさを語れないのと同様に、この歌の甘美さも言い表すことができません。
            それとともに王女は、旅人たちに、恐れぬ心と雄々しい希望を持ちなさいと告げました。ありったけの勇気を奮って立ち向かわねばならない試練が待っているが、それを乗り越えれば大変なご褒美があるだろうと。「さあ、」王女は言いました。「妾わらわを愛すことを覚え、この地で妾とともに生きんと欲した者よ、汝らの騎士としての精神が試される時が来たのです。妾は決して手の届かぬ存在ではありませぬ。だが男子たる者、淑女を得んとせば、まず高貴なる任務を果たし己の忠誠を示さねばならぬのです。これから汝らが向かう世界は蜃気楼と幻の国に他ならず、ただ日輪のこちら側に来たことのない者どもにとってのみ真実に見えるのです。汝らを待ち構えるのは妖怪ども、残忍なヒュドラ、キメラ、火を吐く奇妙なドラゴンどもが蔓延る荒野。美しい夏の海の影なす小島を行く時は、肥沃なる港で狡猾なセイレーンの歌が聞こえます。山を行けば野蛮極まる盗賊やゴブリンや人を貪り食うのが大好きなオーガに雄々しく立ち向かわねばなりませぬ。されど恐れることはないのです。全てが幻なのですから。これらを倒すには剣も槍も必要がなく、専ら忠誠心と揺るがぬ決意があれば事足りるのです。目を曇らさぬように、心を惑わされぬようにし、数多の罠を躱して、無傷で妾が許にお戻りなさい。そのとき汝に授ける報酬の価値と至高さをゆめ疑ってはなりませぬ。孤立無援だと思わぬように。一人一人に手渡した案内人兼監視役の声をよく聞き、指し示す所に従いなさい。」
            <p class="atogaki">続きが気になる方は<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="">home</a></li>
               <li><a href="">next</a></li>
            </ul>
         </div>
      </div>
      <footer>
         <ul>
            <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>
      </footer>
   </section>