このサイトは1ヶ月 (30日) 以上ログインされていません。 サイト管理者の方はこちらからログインすると、この広告を消すことができます。

森の管理日記

小説の本文の文字サイズや余白の調整方法

2017/11/10 20:26
フォレストページ+ではcssを使えばけっこう何でもできるのですが、
そもそもcssに詳しくない人にはその「何でも」が具体的に何か分かりませんよね・・・

そこで、今日は小説本文の文字サイズと余白をcssで調整する方法をご紹介します。

そもそもcssが何か分からないという方も多いと思いますが、かんたんに言うと、「その部分はこういうデザインで表示してください」という指示になります。

フォレストページ+の場合は、公式テーマをベースとして考えて、
「この部分の幅はもっと狭く」「ここの文字はもっと大きく」といった指示をすることで調整することができる感じです。

こればっかりは言葉で説明されてもピンと来ないと思うので、習うより慣れろの精神で下記のcssに挑戦してみましょう!


■小説の本文の文字サイズと余白を調整できるcss

<style>
.novel_text {
font-size: 大きさ;
padding: 大きさ;
}
</style>



大きさの指定のしかたはいろいろありますが、一番わかりやすい数値での指定方法をご紹介しますね。

■pxで指定
10px 12px 14px 16px

■emで指定
0.8em 0.9em 1.1em 1.2em

上記の数値を参考に、お好みの数値を設定してみてください。



で、編集したcssをどこに貼ればいいのかですが、
テーマ関係なくサイト内のすべての小説共通で変えてよければ、こちらの共通HEAD編集に入力するだけでOKです!

テーマによって変えたい場合は・・・


変えたいテーマをベースにマイテーマを作成
 ↓
そのマイテーマのHEAD編集でcssを設定
 ↓
そのマイテーマを小説に着せる


上記の設定でOK!

ちなみに、今回はかなりシンプルなcssにしていますが、もっと細かく指定することもできます。

例えば上記に追加して、文字色を変える、上下左右で余白の幅を変える、行間を調整する、ゴシック体と明朝体を切り替える・・・などなど。

こちらは需要がありそうなので、いずれ専用の解説ページを作らせていただければいいなと思っています。

コメント

匿名ユーザーからのコメントを受け付けていません。