ブログのカテゴリーが多くなってしまったので、CSSですっきりさせてみたよ
書きたい事を書いていたら日に2回ブログ更新してしまっておりますが、新しいものを始めた時の勢いがあり余っている状態なのだと思います。
多分そのうち速度も落ちてくると思うので、今のうち今のうち。
個人的には14日坊主を目指したいところです。
半月くらいは毎日ひとつは何かしら投下出来たら、そこそこ偉いんじゃないかと勝手に思っているので…
あと、それくらい記事が溜まればどれかひとつくらいはわざわざ見に来た方の役に立ったり、いい暇つぶしになる内容もあるんじゃないかな～という魂胆です。
そんな訳で、ブログを見易く使い易くするのも工夫のうち。
タイトル画像を入れた時は、見栄えを少し自分のブログっぽく出来ればという感じでしたが、
今回は利便性も少しはあるかなという感じ。
記事が増えたらカテゴリーもぽんぽんと増えてしまったので、サイドバーのカテゴリー表示が結構長くなってどうしたもんかな…と思い始めたので、CSS（スタイルシート）を弄ってサクッと左詰めにします。
カテゴリー一覧をCSSで左詰めにする
＝＝＝＝＝
.hatena-module-category .hatena-urllist {
display: table;
width: 100%;
}
.hatena-module-category .hatena-urllist li {
display: table-cell;
margin-right: 12px;
float: left;
}
＝＝＝＝＝
こんな感じのコードを、「デザイン」→「カスタマイズ」→「デザインCSS」にぺいっと貼り付けます。
コード入力ウィンドウの後ろのプレビューでは、既に左詰めになっていますね。
コードの前にコメントアウトで何のコードなのか説明を入れておくと、後で変更する時も分かり易いので入れています。
しかし、ここでうっかりをやらかしていて後々悲劇が…
変更したらすぐ確認、そしてトラブル発生
何かしら追加や変更を加えた後は、実際のブログを見てきちんと反映されているか確認します。
実際のブログのサイドバーを見に行くと、ちゃんと左詰めになっていますね。
でも、直下にあった検索の項がなにやらおかしいぞ。
対策を模索する
検索のタイトルと枠が、何か干渉しているのでしょうか？
試しに検索とその下の月別アーカイブを入れ替えてみます。
あるぇ～～～～～～？
アーカイブの文字列が分断されて、余計に変な表示に。
ということは、どういうことだ…？
変更したコードが反映されたすぐ下にあるのがいけないのかなと思って、HTMLを入れられるモジュールで空白の項を作って挟んでみますが…
全く効果なし＼(＾o＾)／
犯人はこいつだ
なんでだ、どうしてだとしばらく悩んで、追加したCSSコードと睨めっこして、単純なことにやっと気付きました。
ほぼ始めに書いてある通りなのですが、コードを見易くするためのコメントアウト…
そこの頭にいらない「#（半角シャープ）」が入っていたんです。
ごん、お前だったのか…
いつもこっそり#を付けて、場を混乱に陥れて笑いを誘ってくれたのは…
原因が分かったので、サクっと消します。
さらばごん、じゃなくて余分な#。
そして正常な表示へ…
はい。
まあ、はい。そうですね、何も難しい事はありませんね。
こんな風に、簡単にカテゴリーを左詰めに出来ました。
私がポカをやらなければね…！！
他にもCSSを使って二列表記にしたり、カテゴリーに角丸のボタンっぽい背景を付けてみたりする事も出来るので、自分のブログをお洒落にしたい方はググってみてください。
少し検索しただけでも色んな情報が出てくるので、Google先生にはいつも助けられています。
かつてのように嘘情報を流して怒られていたサイトや運営会社とかもありましたけど…
嘘か本当かを見抜くにも、知識や注意深く検証する余地なんかが必要なんですよね。
私も複雑なコードを自分でパパッと打てちゃうくらいの知識と腕があったらいいんですが、一朝一夕に出来るものじゃないのでなかなか、ね。
