Cocoro+et+Gokoroのキタガワです。
はー。
最近はがんばって毎日更新していたのに、昨日はアップに至りませんでした。
（息子の妨害に遭いw←と、人のせいにする…）
まあ、気を取り直して。
先日、久々の大きな地震の揺れとともに、このブログのアクセスが大きく揺れました。
いや～…。
すごいですね。
もはや、地震よりビックリです。
ちょっと不謹慎でしたら、すみません。
アメブロの神様の力を実感しております。
やっぱりね、なんといっても、その実績と信頼感です。
「この人が紹介するなら…」と。
それがこういうカタチになるんだな…とよくわかりました。先生、ありがとうございました。
これを機にご登録いただいた皆様にも、今後もお役に立てるよう私もがんばります。
さて、今回は先日書いた「フォント」の続き。「行の高さ」について、です。
前回の「フォント」についての記事はこちらです。「行の高さ」とは、行間の空きがどのくらいあるか、ということです。
これをCSSで設定する際には、色んな単位で設定できますが、ここでは数値のみで指定することにします。
アメブロでの設定変更方法は後ほどお伝えするとして、まずはその違いをご説明させていただきます。
行の高さを指定するには
line-height: (数値）;
を使います。
たとえば
（１）「line-height: 1.0;」でと書いた場合。
おはようございます。
Cocoro+et+Gokoroのキタガワです。
Cocoro+et+Gokoroのキタガワです。
（２）「line-height: 1.5;」で指定した場合。
おはようございます。
Cocoro+et+Gokoroのキタガワです。
Cocoro+et+Gokoroのキタガワです。
（３）「line-height: 2.0;」で指定した場合。
おはようございます。
Cocoro+et+Gokoroのキタガワです。
Cocoro+et+Gokoroのキタガワです。
上記はいずれも、一度しか改行していません。
この「数値」のみでサイズ指定する場合は、フォントの大きさを基準に、
（１）であれば、100%、つまり1行
（２）であれば、150%、つまり1.5行
（３）であれば、200%、つまり2行
となります。
現在のアメブロでは初期設定値は「1.5」です。
悪くはないんですが、個人的に若干の狭さを感じるので、1.8に設定しています。
設定時に、色々な数値を入れてみて、ブログの「見映え」を確認しながら、数値を入れてみてください。
それではやり方を誤説明しますが、現在の設定（1.5）でなんの不満もないわ、という方はスルー絶賛推奨。
もっと広くしてみたい！という方はトライしてみてくださいね。
この設定はCSS編集用スキンをお使いの方のみできることになりますのでご了承ください。
CSS編集用スキンの編集画面はこちら。
先日は書きませんでしたが、この(1)文字のスタイル、には４つの項目があります。
(1-1) 全体の文字
(1-2) ブログタイトル文字
(1-3) 記事/メッセージボード内の文字のスタイル
(1-4) サイドバー内の文字のスタイル
それぞれの箇所に適した設定を入れると、しっかりと反映されます。
今回「行間」を、先日のフォントと同じように「(1-1) 全体の文字」のところで入れてしまうと、ブログ全部の行間が広くなることになって、びろ～んということに。
そこはアメーバさんの方でいい感じに設定してくれているのでいじらないことにして
今回は記事本文に影響するところ、「(1-3) 記事/メッセージボード内の文字スタイル」に設定を追加します。
一番上に記事タイトルの文字サイズやスタイル・色の指定がされているので、その下に以下のCSSを追記してください。
/*記事本文の文字設定*/
articleText{
font-size: 14px!important;
line-height: 1.8!important;
}
「!important」というのは、このスタイルを優先させてください、とプログラムに伝えるためのものです。念のためつけておきます。articleText{
font-size: 14px!important;
line-height: 1.8!important;
}
ちなみに私のCSSではこのように（↓）設定されています。
指定する順番が違っても大丈夫です（笑）
!importantは入れても反映されなかった場合につけています。
あとついでですが、先日のフォントの種類。
これも、「記事内のフォントだけ変えたい」という時は、ここに加えます。
ブログ全体はゴシック体でいいけど、記事本文だけ明朝体を使いたいわ、という場合。
/*記事本文の文字設定*/
articleText{
font-family: “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif!important;
font-size: 14px!important;
line-height: 1.8!important;
}
articleText{
font-family: “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif!important;
font-size: 14px!important;
line-height: 1.8!important;
}
と入れると、大丈夫！（なはずw）
全く設定が反映されない…という時は
「:」や「;」やスペースが半角になっているか
誤字はないか…などをチェックしてみてください。
他にも、競合して打ち消し合ってるような設定はないか、など、犯人探しは大変です。
またお使いのブラウザのバージョンによっては設定が反映されないこともあるかもしれません。
特に游明朝体はWindows8.1以降に追加されたフォントなので、それ以前のOSをお使いの方には、別の作業が必要になったり増します。
ブログをお仕事で書かれている方には、必要以上にパソコン作業に時間を取られるのは困りものです。
あまり根を詰めずに、楽しめる範囲でやりましょ～。
ではでは、2200文字の長文にお付き合いいただきありがとうございました。
追記：
CSS等の変更後、ブログから見ると変化が見られない、という場合があります。
ブラウザには「キャッシュ」というパソコン上で記憶する情報があり、古いキャッシュが表示されている、可能性があります。
WindowsでしたらF5キー、MacでしたらCtrl+Rで、画面を何度かリロードしてみてください。
何度リロードしても変わらない…という場合は、他の原因が考えられます。
ご相談くださいませ。
CSS等の変更後、ブログから見ると変化が見られない、という場合があります。
ブラウザには「キャッシュ」というパソコン上で記憶する情報があり、古いキャッシュが表示されている、可能性があります。
WindowsでしたらF5キー、MacでしたらCtrl+Rで、画面を何度かリロードしてみてください。
何度リロードしても変わらない…という場合は、他の原因が考えられます。
ご相談くださいませ。
Cocoro+et+Gokoro（こころ・え・ごころ）
北川 直枝
ブログづくりワークショップ
次回予定【ブログ更新をラクにするベースづくり/AmeCare&Facebook】
★開催日等ご案内を受け取りたい方はこちら！
Cocoro+et+Gokoroその他のメニュー
60分無料【アメブロ初心者向け】ブログオリエンテーション
アメブロフルカスタマイズ（現在新規募集しておりません）
ブログづくりワークショップ参加者限定記事はこちら
次回予定【ブログ更新をラクにするベースづくり/AmeCare&Facebook】
★開催日等ご案内を受け取りたい方はこちら！
Cocoro+et+Gokoroその他のメニュー
60分無料【アメブロ初心者向け】ブログオリエンテーション アメブロフルカスタマイズ（現在新規募集しておりません） ブログづくりワークショップ参加者限定記事はこちら