ＣＳＳ攻略第一弾！「コメント文字が見にくいんですよ～」
こんにちは。昨日はスタイルシートをいじくりすぎて、クドすぎるんじゃないかと薄く感じている複雑系自営業者です。ごきげんいかが？
あ、忘れないうちに言っておきます。昨日の書籍化の話なんですけど、お手数ですがもう一度昨日の記事をご覧いただけますでしょうか。
それで、書籍化のことが書いてある部分の左端を、縦に読んでみてください。
そういうことです。
昨日、夜中までブログをいじくりまわしていたわけですが、コタツに入ったまま、隣で寝てしまっていた彼女が、寝言で・・・
「ありがたい、１９９６年のケースそのままだな・・・」
って言ってました。いったいどんな夢なんだ！寝言ですよ、寝言。
そしてしばらくして、今度は
「ちょっと、オオバのホームページおもしれぇーー・・ﾍｯﾍｯﾍ」
って笑ってるんですよ。オオバって誰？（笑
幸福です！幸福がここには存在します。
見ている私もさすがにこれは笑いが漏れてしまいます。
すると私が笑ったのが聞こえたんでしょうね。さらに彼女が
「ハッハッハ」
って笑い出したじゃありませんか。さらに私も笑います。そしてそれを聞いた彼女がまた笑って、それをみた私が笑って。
最終的には夜中に二人で大爆笑！しかも片方は寝ています！
あー変なカップル。最後に彼女が自分の笑い声で「ハゥ」とかいって目覚めました。
「なに？なに？」とか言ってました。
さて、昨日の予告どおり、今日はＣＳＳ（スタイルシート）についてとりあえず必要なところからご説明したいと思います。
いきなり全然知らない人が用途に応じて修正できる内容を目指します。
ＣＳＳとスタイルシートという二つの言葉は同じものを指します。だから同じもんだと思ってください。
今後はスタイルシートのことをＣＳＳと統一して表記します。
【ＣＳＳって、なんか？】
ＣＳＳはブログの書式や色なんかを定義するファイルのことです。例えば私のブログを見ていただくと、スクロールバーが普通の色じゃなかったり、記事のタイトルに影がついていたり、コメントの投稿ボタンの色が違ったりしていますね。
あとは、ブログタイトルもメラメラと熱い情熱を発しているじゃありませんか。
たとえばブログタイトルなんかはアメブロの設定画面でどういじくっても、文字の色すら変えることが出来ません。
もちろんスクロールバーも、コメントの色も変えられません。
ＣＳＳはこういった、記事で変えることが出来ない書式を自分で変更することができる便利なものです。
ＣＳＳは一つのブログに対して一つしかありません。ブログ自体の書式を変更できるものですから、当然といえば当然ですね。
【どこで修正するとですか？】
アメブロのＣＳＳは管理画面から修正が可能です。
管理画面から ＞ デザインと機能 に移動してください。
右の列に 「スキンの選択、サイドバーの設定」などなど、いろいろ用意されていますので、その中の「ＣＳＳ編集」をクリックします。
すると、なにやら呪文のようなものが記述されたボックスが表示されますね。
そうなのよ、それがあなたのブログのＣＳＳなのよ。
これを編集し、下にある保存ボタンをクリックすれば修正が可能なわけです。
また、プレビューボタンで内容を事前に確認することができます。
【注意するべきことがあったら教えてほしいとです】
ＣＳＳを編集する際にはいくつか注意点があります。
ちょっとややこしい内容になりますが、これはとても大事ですから是非読んでおいてください。
まず、ＣＳＳは一旦保存してしまうと元に戻すことはできません。
もし変な記述をしてしまって、保存してしまうと自力で元に戻す必要があるんです。
ですから、編集に際しては十分注意してください。
また、スキンを変更すると、それまでに修正したＣＳＳの内容は全部なくなります。
初期状態に戻ってしまうので、タイトルの色の変更などは再度行う必要があります。
逆に言うと、変な修正をしてしまって「あーもうだめー、誰かたすけてー」っていうときは、スキンを変更してしまえば問題ありません。これで全部元通りになります。
さきほど開いたＣＳＳの内容を見てみます。ちょっと一部を取り出してみますね。
body {
color: #FFFFFF;
font-size: 11px;
}
これは、bodyという名前の書式を定義してあるところ。
ＣＳＳの構造は
名前 ｛
内容 １
内容 ２
・・・
｝
このようになっています。これにてらして上のやつを見てみてください。
また、それぞれの内容は
書式の種類： 書式；
となっています。
できればここで覚えていただきたいのは、まず 名前 ｛ ｝というものが１つの書式を設定しているということ。閉じる ｝ を消してしまったりするとおかしなことになります。｛ ｝ でくくられていることを確認して編集しましょう。
これだけ守っていれば、とりあえずそんなに変なことにはなりません。
また、編集する際には、一旦ＣＳＳの内容をメモ帳なんかに貼り付けておくといいでしょう。失敗しても元に戻せるようにしておきたいものです。
【コメントの文字が見にくいとです】
今後、数回に分けて不定期にＣＳＳ攻略法をお届けする予定ですが、それぞれ具体的な使い方をご紹介したいと思います。
まず、今回はコメントの文字の大きさを変更することから始めたいと思います。
スキンにもよりますが、コメントの文字が小さくなって見にくくなったという方が結構いらっしゃると思います。
これは、コメントのフォントサイズが１１ｐｘ（ピクセル）に設定されており、リニューアル前よりも１ピクセル小さくなったのが原因。
ピクセルというのは画面上での大きさを示す単位です。
なんで小さくしたのかアメブロに小一時間問い詰めたいところです。
先ほど開いた方法で、ＣＳＳの画面を見てください。
適当に内容をクリックして、内容の検索を行います。
インターネットエクスプローラーをお使いの方はＣｔｒｌキーとＦキーを同時に押すと、検索窓が開きます。
ここで
each_comment
という文字を検索してみてください。ありました？
内容はスキンによって異なりますが、だいたい
#comment_module .each_comment {
margin-bottom: 10px;
font-size: 11px;
}
こんな感じで記述されていると思います。さっきご説明したとおり、｛ ｝で囲まれていますね。
このeach_commentの部分が、コメント本文の書式を設定している場所なのです。
さて、中身をみていただくと、３行目
font-size: 11px;
そう、この部分が問題なんですよ！ね、ね、ね。
はっきりいって11pxは小さいです。見にくいと思います。
font-size: 12px;
このように修正しましょう。あとは保存ボタンをクリックするだけです。
これであなたのコメントはリニューアル前と同じサイズになります。
追記：
そもそも、 font-size: 11px; という記述自体がないスキンがあるようです。
その場合は
#comment_module .each_comment {
・・・・（いろいろ書かれている）
}
ここに font-size: 12px; を追加してください。
場所は ｛ と ｝ の間であればどこでもかまいません。
（上げ郎さんサンクス）
さきほど「プレビューボタンで事前に確認ができる」ということを申し上げましたが、コメント欄やトラックバックはプレビューすることができません。
コメント欄の修正は、いきなり保存して確認するしかありませんのでご注意ください。
さて、とりあえず今回はこんな感じでお届けしました。いかがでしたか？
不明な点などコメントしていただけると幸いです。
また、ここが困っている！などという書式上の問題も、今後の記事のネタにさせていただきますので是非お寄せください。