研Q34.ブログの行間をHTMLタグで部分的に詰める方法 - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

研Q34.ブログの行間をHTMLタグで部分的に詰める方法

2分の1改行タグなど、ワンポイントの改行幅設定ができます。

Return
 Return ,on Flidkr


ワープロソフト「一太郎」を使ったことがある方は、行と行との間隔を設定する「改行幅」という考え方がおなじみだと思います。


MS Wordの場合は、「行間」ということばを使っていて、段落内の行間を設定できます。

また、段落の前後の間隔を設定して美しい文章に仕上げるテクニックは、プロのWord使いには常識です。

ブログでは、どうしてそれができないの?

いえ。もちろんブログでも行間を自由に設定することができます。


ブログの行間の設定はCSSで行います。(基本)

CSS(スタイルシート)に、行間をどう表示するかが書いてあります。

line-heightという行の高さを指定するプロパティを使います。

高さの指定は、
line-height:1.4
などのように、数値で指定できます。

ここで「1.4」というのは、文字の高さを「1」として、次の行との間隔が「1.4」という意味です。

行の高さの指定

このように単位なしの数字だけで指定するほかに、次のような単位をつける方法もあります。

・「em」という単位をつける方法。(1.4em など)
   単位なしと同じ結果になります。
・「%」をつける方法。(140% など)
・「px」でピクセル値で指定する方法。(22px など)


文章の中で使うときは単位なし、
枠囲いの中などで見た目をきっちり決めたいときは「px」を使うのがいいのではないかと、
僕は考えています。

アメブロのブログ本文の行間の高さをCSSで設定する方法は、
わざめーばさんこの記事をご覧ください。(新「CSS編集用デザイン」用)
【新】アメブロの記事本文をカスタマイズする方法|アメブロカスタマイズで人が集まるブログ作り

もし、あなたのCSSに「line-height」の指定が書いてない場合。

カスタマイズ用に開放されていない、ブログ大もとのCSSに書いてあります。

CSSはあとから指定したものが優先になりますので、
わざめーばさんのコードをユーザーCSSの末尾に追加すればだいじょうぶです。


では、基本はいいのだけれど、記事の一部分だけ行間を設定したい場合は・・・


記事の一部分だけ行間を設定する方法。

line-heightプロパティはHTMLタグの<div>タグに組み込むこともできます。

<div style="line-height: 1.4">~~<div>


いくつか実例を使ってご説明します。

このブログはCSSで行間の高さが1.4に設定してあります。


まずは、line-height:1.4から。

この部分は「line-height:1.4」に設定してあります。
基本の改行幅1.4です。
このようにブロック部分の行間を設定する場合は<div>タグが使えます。

基本の改行幅なので、ほかの文章部分と同じ行間の高さですね。

見やすいように、<div>タグに枠線を追加してあります。
使ってある開始タグは、

<div style="border: 1px solid; line-height: 1.4;">

border: 1px solidの部分が枠線です。

もちろん、枠線なしで使うこともできます。

この部分は「line-height:1.4」に設定してあります。
枠線なしで、
行間の高さだけを設定することができます。


こんどは、line-heightを「1」にしてみます。

この部分は「line-height:1」に設定してあります。
行と行の間に空間がなく、
基本の改行幅1.4よりも行間がつまっています。


行間の高さ=文字の高さ になっているので、当然スキマはゼロです。

こんな読みにくい表示は実際には使えませんが、こんなふうになるという見本です。

あとは、数値の部分を変更しながらプレビューを確認すると、ちょうどいい行間が見つかるでしょう。


2分の1改行(改行1個だけ行間を設定する。)

HTMLの改行タグは<br /> です。

<br />を line-height:0.7つきの<div>タグではさんでやると、2分の1改行ができます。

<div style="line-height:0.7"><br /></div>

サンプルです。

2分の1改行をするためには改行タグ<br />をline-height:0.7で挟みます。


この部分に、2分の1改行が入れてあります。改行を入れずに右端で折り返した場合は、このように基本の改行幅になります。



普通の改行タグ<br />を入れた場合と、比較してみてください。


使用するエディタやブラウザーによって結果が違ってきます。

この記事は、ファイアフォックスを使って、FC2ブログの記事エディタで記事を編集しています。


結果がどのように表示されるのかが大切なので、記事のプレビュー機能を使って行間がどんな感じになっているのか確認しながら設定すれば安全です。


実はこの記事、カエレバカスタマイズの一環なのです。

カエレバのリンクをカッコヨク表示したくていろいろいじっているうちに、
line-heightで行間を調整する方法にたどり着きました。




外部リンク:
【新】アメブロの記事本文をカスタマイズする方法|アメブロカスタマイズで人が集まるブログ作り


クリエイティブ・コモンズ 表示 - 継承 2.1

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
グーグルリーダーに登録 Subscribe with livedoor Reader My Yahoo!に追加 
ツイッター でも、更新案内を流しています。                          
RSSリーダーとは?⇒ RSSってなんなの?
  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
記事末尾110posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

トラックバック

http://aminamura.blog.fc2.com/tb.php/34-5d345975

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。