写真挿入と文章の回りこみ処理

　「電子書籍に写真を使う」で、一般的な写真を挿入する方法を使いました。　この一般的な挿入の方法では、写真は書籍の幅いっぱいに挿入されます。　通常使う方法ですが、時には文章に挿絵や小さな写真を挿入したい場合があります。　小さな図や写真の周りに文章を置くのを回り込み処理といいます。　ここでは小さく写真を挿入し、文章で囲む回り込み処理を説明します。

でんでんコンバーターで写真を挿入し、回り込み処理するには
Sigilで写真を挿入し、回り込み処理するには

小さな写真を挿入するため、Sigilで上の文章を表示したコードビュー例です

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
　<link rel="stylesheet" href="../Styles/Style0001.css" type="text/css"/>
　<title></title>
</head>
<body>
<img src="../images/sashie.jpg" width="20%" class="floatleft" />
<p>　「電子書籍に写真を使う」で、一般的な写真を挿入する方法を使いました。　この一般的な挿入の方法では、写真は書籍の幅いっぱいに挿入されます。　通常使う方法ですが、時には文章に挿絵や小さな写真を挿入したい場合があります。　小さな図や写真の周りに文章を置くのを回り込み処理といいます。　ここでは小さく写真を挿入し、文章で囲む回り込み処理を説明します。</p>
</body>

　赤字の記述がセンタリングをするために本文（body部）に追加したコードで、挿絵の大きさを20％幅としています。　また青色の部分にあるStyle0001.css内にも、回り込みを実現するためのコードを追加しています。　Style0001.cssに追加するコードは下の通りです。

.floatleft {
float: left;
padding-top: 0.5em;
padding-left: 0;
padding-right: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}

　使ったコードの詳細はHTMLの本を読んでいただくとして、このコードの仕組みを簡単に説明します。

img は写真などを挿入するタグで、sashie.jpg を使い、その幅を20％とし、スタイルシートに定義したfloatleftを使い、文章と写真を表示します。
.floatleftはユーザーが定義した回り込みのコードで、この中にある float: left が写真を左側に置き、文書などを回りに埋め込むための命令です。　写真を右に置きたい場合にはこの部分を float: right とすると、右隅に写真が納まります。

でんでんコンバーターで写真を挿入し、回り込み処理するには

　でんでんエディターで挿入する写真のファイル名と、文章を入力します。　

![挿入写真](sashie.jpg)
　「電子書籍に写真を使う」で、一般的な写真を挿入する方法を使いました。　この一般的な挿入の方法では、写真は書籍の幅いっぱいに挿入されます。　通常使う方法ですが、時には文章に挿絵や小さな写真を挿入したい場合があります。　小さな図や写真の周りに文章を置くのを回り込み処理といいます。　ここでは小さく写真を挿入し、文章で囲む回り込み処理を説明します。

　次にツールバーの Custom CSS ボタンを押し、自分用のCSSファイルを開き、次の記述を入力します。

.floatleft {
float: left;
padding-top: 0.5em;
padding-left: 0;
padding-right: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}

写真と floatleft はまだ結び付けられていませんので、写真ファイルの行を赤字のように修正します。

<img src="sashie.jpg" alt="挿入写真" width="20%" class="floatleft" />
　「電子書籍に写真を使う」で、一般的な写真を挿入する方法を使いました。　この一般的な挿入の方法では、写真は書籍の幅いっぱいに挿入されます。　通常使う方法ですが、時には文章に挿絵や小さな写真を挿入したい場合があります。　小さな図や写真の周りに文章を置くのを回り込み処理といいます。　ここでは小さく写真を挿入し、文章で囲む回り込み処理を説明します。

　ツールバー左端にあるファイル名欄に a.txt を入力し、ダウンロードして保存します。　次にでんでんコンバーターを使い、EPUB形式ファイルに変換してください。　残念ながら、現状のでんでんエディターには写真ファイルを取り込む機能がありません。　そのため、でんでんエディターのプレビュー画面では写真の代わりに alt="XXX" と入力した文字が表示されるはずです。　ここでは「挿入写真」と入力してあるので、写真を挿入した位置に「挿入写真」と表示され、文章は正しく回り込み処理がされています。　最終的にはでんでんコンバーターでEPUB形式ファイルに変換した後に確認するしか方法はありません。

Sigilで写真を挿入し、回り込み処理するには

　Sigilを起動し、文章を入力するブックビューの状態にします。　文章を入力します。

　次にスタイルシートに回り込み処理の記述をします。　スタイルシートを作る所から始めますが、すでにスタイルシートのある場合は、スキップしてください。

上部のメニューから　ファイル(F)→追加→空のスタイルシート　とクリックし、空のスタイルシートを追加します。　左にあるブックブラウザー窓のなかの Style フォルダーに Style0001.css ファイルが現れました。　ファイルは空白のはずです。
Style0001.CSSファイルに以下を入力します。

.floatleft {
float: left;
padding-top: 0.5em;
padding-left: 0;
padding-right: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}

先ほど文章を入力したテキストファイルに戻ります。　ブックブラウザー窓の中のTextフォルダー内のxhtmlファイルをクリックすると戻れます。
ツールバーからコードビューボタンをクリックし、テキストをブックビューからコードビューに変更します。
下記の赤字コードを挿入します。

　挿入したコードの説明
上の赤字部はこのテキストファイルに先ほど作ったスタイルシート"Style0001.css"をリンクしてその中に記入したコードを使えるようにするコードです。
下の赤字部は "sashie.jpg" という写真を文章の前に挿入するためのコードで、写真の幅を20％、floatleft を使って写真を表示すると解釈されます。

使う写真 sashie.jpg を追加します。　上部のメニューの　ファイル(F)→追加→既存のファイルをクリックすると、エクスプローラーが開き、パソコンの中のファイルを表示しますので、 sashie.jpg を探し出し、クリックし、OK ボタンを押すと、編集中の電子書籍のImagesフォルダーにインポートされます。
ブックブラウザー窓の中のImagesフォルダーにsashie.jpgがあるのを確認したらすべての作業が終わりです。

　早速写真が挿入され、文章がうまく回り込み処理されているのを確認してみましょう。　ブックブラウザー窓の中から先ほどのxtmlファイルを選択し、ブックビューボタンを押すと表示されます。