ブログトップ 記事一覧 ログイン 無料ブログ開設

中西洋一: a.k.a. gintacat

2014-02-11

HTML講習用 HTML5ひな形

16:29

HTML5ひな形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

CSS3ひな形

selector name {
box-sizing: content-box;
box-shadow: none;
width: ;
height: ;
margin: ;
padding: ;
border-style: none;
border-color: ;
border-width: ;
border-radius: 0;
background-color: transparent;
background-image: none;
color: ;
font-size: ;
font-weight: ;
font-family : ;
line-height: ;
text-align: ;
letter-spacing: normal;
text-indent: 0;
text-shadow: none;
writing-mode: horizontal-tb;
}
トラックバック - http://d.hatena.ne.jp/gintacat/20140211

2013-12-18

Kindleダイレクト・パブリッシング用 HTMLかんたんひな形(改訂版)

21:25

Kindleダイレクト・パブリッシングで出版するための(CSS付き)HTMLのひな形です。

写真や挿絵がなく、文字だけのコンテンツであればHTMLをそのままアップロードします。

写真や挿絵がある場合は、HTMLと写真や挿絵の画像データを(フォルダに入れずにそのまま)ZIP圧縮してアップロードします。

Kindleダイレクト・パブリッシング用 HTMLかんたんひな形(改訂版)について

  • 縦書き、テキスト主体コンテンツを想定しています。
  • 基本的に UAデフォルトで表示することにし、必要最小限と思うスタイルシートだけを記述しています。
  • section, article 要素をマークアップせず、見出し要素のレベルでアウトラインを暗示しても表示に問題はありません。
  • section, article 要素をマークアップするときには、セクションの階層と見出レベルを合わせるようにしてください。
  • htmlファイルをアップロードする方法では、toc.ncx, nav.xhtmlKindle Paperwhite で言うと「移動」をタップした時に表示される目次)が作れません。「最初のページ」でハイパーリンク付き目次に戻るよう、扉ページは設けないことにします。
  • CSSプロパティについて、Amazon のドキュメントではベンダー識別子「-webkit-」を付けるようになっているので、必要なものについてはそのように書いていますが、いちおう、識別子なしで併記しておきます。

参考文献

使用を想定している要素とそのスタイルについて

  • header 要素には、h1 要素で示す本のタイトルと、nav 要素でマークアップするハイパーリンク付きの目次を含めることにします。
  • 見出しレベルと章立て
    • header 要素内の h1 要素が本のタイトル(フォントサイズ140%)
    • h2 要素が章のタイトル(フォントサイズ140%)
    • h3 要素が節のタイトル(フォントサイズ120%)
    • h4 要素が項のタイトル(フォントサイズ100%)
  • 段落をマークアップする p 要素内のテキストは、一行目に一文字分の字下げを行います。
  • 引用文をマークアップする blockquote 要素は、全体に字下げして表示します。
  • 囲み記事、補足記事などをマークアップする aside 要素は、角丸の罫線で囲って表示します。
  • footer 要素
    • いわゆる「奥付け」的な内容を想定しています。
    • 全体を罫線で囲むと同時に、フォントサイズを80%で表示します。
    • footer 要素内の定義リスト(dt 作成日 dd何年何月、のように使う)の dt 要素と dd 要素はインライン表示(display: inline)にしています。不細工ですが、ひな形に従って、ひとつの dl のなかに、ひと組の dt, dd でお願いします。
  • hr 要素を用いて改ページ(page-break-after)を行います。hr 要素は非表示(display: none)にしています。
  • 写真や挿絵(とキャプション)
    • 使用可能な画像形式は、GIF, BMP, JPEG, PNG, SVG
    • 透過させる場合には、8bit の透過 PNG のみ使用可能。
    • img 要素を figure 要素でマークアップしてください。
    • 写真や挿絵の下にテキストを回り込ませるには、figure 要素の class 属性に "floatTop" を指定してください。
    • 写真や挿絵の上にテキストを回り込ませるには、figure 要素の class 属性に "floatBottom" を指定してください。
    • 回り込ませないときは、class 属性を省略してください。
    • 写真や挿絵のキャプションは、figure 要素内に figcaption 要素としてマークアップしてください。
    • キャプションは写真や挿絵の下に、75%のフォントサイズ、横組み、センター合わせで表示されます。
  • 強調表現
    • em 要素でマークアップすると、傍点つきの文字で表示されます。
    • strong 要素でマークアップすると、太字のゴシック体で表示されます。
  • 半角英数字の文字組
    • 縦中横は、span 要素の class 属性に "tcy" を指定してマークアップしてください。
    • 欧文の直立表記は、span 要素の class 属性に "upright" を指定してマークアップしてください。

HTMLひな形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
/*縦書きに*/
body {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
/*ナビ要素内のリスト要素(目次)のマーカーを非表示に*/
nav ol {
    list-style-type: none;
}
/*見出し要素*/
h1 {
    font-size: 140%;
}
h2 {
    font-size: 140%;
}
h3 {
    font-size: 120%;
}
h4 {
    font-size: 100%;
}
/*段落のインデント*/
p {
    text-indent: 1em;
}
/*引用文(全体に字下げ)*/
blockquote {
    padding-top: 5%;
}
/*囲み記事、補足記事*/
aside {
    padding: 4%;
    border-style: solid;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    border-width: 2px;
    border-color: #999;
}
/*フッター要素*/
/*フッター要素の枠線など*/
footer {
    margin: 3%;
    padding: 3%;
    border-style: solid;
    border-width: 2px;
    border-color: #999;
    font-size: 80%;
}
/*フッター要素内の定義リスト*/
footer dt {
    display: inline;
}
footer dd {
    display: inline;
    margin-top: 1em;
}
/*改ページ*/
hr {
    page-break-after: always;
    display: none;
}
/*挿絵・写真とそのキャプション*/
/*テキストの回り込み*/
figure {
    margin: 0;
    padding-top:0; 
    padding-left:2%; 
    padding-right:2%; 
    padding-bottom:2%;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    display:inline;
    text-align: center;
}
figure.floatTop {
    float:left;
    margin: 0;
    padding-top:0; 
    padding-left:2%; 
    padding-right:2%; 
    padding-bottom:2%;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    display:inline;
    text-align: center;
}
figure.floatBottom { 
    float:right;
    margin: 0;
    padding-top:3%; 
    padding-left:2%; 
    padding-right:2%; 
    padding-bottom:0;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    display:inline;
    text-align: center;
}
/*キャプション*/
figcaption {
    font-size: 75%;
}
/*強調表現*/
/*傍点*/
em {
    -webkit-text-emphasis-style: sesame;
    text-emphasis-style: sesame;
}
/*ゴシック体太字*/
strong {
    font-weight: bold;
    font-family: sans-serief !important;
}
/*半角英数字の文字組*/
/*縦中横*/
span.tcy {
    -webkit-text-combine: horizontal;
    text-combine: horizontal;
}
/*半角英数字の縦書き*/
span.upright {
    -webkit-text-orientation: upright;
    text-orientation: upright;
}
</style>
<title>***</title>
</head>
<body>
<!-- 目次 -->
<header>
    <h1>***</h1>
    <nav>
        <ol>
            <li><a href="#***">***</a></li>
            <li><a href="#***">***</a></li>
        </ol>
    </nav>
</header>
<hr />
<!-- 本文 -->
<section>
    <h2 id="***">***</h2>
    <figure class="***">
        <img src="***" alt="***" width="***" height="***" />
        <figcaption>***</figcaption>
    </figure>
</section>
<hr />
<!-- 奥付 -->
<footer>
    <dl>
        <dt>***</dt>
            <dd>***</dd>
    </dl>
    <dl>
        <dt>***</dt>
            <dd>***</dd>
    </dl>
</footer>

</body>
</html>
トラックバック - http://d.hatena.ne.jp/gintacat/20131218

2012-11-29

Kindleダイレクト・パブリッシング用 HTMLかんたんひな形

| 11:38

楽天KoboSONYの新しいReaderを使い始めてから、Amazonにアクセスする機会が減っていましたが、Kindleが手元に届いたので、AmazonのサイトをチェックしているとKindleダイレクト・パブリッシングのページを見かけました。

サービスの概要は知っていましたが詳細に確認したことはありませんでした。あらためて見なおしてみると、なんだかとても簡単に電子書籍が出版できそう。で、試してみたら本当に簡単にできたので、情報をシェアします。

Kindleダイレクト・パブリッシングでは、HTMLファイルをアップロードするだけで、Kindle電子書籍フォーマットであるmobiファイルに変換してくれます。Microsoft Wordのファイルもmobiファイルに変換してくれるような説明がありますが(細かなレイアウトなどなどが)なかなか巧くいきません。HTMLで書いたほうがよほど簡単で早いと思いました。アップロードの際、

    1. HTMLファイル1枚のときは、そのままアップロードするだけ。
    2. 埋め込み画像などがファイルが複数あるときには、ひとつのzipファイルに圧縮してからアップロード。

するのですが、今回は「できるだけ簡単に」「HTMLCSSについて本格的に勉強したことがない人でもなんとかなる」という趣旨で、1枚のHTMLファイルだけでとりあえず電子書籍をつくるためのひな形としました。スタイルシートCSS)はHTMLファイルの「head」要素内に記述してあります。小説やエッセイなどであれば(挿絵や写真は使えませんが)このひな形で十分だと思います。このひな形を使って作った本をKindleストアに置いてます。100円してしまうのですが、それでも良ければご覧になってください。

ひな形

まずは、HTMLファイルのひな形を示します。以下のひな形をコピーして、Windowsの「メモ帳」などにペーストし「■■n■■」で示した部分を編集して保存する(文字コードは「utf-8」にしてください)だけ。詳しい埋め方については後述します。

<html>
<head>
<meta charset="utf-8">
<title>
■■1■■
</title>
<meta name="author" content="■■2■■" />
<meta name="description" content="■■3■■" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<!--
body {
-webkit-writing-mode: vertical-rl;
}
p {
text-indent: 1em;
}
hr.pagebreak {
page-break-before: always;
display: none;
}
h1 {
padding-top: 1em;
font-size: 140%;
}
h2 {
padding-top: 1em;
font-size: 120%;
}
h3 {
padding-top: 1em;
font-size: 100%;
}
h4 {
padding-top: 1em;
font-size: 80%;
}
blockquote {
padding-top: 1em;
}
footer {
page-break-before: always;
margin: 1em;
padding: 2em 1em;
border-style: solid;
border-width: 2px;
border-color: #666;
}
footer p.title {
font-size: 100%;
text-indent: 0;
}
footer p.colophone, p.author, p.date {
font-size: 80%;
text-indent: 0;
}
address {
font-size: 80%;
font-style: normal;
text-indent: 0;
}
.tcy {
-webkit-text-combine: horizontal;
}
.em_accent {
-webkit-text-emphasis-style: sesame;
}
.em_disc {
-webkit-text-emphasis-style: filled dot;
}
.em_circle {
-webkit-text-emphasis-style: open dot;
}
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
-->
</style>
</head>
<body>
<h1>
■■4■■
</h1>
<p>
■■5■■
</p>
<footer>
<p class="title">
■■6■■
</p>
<p class="author">
著 者&nbsp;■■7■■
</p>
<address>
連絡先&nbsp;■■8■■
</address>
<p class="date">
発行日&nbsp;
<span class="tcy">'00</span>年
<span class="tcy">00</span>月
<span class="tcy">00</span>日
</p>
</footer>
</body>
</html>

ひな形の使い方

ひな形のなかの「■■1■■」〜「■■8■■」を埋めるだけです。

    1. ■■1■■ 本のタイトルです。「柱」としてページの上部に表示されます。
    2. ■■2■■ 著者名です(本名でもペンネームでも)。
    3. ■■3■■ この本の概要です。Kindleダイレクト・パブリッシングに登録するときの「内容紹介」と同じもので良いと思います。ただし「内容紹介」には4000字!まで書けますが、ここは150〜200文字程度にしておくのが良いでしょう。
    4. ■■4■■ 本のタイトルです。「■■1■■」と同じもの。
    5. ■■5■■ 本文です。詳細を後述します。
    6. ■■6■■ 本のタイトルです。「■■1■■」と同じもの。
    7. ■■7■■ 著者名です。「■■2■■」と同じもの。
    8. ■■8■■ 連絡先。メールアドレスでも、facebooktwitterのIDでも。

本文の書き方(1)

  • 本のタイトルを「h1(見出し)」要素にしていますので、タイトルを「■■4■■」の部分に記入してください。
  • 段落ごとに「p(paragraph)」要素とします。以下にサンプルを示しておきます。
<h1>
吾輩は猫である
</h1>
<p>
吾輩は猫である。名前はまだ無い。
</p>
<p>
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。
この時妙なものだと思った感じが今でも残っている。
第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。
その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。
のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。
どうも咽せぽくて実に弱った。
これが人間の飲む煙草というものである事はようやくこの頃知った。
</p>
<p>
この書生の掌の裏でしばらくはよい心持に坐っておったが、
しばらくすると非常な速力で運転し始めた。
書生が動くのか自分だけが動くのか分らないが無暗に眼が廻る。胸が悪くなる。
到底助からないと思っていると、どさりと音がして眼から火が出た。
それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。
</p>
<p>
ふと気が付いて見ると書生はいない。たくさんおった兄弟が一疋も見えぬ。
肝心の母親さえ姿を隠してしまった。その上今までの所とは違って無暗に明るい。
眼を明いていられぬくらいだ。
はてな何でも容子がおかしいと、のそのそ這い出して見ると非常に痛い。
吾輩は藁の上から急に笹原の中へ棄てられたのである。
</p>
  • 段落の行頭は1文字分字下げして表示するようになっています。
  • 段落と段落の行間は、少し広めに表示されます。
  • 段落内テキストで改行を行っていても、実際の表示には反映しません。
  • 段落内で改行をしたいときには、改行をしたい場所(改行をしたい文の行末に)以下のHTMLタグを書いてください。
<br />
  • 上記のタグで改行をしても、字下げは行いません。

本文の書き方(2)

  • 章のタイトルは「h2」要素とします。
  • 節のタイトルは「h3」要素とします。
  • 項のタイトルは「h4」要素とします。
  • 目は設定していません。
  • 章も節も項も、必要がなければ何も書く必要はありません。
  • 章、節、項が必要な場合は以下のように書きます。
<h1>本のタイトル</h1>
<h2>第一章</h2>
<h3>第一節</h3>
<h4>第一項</h4>
<p>
本文
</p>
<h4>第二項</h4>
改ページ

章や節の区切りで、改ページを行いたい時には、章や節の最後の「p」要素に続けて、以下のタグを記述してください。

<hr class="pagebreak">

以下のように使う。

<p>
章の終わり。
</p><hr class="pagebreak">
<h2>第二章</h2>
ルビ

ルビについては、このひな形のスタイルシートには何も記述していませんが、Kindleの端末および、アプリ側のデフォルトで対応してくれます。ルビの部分を、以下のように記述します。

ふり<ruby>仮名<rt>がな</rt></ruby>
圏点、傍点について。
  • ゴマ
  • 黒丸
  • 白丸

  のスタイルを記述しておきました。それぞれ以下のように書きます。

<span class="em_accent">ゴマ</span>
<span class="em_disc">黒丸</span>
<span class="em_circle">白丸</span>
縦中横

半角3文字までを縦中横にできます。「'12年」のような場合。「2012」のように4文字以上はだめです。以下のように書きます。

<span class="tcy">'12</span>年の<span class="tcy">11</span>月
引用

引用部分を示すための「blockquote」要素を設定しておきました。2文字ほど字下げするとともに行長も短く表示します。以下のように書きます。

<p>
夏目漱石の「吾輩は猫である」の冒頭を以下に示す。
<p>
<blockquote>
<p>
吾輩は猫である。名前はまだ無い。
</p>
<p>
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。
この時妙なものだと思った感じが今でも残っている。
第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。
その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。
のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。
どうも咽せぽくて実に弱った。
これが人間の飲む煙草というものである事はようやくこの頃知った。
</p>
</blockquote>

今日はここまで

CSSが書ける人は、このひな形をもとにどんどん書き足してもらえば良いのですが、このひな形の範囲で、普通の本はつくれるのではないかと思います。次回は、挿絵や写真を挿入する方法について書く予定です。目次の作り方も書きたいですね。

完成したファイルのアップロードは、ダイレクト・パブリッシングのサイトを見ればわかると思うのですが、本を出版してしまう前に「6. 本をプレビューする」のところで必ず、プレビューツールとプレビューファイルをダウンロードして、完成したファイルがどのように表示されるか確認するようにしましょう。問題があれば一旦「ドラフトとして保存」しておいて、もとのHTMLファイルを修正します。いちど出版した本は、公開を取りやめることはできても、本棚から削除することはできません。出版は慎重に。

2012-06-24

花背補陀落農園 トマト大臣の初仕事

| 20:27

ブログの更新、実に8ヶ月ぶりです。
昨年からHatenaBlogのほうで「京都自転車日記」というのを書いてます。
今日は自転車ネタじゃないので久しぶりにこちらに…

f:id:gintacat:20120624194120j:image

花背市民農園を3区画借りて、京都の自転車秘密基地補陀落山荘のオーナーを中心とした6名ほどの仲間が畑を始めました。ゴールデンウィークには、みんなで賑やかにトマトやキュウリやカボチャや枝豆や落花生…の苗を植え、その後も「みんなでワイワイやっていく」はずが、いつの間にか「誰かがやってくれるだろう」という無責任体制に…(特に僕)これはいかん! と先日、野菜ごとに担当者が任命されました。

僕は「トマト大臣」の要職に任命されたにも拘らず、その後現地を訪れていませんでした。就任から2週間が経つというのに。その間、他の大臣は頻繁に現地を視察している様子。これは拙い、と今日、畑にでかけました。現地ではのろまなトマト大臣などにお構いなく、すでにトマトの実がつきはじめていました。

f:id:gintacat:20120624185228j:image

ほかの野菜にくらべて盛大に葉が茂り、きわめて元気そうなのですが、総理大臣曰く、もっと風通しを良くしなければならない。さらに良く見ると、ほんとうは上にまっすぐ伸びてほしいのに、横へ地面へと伸びている枝が多い。

f:id:gintacat:20120624194121j:image

そこで、下のほうで、横に地面にと伸びていた枝を取り除き、上のほうの枝も、ちゃんと上に伸びてゆくよう支柱に結び直してみました。

f:id:gintacat:20120624194122j:image

ずいぶんすっきりしました。が、やりすぎたのか? と言う不安も… いやいやそんなことはない。たぶん大丈夫だろう。こんどの土曜には補陀落山荘の開業記念パーティーがあるので、また様子を見にこよう。

う〜ん、しかし、こんな大臣で大丈夫なのか?

トラックバック - http://d.hatena.ne.jp/gintacat/20120624

2011-10-12

理想の自転車通勤用バイク

| 19:27

年甲斐もなく自転車に夢中になって2年と半年。その間、少ないけれど何台かの自転車を、さんざんに乗り回しました。空井戸サイクルさんに入り浸って(笑)人の自転車も数多く見せていただきました。

それでも、スポーツバイクに関しては、まだまだ自分の好みすらわかりません。しかし、通勤、街乗り、ポタリング用の自転車として、僕はこういう自転車が欲しいなぁというものが少し見えてきました。

  • あまり重いのは嫌だけど、スチールのフレームと、ハンドルもスチール。スチールのやわらかい乗り心地は快適。ハンドルは Surly の OpenBar が良いな。
  • 短距離の街乗り主体で考えるなら、今、雨の日通勤用に使ってる Long Haul Trucker より、もう少しキビキビした挙動が欲しいなぁ。
  • ホイールは26インチ、1.5〜2インチくらいの太いタイヤ。フロント or リア・キャリアやパニアを取り付けたとき、見た目のバランスが美しいと思うから。それに、なんといっても太いタイヤは快適。
  • ブレーキはディスクブレーキ。雨の日(効きがどうこうというより)リムが汚れる(あとで掃除する)のが嫌だから。
  • 泥除けが「美しく」取り付けられること。通勤には雨の日も乗るので、しっかりとした泥除けはマスト。
  • 小さなことだけど、スタンドが「美しく」取り付けられること。街乗りの時、あると無いでは大違い。
  • 京都市内の移動だけを考えるなら変速機は要らない。でも、たまにはこういう「やる気のない」自転車で北山辺りをのんびりサイクリングすることを考えるとあったほうが良い。フロントはシングルで十分。リアもそんなに大きいのは要らないので11×28Tの9速で十分。逆にフロントを軽めで38Tくらい。
  • 大切にはするけど、飾り物ではないし趣味の自転車でもない。日常の道具としてタフに使いたい。と考えると価格は完車で15〜20万円程度。

ところで、こんな条件をすべて受け入れることができるフレームが、あるんですね。困ったことに(笑) EBSの「vokka」。今のところ、予約でいっぱいらしいので衝動買いの心配はありませんが(笑)

興味のある方は、空井戸サイクルさんに試乗車があります ;-)。

vokka の紹介記事はこちら

トラックバック - http://d.hatena.ne.jp/gintacat/20111012

2011-10-09

桃源郷

| 19:48

今日、自転車で、京都府南丹市の日吉ダムから京都市右京区京北町の周山に向かう途中、宇津という集落を通りがかりました。

山間(やまあい)の道の先。ふいに視界がひらけ、田畑(でんばた)に囲まれた茅葺の家や屋敷、人の営みが忽然とたち現れる。

桃源郷? 山郷に出会うたび、そんな心地がします。

きのうは、鞍馬から、花背、黒田、山国、の集落を結ぶ、お気に入りのコースを走ってきました。やわらかい陽射し、鳥の声、虫の声、どこかで布団を叩く音。もう何も言うことはありません。

京都の北山には数多くの桃源郷があります。

京北 山国。豊かに稔った稲穂。

Beautiful day. Good harvest.

嵯峨 越畑 河原家住宅。こちらは稲刈りが終わってました。

Kawahara Family’s House

トラックバック - http://d.hatena.ne.jp/gintacat/20111009

2011-09-13

晩夏

| 20:47

ここに立ちたくて昼休み、自転車ででかけました。3時間、頑張れば2時間? という甘い計算をしつつ。今日の京都もまだまだ暑く、杉林のなかは蝉の大合唱。尾根に抜ければ照りつける日差し。まだまだ夏。ですが

秋きぬと目にはさやかに見えねども風の音にぞおどろかれぬる

目を閉じれば、空気は秋です。こういう季節の変わり目の空気が好きです。

ここからは下りですが、シクロクロスバイク向きの路面ではないので転ばないように(実はつい一昨日、ここで2度転んでるw)慎重に下りました。結果、3時間をはるかにオーバー。帰ってきたのは、むしろ夕方に近い時間でした(笑)