写真に説明文をつける
私が住んでいる温暖な気候の外房の景色です。
書籍の本文に写真をつけたい時があります。 挿入する写真は本文に関連したものが一般的です。 私は本文を読めば済むことだからと、再度写真の下に説明分を書いてはいませんでした。
しかし、何人かの読者から写真の説明文があったほうが良いとの指摘がありました。 写真とその説明文を見てから本文を読むという読み方もあるのでしょう。 あるいは、本文に記述していないが、関連した写真を挿入し、簡単な説明をする場合もあるでしょう。 この節では、右端に写真を配置しその下に簡単な説明、まわりこみ処理をする方法を紹介します。
挿入する写真と説明文の枠の定義をCSSファイルに記述する
上の挿入写真と説明分は次の記述をCSSファイルに書き込んだ定義を使っています。
#rightphoto-box {
width: 32%;
float: right;
padding: 0.2em;
font-size: 95%;
font-weight: bold;
line-height: 115%;
text-align: center;
}
width: 32%;
float: right;
padding: 0.2em;
font-size: 95%;
font-weight: bold;
line-height: 115%;
text-align: center;
}
テキストファイルの本文と写真&説明文は次のようになっています。
div id="rightphoto-box">
<img src="img/sotobou.jpg" >
<p>私が住んでいる温暖な気候の外房の景色です。</p>
</div>
<p> 書籍の本文に写真をつけたい時があります。 挿入する写真は本文に関連したものが一般的です。 私は本文を読めば済むことだからと、再度写真の下に説明分を書いてはいませんでした。</p> <p> しかし、何人かの読者から写真の説明文があったほうが良いとの指摘がありました。 写真とその説明文を見てから本文を読むという読み方もあるのでしょう。 あるいは、本文に記述していないが、関連した写真を挿入し、簡単な説明をする場合もあるでしょう。 この節では、右端に写真を配置しその下に簡単な説明、まわりこみ処理をする方法を紹介します。</p>
<img src="img/sotobou.jpg" >
<p>私が住んでいる温暖な気候の外房の景色です。</p>
</div>
<p> 書籍の本文に写真をつけたい時があります。 挿入する写真は本文に関連したものが一般的です。 私は本文を読めば済むことだからと、再度写真の下に説明分を書いてはいませんでした。</p> <p> しかし、何人かの読者から写真の説明文があったほうが良いとの指摘がありました。 写真とその説明文を見てから本文を読むという読み方もあるのでしょう。 あるいは、本文に記述していないが、関連した写真を挿入し、簡単な説明をする場合もあるでしょう。 この節では、右端に写真を配置しその下に簡単な説明、まわりこみ処理をする方法を紹介します。</p>
でんでんコンバーターで電子書籍を作る場合
- でんでんエディターのCustom CSSに上記のスタイル定義を入力します。
- 上記のテキストファイルを参考にして、写真、説明文、本文をエディター画面で入力します。 エディターではプレビュー画面を見ても写真を入れた状態でのレビューはできません。 一度でんでんコンバーターで電子書籍を作ってからの確認となります。
- 原稿の入力を終わったら、原稿ファイルをダウンロードし、写真と共にでんでんコンバーターでEpubファイルを作成します。
でんでんコンバーターを使った電子書籍の作り方の詳細が電子書籍(EPUB)を作るにありますので参考にしてください。
Sigilで電子書籍を作る場合
- 上記のスタイル定義をスタイルシートに記入します。 スタイルシートの説明や組み込みはSigilにスタイルシート(CSS)を組み込むを参照してください。
- 挿入する写真をインポートします。 【具体的には】 メニューバーの「ファイル」⇒「追加」⇒「既存のファイル」とプルダウンし、ファイル一覧から写真(例えば abc.jpg)を選択し、「開く」ボタンを押すと選択した写真 abc が「Images」ホルダーにインポートされます。
- カーソルを写真を挿入したい位置に置いてから、ツールバーにある〈〉ボタンを押してコードビューとします。
- 上記のテキストファイルの青文字部を参考に、写真(abc.jpg)と説明文のコードを入力します。
- ツールバーのブックビューボタンを押します。 この状態で本文の回り込み処理が出来ていますので、引き続き本文入力作業を続けることが出来ます。