Prototype Templates

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

RSS     Archives     Mail
Comments
 

スポンサーサイト

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

CSSを操作し、自然改行と強制改行で行間(行の高さ)を変える方法。

 

美咲さんからご意見いただきました。
美咲さんが意図していることと微妙に異なるかもしれません。そのときはゴメンナサイ。

まず、自然改行というのは、「一行がブロック範囲(つまり記事が格納されているボックスの横幅ですね)よりも長くなり過ぎて、(“Enter”もしくは“Return”キーを押さなくても)折り返して自然と改行されること」と定義します。
そして、強制改行とはその反対で「“Enter”もしくは“Return”キーを押すことによって意図的に改行させること」と定義します。

デフォルトの設定では、どちらも同じ行間(行の高さ)になりますが、CSS(スタイルシート)の設定を変更することによって変えることが出来ます。
それによって、<p>タグを用いなくてもメリハリのある文章構成を実現することができます。

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

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

2. そのページをスクロールしていくと、HTMLやスタイルシートを編集することができるテキストボックスが存在します。
HTMLは関係ないので、「スタイルシート編集」のテキストボックスを一番下までスクロールします。
すると、末端に下の画像のような部分が出てくると思います。

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

3. 末端にマウスポインタを置き、1、2回改行します。
そして、
.article br {margin:0px 0px 24px 0px;}
と記入します。(上をコピーアンドペーストしてください)
そして、右下の「更新」ボタンを押します。

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

24px”を“32px”などと変更することによって、より行間(行の高さ)をひろげることができます。ただし、半角英数字で記入してください。

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

プレビューで確認すると、メリハリの無かった文章構成が、

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

このように、見やすくなるのではないかと思います。(変わらない場合はブラウザの「更新」ボタンを押してみてください。)

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

Comment

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2010.10.02(Sat) | -(#) | Edit

美咲さんへ

なんか申し訳ないです~。
リンク先のブログもパスワードが必要だったみたいで、投稿自体を確認することが出来ませんでした。

何が問題なんでしょうね?
お力になれなくて残念です。



一応、思い当たる解決方法を記したエントリーのリンクは貼っておきますね~。

CSSを操作し、自然改行と強制改行で行間(行の高さ)を変える方法。
http://prototypetemplates.blog102.fc2.com/blog-entry-8.html

文章全体の行間(行の高さ)を変える方法。
http://prototypetemplates.blog102.fc2.com/blog-entry-9.html



また機会があったらお願いします☆ありがとうございました!

2010.10.02(Sat) | 管理人ノヴィオ(#-) | Edit

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