このカテゴリは 横ならび目次サンプル(2) で表示させ、他のカテゴリの目次ページとは背景を変更して表示しています。また、このカテゴリ固有の説明(作者・出典などの記述)を表示させています。詳しくは「特定のカテゴリの目次に説明などを追加する」「特定のカテゴリの背景を変更する」をご覧ください。
このページは、他のカテゴリの目次ページとは背景を変更して表示しています。また、このカテゴリ固有の説明(作者・出典などの記述)を表示させています。詳しくは「特定のカテゴリの目次に説明などを追加する」「特定のカテゴリの背景を変更する」をご覧ください。
このページは他の個別記事ページとは背景を変更して表示しています。詳しくは「特定の個別記事ページの背景を変更する」をご覧ください。
このカテゴリの記事ページは他の個別記事ページとは背景を変更して表示しています。詳しくは「特定の個別記事ページの背景を変更する」をご覧ください。
 

スポンサー広告

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←アカマイ広告をカスタマイズなさった方へ【その2】 →月別アーカイブページ
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加Buzzurlにブックマーク
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png スポンサーサイト
携帯用Novelテンプレート 3kaku_s_L.png スポンサーサイト
表紙ページ 3kaku_s_L.png スポンサーサイト
Novel List 3kaku_s_L.png スポンサーサイト
目次ページ 3kaku_s_L.png スポンサーサイト
小説本文(個別記事)ページ 3kaku_s_L.png スポンサーサイト
イラストリスト 3kaku_s_L.png スポンサーサイト
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png スポンサーサイト
その他・共通ページ 3kaku_s_L.png スポンサーサイト
携帯用テンプレートのカスタマイズ 3kaku_s_L.png スポンサーサイト
テンプレート別のカスタマイズ 3kaku_s_L.png スポンサーサイト
サイト内配布テンプレート 3kaku_s_L.png スポンサーサイト
テンプレートの衣替え 3kaku_s_L.png スポンサーサイト
裏技カスタマイズ 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png スポンサーサイト
novel-tempタイプ 3kaku_s_L.png スポンサーサイト
novel-Sタイプ 3kaku_s_L.png スポンサーサイト
novel-Rタイプ 3kaku_s_L.png スポンサーサイト
novel-Gタイプ 3kaku_s_L.png スポンサーサイト
novel-Jタイプ 3kaku_s_L.png スポンサーサイト
novel-Cタイプ 3kaku_s_L.png スポンサーサイト
素材屋風テンプレート 3kaku_s_L.png スポンサーサイト
疑似フレームテンプレート 3kaku_s_L.png スポンサーサイト
novel-PF2タイプ 3kaku_s_L.png スポンサーサイト
夢小説用テンプレート 3kaku_s_L.png スポンサーサイト
イラストリスト付きテンプレート 3kaku_s_L.png スポンサーサイト
携帯用テンプレート 3kaku_s_L.png スポンサーサイト
一般ブログ用テンプレート 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png スポンサーサイト
不具合の修正 3kaku_s_L.png スポンサーサイト
その他お知らせなど 3kaku_s_L.png スポンサーサイト
管理人のおススメ 3kaku_s_L.png スポンサーサイト
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png スポンサーサイト
雪の女王 3kaku_s_L.png スポンサーサイト
銀河鉄道の夜 3kaku_s_L.png スポンサーサイト
坊っちゃん 3kaku_s_L.png スポンサーサイト
幸福の王子(夢小説サンプル)  3kaku_s_L.png スポンサーサイト
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
*Edit
   
 

「テンプレートマニュアル」
その他・共通ページ

文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)

 画像のないテンプレートで記事をご覧になる場合は
 Temlplate Image : カスタマイズの難易度3 
この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←アカマイ広告をカスタマイズなさった方へ【その2】 →月別アーカイブページ
 
カスタマイズの難易度3 カスタマイズの難易度3

文字の大きさ・色・行間・左右の余白を変更する


Novelテンプレートは文字を大きめに設定しています。閲覧者の中には視力が弱い方もおられますし、視力に問題がなくとも、一般HPの読みやすい大きさの文字に慣れたオンノベファンは、文字が小さく読み辛いブログ小説を敬遠する傾向にあります。(管理人もその一人…(^^ゞ)ですから、個人的には余り小さな文字になさるのはおススメできません。文字を小さくする場合には、文字の大きさを絶対値で固定するのではなく、相対値で指定して、必用とあらば、閲覧者が文字の大きさを変更して読めるようにしましょう。黒背景のテンプレートの文字色を変更する場合も、暗い色調な文字色や、明度はあっても赤や青は大変読み辛いので、注意が必要です。




ブログ全体の文字を変更する場合



スタイルシートから下のような body の設定箇所を探します。

body {
font-family : "Times New Roman", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", "Osaka",sans-serif;
text-align : center;

font-size : 85%;
line-height : 150%;
color : #333;
background-image : url("http://blog-imgs-32.fc2.com/n/o/v/noveltemplate/ko041-31.jpg");
background-repeat : no-repeat ;
background-position : right bottom;

}



テンプレートによってそれぞれ設定が違いますが、文字に関係する設定は、color :  (文字色) font-size  (フォントのサイズ)と line-height (行間)の数値です。赤字の部分で文字の大きさを変更し、それによってバランスが悪くなった場合には青字の部分の行間の数値も変更します。文字色を変更する時は茶色の部分の数値(カラーコード)を変更します。カラーコードは記事の編集部分のパレットのツールバーで主要な色のコード番号は確認できますが、もっと多くの色や背景とのバランスなどをチェックしたい時には、TAG<index>さまのカラーチャートのページがおススメです。

注意 テンプレートによっては、文字のサイズを基準としてボックスの幅、余白を指定してある個所があります。文字サイズを変更することによってテンプレート全体のレイアウトが崩れることがありますのでご注意ください。

個別記事ページの小説本文の文字を変更する


それぞれのテンプレートのスタイルシートの中から、個別記事の設定部分を探します。

PF・PF2タイプ以外の場合

/*エントリー2:個別記事ページ(小説ページ)*/
.entry_text2 {
margin : 0px;
padding : 20px 80px 30px 70px;
font-size : 120%;
line-height: 200%;
background-image : url("http://blog-imgs-32.fc2.com/n/o/v/noveltemplate/ko041-31.jpg");
background-repeat : no-repeat ;
background-position : right bottom;

}



文字の大きさを変更する場合は font-size  の赤字の数値を、行間を変える場合は line-height の青字の数値を変更します。
その際、文字の大きさにあわせて、左右の余白も変更する必要がある時には、padding : の数値で調整します。
右の余白を変更する時は緑色の部分の数値を、左の余白を変更したい時にはピンク色の部分の変更します。
(paddingの数値が四つ並んでいる時は、上・右・下・左の余白を設定しています。一つであれば、上下左右全ての余白がその数値、二つであれば、最初の数値が上下、もう一つの数値は左右の余白を設定しています)

注意  2012.10.6.追記改訂版のテンプレートはリキッドレイアウトで組んでありますので、margin や padding がパーセンテージで指定されていたり、最大横幅等 max-width _width が指定されている場合があります。それらの数値や単位を変更すると縮小画面でレイアウトが崩れることがあるのでご注意ください。

PF・PF2タイプの場合

#permanent .entry {
margin:0 0 0 1em ; padding:1em 2em;
color: #333333;
background-color: transparent;
line-height : 200% ;text-align: left; _width:95%;overflow: hidden;
}


PF・PF2タイプは、bodyにフォントサイズの指定記述がありませんが、font-size :100%なので省いてあります。上の#permanent .entry の設定にも font-size  の指定がありません。この場合、フォントサイズを指定している直近の祖先ボックスの指定がそのまま継承されます(上の場合は、bodyfont-size : 100%;  )これを変更する場合には、font-size : ●●%; のように新たにフォントサイズを指定する内容を書き加える必要があります。



通常ブログ画面の文字の大きさを変更する


スタイルシートの中から以下の部分を探します。

PF・PF2タイプ以外の場合

/*エントリー:記事部分*/
.entry_text {
margin : 0px;
padding : 5px 20px 10px 20px;
line-height : 170%;
border-top : 1px dotted #693 ;
border-bottom : 1px dotted #693 ;

}


上の例では、.entry_text  の設定には font-size  を指定している記述がありません。この場合、body の設定、つまりfont-size : 85%;  の指定がそのまま反映されます。これを変更する場合には、font-size : ●●%; のように新たにフォントサイズの指定を追加します。

PF・PF2タイプの場合

#page .entry {
margin : 0 0 20px 0 ;
padding : 0 2em 2em 2em ;
color: #333333;
font-size : 90% ;border-top : 4px dotted #ADD8E6;
line-height : 180% ;letter-spacing: normal ;
}


1em = 1文字分の長さ  1px = 画面上の1ピクセル



注意:エントリー関係の設定は、個別記事ページ・通常ブログ画面固有のものだけではなく、他のページ(エリア)の表示と共用している場合があります。その場合には、設定を変更する事によって、その設定を共有している他のページの文字の大きさも変わりますのでご注意ください。

尚、個々のテンプレートの文字の変更に関するご質問・お問い合わせはご遠慮ください。カスタマイズなさる場合は、上の記事内容を参考に、ご自身の判断責任、そしてご自力でお願い申しあげます。

2012.10.6.追記上述した理由から、この記事はコメントできないように設定してありますが、文字の変更にについては、例え別記事からご質問を寄せられても、ご返答することはありませんので、悪しからずご了承ください。

カスタマイズはあくまでご自身のできる範囲内でとお願いしております。上の記事だけでは出来ない、わからないという場合、このカスタマイズはご自身が出来る範囲を超えているとご理解ください。現状での文字変更は諦め、スタイルシートの基本を学ぶ等、スキルアップなさってから、ご自力でトライしてください。

関連記事
スポンサーサイト
Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加Buzzurlにブックマーク
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
携帯用Novelテンプレート 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
表紙ページ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
Novel List 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
目次ページ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
小説本文(個別記事)ページ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
イラストリスト 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
その他・共通ページ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
携帯用テンプレートのカスタマイズ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
テンプレート別のカスタマイズ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
サイト内配布テンプレート 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
テンプレートの衣替え 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
裏技カスタマイズ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
novel-tempタイプ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
novel-Sタイプ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
novel-Rタイプ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
novel-Gタイプ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
novel-Jタイプ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
novel-Cタイプ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
素材屋風テンプレート 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
疑似フレームテンプレート 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
novel-PF2タイプ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
夢小説用テンプレート 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
イラストリスト付きテンプレート 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
携帯用テンプレート 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
一般ブログ用テンプレート 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
不具合の修正 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
その他お知らせなど 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
管理人のおススメ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
雪の女王 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
銀河鉄道の夜 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
坊っちゃん 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
幸福の王子(夢小説サンプル)  3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
総もくじ  3kaku_s_L.png 画像のためのカテゴリ共有テンプレート画像のためのカテゴリ
人物イラストのためのカテゴリ 3kaku_s_L.png 文字のカスタマイズ(フォントサイズ・色・行間・左右の余白の変更)
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
*Edit ▽TB[0]
関連カスタマイズ記事一覧 カスタマイズの難易度3 
   

名前変換フォーム

Script by
ブログで夢小説!ユメミル?
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。