彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




*    *    *

Information

□ 使用方法 □

for_novel シリーズ 文字サイズやページの幅を変更する

 当テンプレートは、記事本文の文字サイズをブラウザのデフォルトサイズに設定して、それに見合った(と作者が個人的に考えている)横幅でページを作っています。

 ですが、もっと小さい文字を使って小ぢんまりとしたページ幅にしたい、 とか、もっと大きな文字で広く画面を使いたい、とか、また、大きな画像を広いスペースに貼り付けたい、などなど、色々な使い方を希望される方がいらっしゃる事だと思います。

 

文字サイズの変更方法


 スタイルシートの最後の方にある、「文字の設定」を見てください。

/* 小説用テキスト */
.novel { font-size:100%; line-height:170%; margin:50px 15px 25px 15px; }

/* メインテキスト */
.text { font-size:88%; line-height:170%; margin:30px 0px; }

/* サブテキスト */
.memo { font-size:80%; line-height:150%; margin:10px 0px; }


 主に使われている文字の設定は、この三つになります。上から、
 ・個別記事画面での記事本文の文字
 ・通常ブログ画面での記事本文の文字
 ・個別記事画面で表示されるコメント本文の文字
となっています。
 それぞれの「font-size」の値がどのようなサイズで表示されているのか確認の上、ご自分にあった文字サイズに変更してください。
 その際、閲覧する方が各々ブラウザで文字の大きさを変更出来るように、%で相対的に文字サイズを指定するようお勧めします。

 

ページ幅の変更方法


 同じく、スタイルシートを見てください。最初の方にある「レイアウトの設定」に

/* ページ全体枠 */
.page { max-width:700px; min-height:100%; border-right:solid 10px #******; padding-right:10px; margin:0px auto; }
* html .page { width:700px; width:expression( document.body.clientWidth > 700? “700px” : “auto”); }

という記述があります。
 単純に、この赤文字の部分を、ご希望のページ幅に変更していただければOKです。


 次に、通常ブログ画面でのサイドカラムとメインカラムの幅についてですが、「ページ全体枠」の次の行を見てください。(古いバージョンのテンプレートの場合は、スタイルシートの下の方にあります)

/* カラムレイアウト */
.side { width:200px; float:right; }
.main { background-color:#******; padding:1px 10px 10px 10px; margin:10px 210px 20px 0px; }


 サイドカラムの幅が、赤字の部分です。メインカラムの幅は、青字の右マージンで決められる事になります。
 つまり、現状からサイドカラムの幅を変更する必要がないならば、メインカラムの数値を変更しなくともその幅はページ幅の変化に合わせて自動的に拡大・縮小される事になるのです。
 逆に、サイドカラムの幅を変えたい場合は、上で赤字で示した「サイドカラムの幅」以外に、青字の「メインカラムの右マージン」も変更する必要があります。

「サイドカラムの幅」+「両カラムの隙間 10px」=「メインカラムの右マージン」

という関係にご留意の上、カスタマイズを行ってください。


 ちなみに、個別記事画面のコメント欄の幅については、

/* 個別記事コメント枠 */
.comment { border:solid 1px #******; padding:10px; margin:20px 0px 0px 210px; }

にて、上のメインカラムと同様にマージンで設定しています。
 幅を広げたい時は、この青字の左マージンの値を減らし、狭めたい時は値を増やしてください。


 最後に、ページ幅の変更に合わせて、スタイルシートの最後にある、「画像サイズ調整」も変更する必要があります。

/* 画像サイズ調整 */
.main img { max-width:440px; height:auto;}
* html .main img { width:expression( ImageWidth > 440? “440px” : “auto”); }
.novel img { max-width:640px; height:auto;}
* html .novel img { width:expression( ImageWidth > 640? “640px” : “auto”); }


.main img」の440という数字は、「ページ幅 700px」から「サイドカラム幅 200px」と「もろもろの余白 60px」を差し引いた値です。
.novel img」の640という数字は、「ページ幅 700px」から「もろもろの余白 60px」を差し引いた値です。
 上で変更した数値を元に、この二つの数字を訂正してください。その際、マージンやパディングを変更していない場合は、「もろもろの余白」は 60px のままにしておいてください。



*    *    *

Information

Date:2009/05/07
Trackback:0
Comment:3

Comment

[242] 

このごろお世話になりすぎている気もしますが・・・

 ページの幅を増やしたのですが・・・

 メイン画面の文字がその分小さくなってしまいました・・・ 文字を大きくしてみたのですが直りません

 よろしくお願いします
2012/03/08 【NoName】 URL 

[243] 文字サイズ

こんばんは。

文字サイズについてですが、先日コメントにいただいたURLからそちらのブログにお邪魔してソースを拝見したところ、新しく追加なさったメニューバーのタグに綴じ忘れを発見いたしました。

リストタグは、
<ul>
 <li>リスト内容</li>
 <li>リスト内容</li>
 <li>リスト内容</li>
</ul>
のように、必ず、<ul> と </ul> の間に
<li> と </li> で囲まれた項目が入れ子になっている必要があります。
そちらのブログは、どうやら最後の </ul> が欠けているようでして、そのために、メニューバーで指定したフォントサイズ font-size: 80% が、そのあとの文字にまで有効になってしまっているのと思われます。

一度、<!--▲ メニューバー ▲--> の直前に </ul> を追加してみてください。
2012/03/08 【GB】 URL [編集] 

[244] 

なるほどwwww  ありがとうございます 解決です^^
2012/03/09 【NoName】 URL 

コメントの投稿

コメント書き込みの前に、是非一度「コメントについて」に目をお通しください。







 ブログ管理者以外には秘密にする

Trackback

TrackbackUrl:http://greenbeetle2.blog117.fc2.com/tb.php/30-fb7a6436
この記事にトラックバックする(FC2ブログユーザー)

 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。