Sigilで作る本に説明文をつけた写真を挿入し、本文を回り込み処理する方法は？


魚の美味い房総半島の海岸風景

　写真に簡単な説明文あるいはタイトルなどをつけたい場合がよくあります。　写真を挿入し、本文を回り込み処理する方法だけでは、写真の下に説明文をつける事が出来ませんでした。

　これを実現するには写真と説明文を一体で扱うと簡単に実現できます。　では、一体で扱うとはどういう方法でしょう。　例えると、写真と説明文を箱に入れ、本文の横にその箱を置き、本文はその箱を回り込み処理する方法です。

　<div> というhtmlタグがあります。　この<div> ～ </div>タグで囲った文章や写真はひとかたまりの情報として扱えるので、このひとかたまりを本文の横に置き本文が回り込めるようにスタイルシートで修飾しましょう。

1.　スタイルシートに修飾のコードを書き込みます。


  1. Sigilを起動し、今書いている本文のファイルを開いてください。
  2. Sigilのブックブラウザーが表示されていますか？　ブックブラウザーを表示するには画面の上部にあるメニューバーの「表示」をクリックし、プルダウンメニューの中にある「ブックブラウザー」にチェックマークを入れて表示できます。
  3. ブックブラウザーの「Styles」ホルダーを展開（ブックブラウザー内のStylesホルダーの　>　をクリック）してください。
  4. 本文で使うCSSファイルがありますか。　なければ、空のCSSファイルを追加します。
    メニューバーの　「ファイル」→「追加」→「空のスタイルシート」とクリックします。
    空のcssファイルが追加されました。　追加したスタイルシートはStyle0001.cssとなっていますね。
    （注意：本文で使っているCSSファイルとはsgc-nav.css以外のcssファイルで、すでにリンクの指定がされているcssファイルです。）
  5. 本文で使うCSSファイルを選択（＝ブックブラウザーに表示されたCSSファイルをダブルクリック）します。
    ここではStyle0001.cssを選択したものとして以下の説明をしています。
  6. Style0001.cssが右側の窓に表示されていますね。　これは今追加したファイルですから何もコードが記入されていないはずです。
  7. 以下の赤文字コードをStyle0001.cssファイルに記入します。
    （注意：　#leftphoto-box 及び #rightphoto-box の前にスペースを置かないでください。　それ以外の行では半角スペースを使えますが、全角のスペースを使わないでください。　正しく作動しません。）

img {
　　width: 100%;
　　height: auto;
　　padding-bottom: 0.2em;
}

#leftphoto-box {
　　width: 25%;
　　float: left;
　　padding-top: 0.5em;
　　padding-left: 0em;
　　padding-right: 0.5em;
　　padding-bottom: 0.5em;
　　font-size: 95%;
　　font-weight: bold;
　　line-height: 115%;
　　text-align: center;
}

#rightphoto-box {
　　width: 25%;
　　float: right;
　　padding-top: 0.5em;
　　padding-left: 0.5em;
　　padding-right: 0em;
　　padding-bottom: 0.5em;
　　font-size: 95%;
　　font-weight: bold;
　　line-height: 115%;
　　text-align: center;
}

　以上でスタイルシートへのコードの書き込みは終わりました。　CSSファイルとは電子書籍などで使うHTML文書の見た目（レイアウト）を決めるためのファイルです。　「leftphoto-box」と「rightphoto-box」はそれぞれ本文ページの左詰めまたは右詰で写真などを挿入するときに使う箱の形式名です。　箱の幅は25％にしていますのでお好みの数値に変えてください。　「img」はその箱の幅一杯（この場合25%）に写真を表示されるように指定しています。　ピクセル数が異なる写真も箱の大きさと同じになります。


2.　挿入する本文ファイルと上記のスタイルシートをリンクします。

（注意：上のステップで既存のcssファイルにコードを記入した場合は本文とcssファイルのリンクは出来ていますから、このステップは不要です。　次のステップに進んでください。）

  1. ブックブラウザーまたは表示窓の上部にある本文を書いているHTMLファイルを選択（＝ダブルクリック）します。 表示窓に本文が出ていることを確認してください。
  2. メニューバーの「表示」→「コードビュー」を選択してください。　本文がHTML形式で表示されました。
  3. スクロールアップして<head>のある行を見つけてください。
  4. <head>の下に次の赤字のコードを挿入します。

<head>
<link rel="stylesheet" href="../Styles/Style0001.css" type="text/css"/>
<title></title>
</head>

　赤字の行を本文のあるHTMLファイルに記入すると、「この本文ファイルはStyle0001.CSSファイルを使ってレイアウトする」と紐つけられたことになります。

3.　挿入する写真等のjpgファイルをSigilに取り込みます。


  1. メニューバーから「ファイル」→「追加」→「既存のファイル」とプルダウンしてください。　フォルダーが表示されますので、目的の写真等のファイルをダブルクリックします。
  2. ブックブラウザー窓の「Images」を展開すると今指定した写真等が取り込まれてるのが確認できます。

　Kindle電子書籍に使う写真はファイル容量（650MB)内で出来るだけ解像度の高い物を使うようにAmazonは推奨しています。　電子書籍ディバイスはどんどん詳細な表示ができるようになり、また読者が写真を拡大してみる機能もあるからです。　小さな写真は拡大した時、無残な写真となります。　読者の本に対する印象が悪くなるでしょう。　Kindleストアにアップロードした時、最適化の自動変換がされるので、できるだけ大きな写真を使いましょう。

4.　本文ファイルの挿入する場所に取り込んだ写真と説明文を組み込みます。


  1. ブックビューのなかの本文ファイルを選択（＝クリック）します。
  2. コードビューに戻ります（＝メニューバーから「表示」→「コードビュー」とクリックする）。
  3. 写真等を本文の中の挿入する場所（本文その1と本文その2の間））に次のように<div>と</div>で囲んで写真のファイル名とその後ろに説明文を挿入します。

<p> ・・・・・　本文　その1・・・</p>
<div id="leftphoto-box" >
<img src="../Images/EP335a.JPG" />魚の美味い房総半島の海岸風景
</div>
<p> ・・・・・　本文　その2・・・</p>

ブックビューを見ると、（＝メニューバーから「表示」→「ブックビュー」とクリックする）写真が挿入され、説明文がその下に表示されているのを確認できます。

CSSの書き方についての一般的な注意

　Sigilに限らず CSSファイルには全角文字、全角スペースは使えません。　テキスト表示では変わりがなくても全角スペースがあるとCSSが働かず意図したレイアウトになりません。　またアルファベット大文字と小文字は違う文字ですから、例えば　EP335a.JPGとEP335a.jpgは別のファイルとなります。

　SigilのなかのCSSファイルにカット＆ペーストでコードを書き込んだところ、時々そのコードを認識しない場合がありました。　その時は改めて、1文字ずつキーインしたところ、認識しました。　原因がわかりませんが、うまく認識しないコードがあるときは、そのコード全体を再度キーインしてみてください。


ご意見、お問い合わせは までメールを送ってください。

↑ PAGE TOP