Prototype Templates

シンプルなブログ用テンプレートの配布を目的としたブログです。

RSS     Archives     Mail
Comments
 

スポンサーサイト

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

文章全体の行間(行の高さ)を変える方法。

 

先程、「CSSを操作し、自然改行と強制改行で行間(行の高さ)を変える方法。」をエントリーしました。
文章構成にメリハリを付けたい場合にこの方法は有用ですが、ただ単純に行間(行の高さ)だけを変えたいという人もいるでしょう。
もっとゆとりをもたせた行間(行の高さ)にしたい。」逆に、「行間(行の高さ)をつめて文字密度を高めたい」と思っている人はこのエントリーの方法を実行してみてください。

1. まず、管理ページを開き、左サイドカラムにある「環境設定」項目にある「テンプレートの設定」をクリックし、ページを開きます。
ダウンロードした「prt_halloween021」のHTML CSS(スタイルシート)の「編集」をクリックし、ページを開きます。

手順1
クリックすると、ちょっと大きな画像で表示されます。

2. ブラウザの上部「編集」>「検索」を選択し、「.article」と検索してください。
すると、「スタイルシート編集」のテキストボックス中にある「.article」の部分にフォーカスが当たると思います。
そこには、

 .article {
  width:490px;
  margin:0px 30px;
  color:#333333;
  overflow:auto;
  voice-family: "\"}\"";
  voice-family:inherit;
  overflow-x:auto;
  overflow-y:visible;
 }

とあると思うのですが、「color:#333333;」と「overflow:auto;」の間に一行空きを作り、そこに

line-height:180%;

と半角英数字で記入してください。
スペースなどを入れて他の行と左合わせする必要はありません。全角文字は含ませないように!

そして、右下の「更新」ボタンを押して、プレビューなどで確認します。

180%」という数値は暫定であり、「200%」としてもいいですし、「1.5」「2」といった数値のみを記入してもかまいません。
いろいろと試行錯誤を繰り返し、最も良い値を見つけるのもいいでしょう。

以上、「文章全体の行間(行の高さ)を変える方法。」でした。
※HTMLもしくはCSS(スタイルシート)のソースをカスタマイズすることは、ご自身の責任で行ってください。管理人はその責任を一切負いません。

Comment


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