Sigilにスタイルシート(CSS)を組み込む


 HTMLを使った電子書籍は文書とそのレイアウトに関する情報を記述したスタイルシートに分離して持っています。 ここではSigilに既存のスタイルシート、または空のスタイルシートを組み込む手順を説明します。


既存のスタイルシートをインポート

 ひな形のスタイルシートや、自分用のスタイルシートをすでに持っており、それを使って電子書籍を作る場合は、Sigilにスタイルシートをインポートします。

  1. メニューバーの ファイル(F)→追加→「既存のファイル…」とクリックするとパソコンのフォルダー窓が開きます
  2. フォルダー窓からインポートするスタイルシートを選択し、クリックします。
  3. フォルダー窓の下部の「開く」ボタンをクリックし、スタイルシートをインポートします。
  4. ブックブラウザー窓の Styles フォルダーにインポートしたファイルが表示されていますので、確認してください。
  5. 次に、インポートしたスタイルシートを使うため、文書とリンクします。 ブックブラウザー窓の Text フォルダーにある関連付けるxttmlファイルを右クリックし、開いた窓から「スタイルシートにリンク…」をクリックすると、さらにスタイルシート一覧が現れます。 その中から、先ほどインポートしたファイルにチェックマークを付けて「OK」ボタンを押すと、リンクが完了します。

空のスタイルシートを組み込む

Sigilで新しく文書を作る時、白紙のスタイルシートを組み込む手順です。

  1. メニューバーの ファイル(F)→追加→「空のスタイルシート」とクリックすると、ブックブラウザー窓の Styles フォルダーに空のスタイルシート(Style0001.css) が表示されていますので、確認してください。
  2. 次に、インポートしたスタイルシートを使うため、文書とリンクします。 ブックブラウザー窓の Text フォルダーにある関連付けるxhtmlファイルを右クリックし、開いた窓から「スタイルシートにリンク…」をクリックすると、さらにスタイルシート一覧が現れます。 その中から、先ほど作ったStyle0001.cssにチェックマークを付けて「OK」ボタンを押すと、リンクが完了します。

スタイルシートがリンクされていることを確認

 xhtmlファイルにスタイルシートがリンクされているのを確認できます。

  1. ブックブラウザー窓のなかのxhtmlファイルをダブルクリックしてください。そのファイルの内容が表示されました。
  2. ツールバーのコードビューボタン「<>」をクリックすると表示がコードビューモードになります。 コードの最初の部分に下の赤字行が表示されていたら、そのxhtmlファイルとスタイルシートがリンクされています。
<?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>

 スタイルシートをインポートした場合は、Style0001.cssではなく、インポートしたファイル名が表示されます

↑ PAGE TOP