ＣＳＳ攻略第二弾！「フォント重なりまくり」 インセンティブ
みなさんこんにちは。複雑系自営業者のコンプレクソロジストです。ハロー。
コメントの文字拡大は結構皆さん困っていたようで、私としてもお役に立ててとても嬉しいです。
ご自分のブログで質問された際に、こちらを紹介してくださってもちろんかまいません。リンクも無断でご自由にどうぞ。
リニューアル後２日経ってみて、いろいろと問題が浮き彫りになってきた感があります。
とりあえず記事を書く機能は極悪（笑
皆さんかなりの不便を感じていらっしゃることと思います。
表示面では、大きなフォントを使ったときに文字が重なってしまう場合があります。これは後ほど解決方法をご説明したいと思います。
それと、最悪なのがスキンによってはコメントのリンクをクリックしても、コメントが全く表示されない（私が確認したのはエターナルサンシャインのスキン）。
これって、不具合としては最悪レベルだと思います。私が勤めていたところでリリース後にこの問題が出たら始末書で済むかなぁ・・（笑
システム開発において最も重要な行程は試験（テスト）ですが、アメブロのシステムはこの試験のレベルがあまりにも低いことが分かりました。
試験の品質が低いということは、システムの品質が低いということです。
はっきりいって、システム開発のリーダーを変えるしかないと思いますね。誰かしらんけど（笑
もしどこかに発注を出しているのなら、まるごと変えたほうがいいです。
昨日は彼女と二人で買い物にいってまいりました。
近所にかなりでっかいショッピングセンターがあるんですが、いつもは必要なお店だけ行くんですよね。
昨日はいつもは行かないような所も回ってみたんですが、前と比べて子ども服やらおもちゃやらを売っているところが増えていたことに気づきました。
子ども関連のお店が増えてるんです！
このショッピングセンターには、他のスーパーや百貨店では考えられないくらいに子ども連れの方が沢山います。
ざっと見回して、子ども１０人くらいは数秒で見つけられるほど子ども密度が高いのです。
昨日は本当に産まれたばっかりと思われる、すんげーーーーーーーーーーーー小さい子どもをクビからぶら下げて、さらにもうちょっと大きい子どもを２人連れているお父さんをみかけました。
ちなみに以前この記事でご紹介した通り、私は背後になんか憑いているらしく、子どもに凝視される体質（？）です。
このショッピングセンターに行くと、私は注目の的！ｱﾂｲ視線を感じまくります。
もちろん、子ども連れの方が多いのはショッピングセンターの企業努力によるものです。
子どもをお持ちの方が行きたくなるような環境を整えています。
まず、車みたいな形の妙なショッピングカートがあります。
子どもをここに格納して上に商品を載せられるような構造をしています。
内部にはハンドルなんかがついていて、子どもが楽しめます。
「おうちかえりたーぁいーーーーかえりたぁーーいいー」と言い出すのを防止するすばらしいアイデアです。
センター中央の広場には子どもが遊べるようなところがあり、トイレには（男子用でも）子どもホルダー・・・なんていうの？あれ（笑）。
なんか、子どもを一旦座らせる場所があったりします。あ、そうそう、確か授乳室なんかもありますよ。
私はインセンティブという言葉が好きです。
日本語に訳すと、誘因（ゆういん）とかいうわけわからない言葉（笑
誘因の意味は
(1)ある作用をひき起こす原因。ある物事が成立する原因。
となります。
このショッピングセンターは、子ども連れを集客するためのインセンティブとして車の形をしたカートを用意しています。広場も、トイレの子どもホルダーも、授乳室もすべて子連れ客を集めるインセンティブと言えます。
私はもうアメブロのランキングから抜けていますが、上位を狙っている方にとっては、ランキングはブログを続けるためのインセンティブになっていると思います。
また、更新や作成が簡単であることは、多くの人にとってブログを続けるための重要なインセンティブであるはずです。
逆に言うと、簡単だからブログをやっているわけです。
ＣＳＳ編集は本来上級者向けであるはずの機能ですが、昨日の記事でご紹介した「コメントが小さい」とか、今日ご紹介するＣＳＳ対策はこれを行わないと不具合が生じるような内容のもの。
私は、インセンティブを失ったブロガーがアメブロを離れていくことを懸念しています。
別にアメブロを運営しているサイバーエージェントの心配をしているわけではなくて、せっかく仲良くなれた方がいなくなるのが寂しいのです。
正直言って私にプログラマの経験がなかったとしたら、これらの対応は相当しんどいと思います。
上級者向けの作業を強要するようなクサレシステム。
ユーザのインセンティブを奪う矛盾したサービス。
これはなにをおいても早急に対応する必要があります。
そして、授乳室があるショッピングセンターには、子連れ客が集まるのだというビジネスにおいて基本的なことをもう一度考え直してもらいたいものです。
私の予想ですが、来週のサイバーエージェントの株価は下がると思います。
株価の下落がまともなシステムを作るためのインセンティブになってくれればいいなぁなんて思ったりして（笑。
さて、今日ご紹介する対応は、フォントが重なってしまう現象の対策。
私は記事を書く際にあまりフォントを大きくしませんが、多くの方がこのくらいのでかいフォントを使っていらっしゃいます。
今回のリニューアル後からでかいフォントで長い文章を書いた場合に、文字が重なってしまう不具合があちこちで発生しています。
具体的には
このような状態になってしまいます。
これもやはりスタイルシート(CSS)の問題点です。今日はこの現象を解決する方法をご紹介します。
まず、ＣＳＳ編集初心者の方は私の昨日の記事をご覧下さい。この内容を把握している前提で説明致します。
今日の修正は２カ所必要です。
ＣＳＳの編集画面を開いて下さい。ＣＳＳ本文の中から
line-height:
を検索してください。
多分、多くの方のブログでは
.entry .contents{
line-height: 150%;
}
こんな風に書かれていると思います。この 150% のところを 1.5 に修正します。
.entry .contents{
line-height: 1.5;
}
このようになります。
ちなみに、この1.5という数値は、元の150%を●●倍に変換した数値となります。
150%だったら1.5 もし200%だったら2と記述してください。
この修正が終わったら、続けて同じように
line-height:
を検索します。ＣＳＳ全体で、５～６件該当するところがあると思います。
その最後のほう・・・
.entry .contents p,
#message .contents p{
font-size: 12px;
line-height: 150%;
}
このような部分が見つかるまで飛ばして下さい。
見つけるポイントとしては .entry .contents p と書いてあるところを探す感じ。
ここもさきほどと同じように 150% を 1.5 に修正します。200% の方は 2 にします。
.entry .contents p,
#message .contents p{
font-size: 12px;
line-height: 1.5;
}
最終的にこのようになります。
先ほどの箇所とあわせて２点、修正が完了したらプレビューで確認をしてみて下さい。
変更する前と比較すると、他の文字の位置もほんのわずかだけずれるのですが、大した違いはないはずです。
確認できたら保存ボタンを押して、作業完了です。
この修正についてはいくつかのスキンで試してみましたが、全てを網羅しているわけではありませんので必ずプレビューしてみて下さい。