記事下部の「同一カテゴリー記事へのリンク」部分のカスタマイズ

先日、記事の下に同じカテゴリの記事５件を取り出して自動的にリンクを貼ってくれる機能が追加されたものの、「見づらくて使えねー」とボヤいておりましたが、*second messsage*さんで、CSSを使って見栄えを良くする方法を紹介されていました。

さっそく、参考にさせていただき、私もやってみました。
特に装飾はせず、単純に枠で囲むだけにしました。
　
　
念のためお断りしておきますが、この方法が使えるのは、自分でカスタマイズできる「カスタムテンプレート」に限ります。
（リッチテンプレートは、ユーザーは変更できません）

「カスタムCSSを編集」の記述欄に必要な定義内容を付け加えます。

追加したのはこれだけ

.entry-recent-posts{
background-color:#FFFFFF;
border:2px solid #666666;
padding: 5px;
}

　　　の部分は、ご自分のお好みで。

background-color:　は枠の中の背景色

border:　は枠線の設定で
2pxは枠線の太さ、　solid　は線の種類で、これは実線を意味し、#666666は枠線の色を指定しています。

padding: 　は余白です。
　
　
ブログに反映されるまで、数時間かかりました。

これなら、それほど邪魔にならないし、見た目もスッキリ。

修正を入れた記事が上に来てしまうのは「仕様」ということで諦めるしかないようなので、しばらくこれで行ってみようと思います。

記事タイトルのリンク色変更・下線の消し方

ココログの仕様変更により、記事タイトルに個別記事へのリンクが貼られることになり、それによって記事タイトルの色が変わってしまったため、驚いたり困ったり怒ったりしている人が多数いらっしゃることと思われます。

ちなみに、リンクが貼られているのは、トップページやカテゴリ別、月別アーカイブなどに表示される記事タイトルで、個別ページの記事タイトルにはリンクが貼られていないため、仕様変更以前と変わらない文字色で表示されています。

これは「リンク色」を通常の文字とは別の色に指定していた場合に起こる現象で、同じ色に設定していた場合には見た目は何も変わっていないように映ります。

・・・が、このリンク設定が「下線付き」をデフォルトとしているので、とっても厄介なことに。
鬱陶しいのですよ、この下線が。

私は元々、記事タイトルを枠線で囲む設定にしていたため、枠線と下線が重なって見にくいことこの上無し！な状態になっていました。

下線を消すのは簡単なのですが、そうすると記事本文のリンクについても変更されてしまい、これまた分かりづらいことこの上無し・・・

記事タイトルには下線を表示せずに本文中のリンクにのみ下線を残す方法が、悪戦苦闘のすえ、ようやく分かりました。
　　
　　
以下、その手順。

管理画面「デザイン」→「テーマを変更」→「ページ全般の設定」と進みます。
そこで「リンクのスタイル」を決定します。
下線を取りたい場合は下線のチェックを外します。
リンク色が気に入らない場合も、ここで色の指定ができます。

本文中のリンクも下線無しで良い場合は、あとは変更を保存するだけで調整は完了です。

本文中のリンクに下線を残したい場合は、「下線」にチェックを入れたままにしておいてください。
　
　
そうしておいて、　今度は「カスタムCSSの編集」に進み

記述欄に

.content h3 a{
text-decoration : none;
}

の、一文を書き加えて「変更を保存」します。

（上の一文は「記事タイトル部分の文字装飾を『標準』にしますよ」という意味）
　
　
こうすることで、リンク付きになっている記事タイトルには下線を付けず、本文中のリンク部分には下線を付けることが可能になります。
ただ、これだけだと、文字の色は「リンク付き」と同じ色のままです。

　
リンク付きになっている記事タイトルと、本文中のリンク部分の色を別にしたい場合（逆に言うと、記事タイトルの文字色をリンク無しの状態と同じ色にしたい場合）には、次のように記述します。

.content h3 a{
text-decoration : none;
color: #333333;
}

「#333333」の部分は、ご自分の指定したい色のコード（もしくはカラーネーム）に差し替えてください。

コードは「テーマを変更」の中の「記事表示欄」
さらにその中の「タイトル」で確認できます。
「フォントの配色」のところに表示されている６ケタの文字列の頭に＃を加えた物がコードになります。

記事タイトルの文字色として設定されている色をここに記述しておけば、見た目上は仕様変更以前の状態に戻るはずです。

色は元に戻したいけど下線は付いたままで良い場合は、

　　 text-decoration: none;

を、抜いて下さいね。
　
　　
当ブログの場合、
記事タイトルの色は、リンクの有る無しに関わらず「黒」
本文中のリンクについてはこんなふうに表示するようになっています。
ご参考までに。
　
　
もちろん、こういった調整ができるのはカスタムテンプレートを使用している場合のみ。
リッチテンプレートを使用していて、仕様変更後に記事タイトル表示が気に入らなくなってしまった場合は、そのテンプレートの使用は諦めるしかありません。

ココログの仕様変更のおかげで、余計な手間ヒマを掛けさせられることとなりましたよ。
まぁ、そのおかげで、またひとつCSSの勉強になった、と、好意的に受け止めることにします。
そうでもしないと、やってられないもの。

お役所仕事っていうか、なんていうか・・・
何の前触れも無く一律にドカンと変更してくれて。
仕様が変わることで戸惑う人も居るだろうし、前の状態の方がよかったと思ってる人も居るだろうし、せめて記事タイトルにリンクを貼るかどうか自分で選択できるようになっていたら、こんなに混乱しなかったのに。

もっとも、Webの知識が無くとも簡単に作れるのが、そもそもブログの売り。
難しいことはアナタ任せで多少のことは目をつぶってしまうのが、本来のブログユーザーの姿なのかも。
それがイヤなら、自分でサーバー用意して、自分で構築せよ、と。
　　
　
最後に、もうひとつ。
この記事タイトルのリンク、何故か同じココログで作っている「別館」の方には反映されてません。
記事タイトルにリンクは貼られていないままです。

新たに記事を投稿したり、ブログを再構築したりすることによって、初めてリンクが作成されるのかもしれません。
「別館」は、ずっと更新していませんからね。

確認はしていませんが、恐らくそうではないか、ということで。

なんかココログが・・・

２２日のメンテで仕様変更したようで。
細かい所でチョコチョコと調整が入ったようですが、一番目立って、一番影響が大きいのは、記事のタイトルに個別記事へのリンクが貼られたことでしょう。
トップページやカテゴリ別アーカイブなどで複数の記事がダーッとを表示されている状態から、読みたい記事の単独ページに切り替えるためのリンクです。

リンクが貼られたこと自体は、私は歓迎してます。

前から、「固定リンク」とか言われても、普通、何のことだか分かんないよなーと思ってたんですよ。
記事タイトルから飛べた方が分かりやすいのに・・・って。

ただ、自分のブログを開けてみたら、自分は何もしてないのに急に見栄えが変わっていた・・・っていうのは、ちょっといただけないです。
人によっては、修正しないと見にくくてしょうがない場合もあるかもしれないですよね。

それにさぁ・・・
記事タイトルから個別ページにリンクしてるんだったら、下の「固定リンク」要らないじゃん・・・って思って外そうとしたら、外せないでやんの。
フッターは数種類の中から選べるようになっているのですが、「固定リンク」無しのパターンが無いのです。
意味分かりません。
　
　
私のブログも、妙に見栄えが悪くなっていたので、少し調整しました。
まだ気に入らないので、これを機に、デザインを少しいじろうかと思ってます。

私はリッチテンプレートを使用していないので、実際にそんな例があるのかどうかは分かりませんが、今回の仕様変更で見栄えが気に入らなくなってしまった場合は、テンプレートを他の物に替えるしかないでしょう。
リッチテンプレートは、ユーザーはいっさい手を加えられないので。

自分でカスタマイズしているのなら、カスタム・テーマの変更ページの「ページ全般の設定」にある「リンクのスタイル」を変更することで、ある程度の調整はできます。

私は、ページ全般とサイドバー項目のリンクスタイルを別の設定に変えました。
でも、これだと本文中のリンクスタイルが記事タイトルと同じ設定になってしまってイマイチ見づらい・・・

記事タイトルと本文中のリンクスタイルを別にするにはどうすれば良いんでしょうか？？？
CSSを書き加えればなんとかなるんでしょうかね？

解決方法が確定したら、追記します。

模様替え

春を先取り！ってワケでもないけれど、さりげなくブログのデザインを花柄に変更しました。

タイトルバナーに使用した画像は、「おしゃれなパターン素材集　花柄・リーフ」（ビー・エヌ・エヌ新社　刊）という本に収録されているデータを元に加工したものです。
（色変更したり、サイズ変更したり、イロイロ）

今回用意した画像は、サイズの小さなパターンを横に繰り返して表示するように設定してあります。

カスタムCSSの記述は以下の通り

#banner {background: #FF9900 url("http://○○○") repeat-x;}

　　　　　　　　　　　　　　　　　↑
　　　　　　　　　　　 　　　画像のurl

画像のurlの後ろの「repeat-x」がポイント。
ここで、指定した画像を繰り返して表示するかどうかを指定しています。

　repeat　　　　　　　　縦横両方向に繰り返す

　repeat-y　　　　　　　縦方向にのみ繰り返す

　no-repeat　　　　　　　繰り返さない　
　
　
よーく見ると、実は画像の継ぎ目が分かってしまう・・・

これは、そもそも画像を作る際のミスです。
パータンがうまく繋がるように切り取ったはずが、微妙にズレてました。
　
　
タイトルバナーに合わせて、サイドバーのタイトルのポイントも花に。
こっちは自作。

でも、透過処理が上手くいかなくて、えらく苦労しました。
コレっぽっちの画像なのに・・・

（透過処理をちゃんとしておかないと、背景色が濃い色の場合、輪郭がにじんだようになってしまって、とってもミニクイのです）

これも、画像処理そのものの問題。
なんで上手くいかないのかなぁ・・・？
謎。

サイドバー項目のタイトルに背景画像を置いてみる 改良編

ココログのデザインカスタマイズに挑戦、第3弾。

前回、サイドバー項目のタイトルにワンポイントと色の帯を付けてみました。
今回はその改良を行いました。
見た目は変わってませんけど、裏では違うことやってます。
画像はワンポイントだけにして、その後ろに背景色を設定する方法に変更してみたのです。
この方法なら、タイトルが２行になれば、それに応じて背景色も広がるので大丈夫なはず。

用意した画像は、これ。
↓

コントロールパネル→ファイルで画像をアップロードし、URLを確認。

次はCSSの編集。
CSSを編集できるのはカスタムCSSのみです。
（リッチテンプレートは著作権があるので不可）
ココログプロ以外では、直接CSSを書き換えることが出来ないため、あらかじめカスタムCSSで雛形を作っておき、そこに必要な項目と設定値を追加することでデザインを微調整していきます。

サイドバーに関する設定は
.sidebar h2
以下で指定しています。

ブログ→デザインの編集
「テンプレートの管理」で編集したいテンプレートを選んで「CSS」を選ぶと表示される「CSSの編集」画面に以下のように入力しました。
（現在適用中のテンプレートに手を加える場合は「現在のテンプレートを編集」→「CSSの編集」）

.sidebar h2 {background-color:#FF9900}
.sidebar h2{background-image:url("http://○○○")}
.sidebar h2 {background-repeat:no-repeat}
.sidebar h2 {background-position:2px center}
.sidebar h2 {padding:7px 0px 7px 25px}
　
　
まずは、サイドバーのタイトルの背景色を指定。　
.sidebar h2 {background-color:#FF9900}

続いて、重ねて配置するワンポイント画像のURLを指定。
.sidebar h2 {background-image:url("http://○○○") }
　　　　　　　　　　　　　　　　　　　　↑
　　　　　　　　　　　　ここに配置したい画像のURLを入力

配置した画像（ワンポイント）を繰り返して表示しないよう指定。
.sidebar h2 {background-repeat:no-repeat}

配置したい画像の表示位置を指定。
.sidebar h2 {background-position:2px center}
この入力例では、左端から２ピクセルの位置で、縦方向には中央に来るように設定しています。

.sidebar h2 {padding:7px 0px 7px 25px}
最後に、表示する文字列の余白をピクセル単位で指定。
画像の大きさによって違ってきますので、確認画面を見ながら数値を調整します。
この入力例では、上・右・下・左の順でそれぞれ指定しています。
　
　
カレンダーのタイトルは他のサイドバー項目とは別扱いになっているため、統一感を持たせるためにはカレンダーの方のタイトル部分も変更しておく必要があります。
カレンダーのタイトルは
#calendar caption{
以下で設定し、基本的にサイドバーと同じ設定値で大丈夫だと思います。
　

これで大丈夫かな。
よく分からずにいじっていて、ほとんど手探り状態なのです。
ウチのMacだと、どのブラウザでも奇麗に見えているのですが、Windowsマシンで見たら、少々見え方が違っていました。
「WindowsでIE」という環境で見ている人が、圧倒的に多いのですよね。
まいったな。
う〜〜〜ん・・・
激しく崩れているわけではないし、どこをどうすれば良いのか分からないので、しばらくこのままにしておきます。

それにしても、タブブラウザに慣れてしまうとIEって使いにくいわ・・・　

サイドバーのタイトルに背景画像を置いてみる

ココログのデザインカスタマイズに挑戦、第２弾。
サイドバーのタイトルにワンポイントと色の帯を付けてみました。
ちなみに、当ブログはココログプラスを使用しています。
フリーでもベーシックでも、同じ方法で上手くいくはずです。

私が用意した画像はこんなの
↓

コントロールパネル→ファイルで、まずは画像をアップロード
画像のURLを確認しておきます。
　
　
次はCSSの編集。
CSSを編集できるのはカスタムCSSのみです。
（リッチテンプレートは著作権があるので不可）
ココログプロ以外では、直接CSSを書き換えることが出来ないため、あらかじめカスタムCSSで雛形を作っておき、そこに必要な項目と設定値を追加することでデザインを微調整していきます。

サイドバーに関する設定は
.sidebar h2　　
以下で指定しています。

ブログ→デザインの編集
「テンプレートの管理」で編集したいテンプレートを選んで「CSS」を選ぶと表示される「CSSの編集」画面に以下のように入力しました。
（現在適用中のテンプレートに手を加える場合は「現在のテンプレートを編集」→「CSSの編集」）
　
　
.sidebar h2 {background-image:url("http://○○○") }
.sidebar h2 {background-repeat:no-repeat;}
.sidebar h2 {padding:7px 0px 0px 25px;}
.sidebar h2 {height:35px}

まずは、サイドバーのタイトルの背景に配置する画像を指定。
.sidebar h2 {background-image:url("http://○○○") }
　　　　　　　　　　　　　　　　　　　　↑
　　　　　　　　　　　　ここに配置したい画像のURLを入力

.sidebar h2 {background-repeat:no-repeat;}
これは、配置した画像を範囲いっぱいに繰り返して表示するかどうかを指定しています。
この入力例では繰り返さないよう、指定しています。

.sidebar h2 {padding:7px 0px 0px 25px;}
ここでは、余白をピクセル単位で指定しています。
画像の大きさによって違ってきますので、確認画面を見ながら数値を調整します。
この入力例では、上・右・下・左の順でそれぞれ指定しています。

.sidebar h2 {height:35px}
最後に、画像の大きさに合わせて高さを設定しておきます。
用意する画像によっては、必要無いかもしれません。
　
　
それから、カレンダーのタイトルは他のサイドバー項目とは別扱いになっているため、統一感を持たせるためにはカレンダーの方のタイトル部分も変更しておく必要があります。
入力例は以下の通り。
基本的にサイドバーと同じ設定値で大丈夫だと思います。

#calendar caption{background-image:url(""http://○○○") }
#calendar caption{background-repeat:no-repeat;}
#calendar caption {padding:7px 0px 0px 25px;}
#calendar caption {height:35px}
　
　
苦労して画像を配置したものの・・・
この画像ではタイトルの文字列が長くなったり、ブラウザで文字を大きめに表示している人が見たりすると、とてもみっともないことになることに気付いてしまいました。
画像の枠から文字がはみ出してしまうという・・・
再考の必要あり、ですな。

ワンポイントのみの画像でしたら、この方法でイケるはずです。

カテゴリー別バックナンバーを並び替える方法

ココログヘルプを見ていたら、カテゴリー別のバックナンバーを入れ替えるにはどうすれば良いかという質問がありました。
一応、コメントは残しておいたけれど、どうにも説明不足な気がするし、過去の回答を見ても私の取っている方法と一致するものが無いようでしたので記事にしてみました。
　

ココログの場合、サイドバーに表示するカテゴリー別のバックナンバーへのリンクは、機械的に決められてしまって自分の思いどおりには表示できません。
でも、ブログの記事の中で、自分がメインで書いているカテゴリーがあったりすると、そのカテゴリーはなるべく上に持ってきたいと考えるのはごく自然な流れだと思います。
そこで、一工夫。

私のサイドバーを見ればお分かりの通り、カテゴリーに通しナンバーを付けています。
自分が上に持っていきたいものから順番に番号を振っていけば、とりあえずはその通りに並びます。

ところが・・・
通しナンバー付きのカテゴリーを新規登録するだけで済めば事は簡単なんですけど、それだと、ココフラッシュのカテゴリー別新着記事に載らなくなってしまうというデメリットがあるんですね。

ココフラッシュになんか載らなくていいよ〜って人は、「カテゴリーの追加」で通しナンバー付きのカテゴリーをジャンジャン作ってしまえば、それでオッケーです。（この場合、通しナンバーには半角の数字を使うのが安全。カテゴリー数が２桁になるなら、１桁の数字の頭に０を入れることをお忘れなく）

いや、やっぱり、ココフラッシュにも載せたいよって人は、ちと面倒ですが、私のやっている方法を試してみてはどうでしょう。
　

実は、私のサイドバーにある「カテゴリー」は、ココログに標準装備されている「カテゴリー」とは別物で、「マイリスト」で作ったものなのです。

以下、そのやり方です。

まずは、カテゴリー別バックナンバーのURLを調べます。
例えば、自分のブログの「カテゴリー」の欄から「ウェブログ・ココログ関連」をクリックすると、「ウェブログ・ココログ関連」のバックナンバーが１枚の書類となって表示され、ブラウザの上の方にそのURLが表示されています。
（ココログの場合、http://xxxxx.cocolog-nifty.com/xxx/catxxxxxx/index.html）
このURLを、自分が使ってるカテゴリーについて、全て調べてメモしておきます。
　
　　
次は、管理画面にログインして「マイリスト」で新規にリストを作成します。
リストのタイプは「リンク」にします。
リストのタイトルは「カテゴリー」でも、他の分かりやすいタイトルでも何でも構いません。
　
リストを作ったら、先ほどメモしておいたURLをリンク先のURLとして、項目を追加していきます。
（お気に入りのサイトへのリンクをサイドバーに貼るのとまったく同じ方法です）

この時、項目名を通しナンバー付きにしておくと、後の管理がしやすいです。
項目名は、ココログ標準のカテゴリー名にこだわる必要もありません。
たとえば、「日記・コラム・つぶやき」のカテゴリーを「01　雑記」にしてしまう、等々。
もちろん、変える必要がなければ「01　日記・コラム・つぶやき」等にしておけばOKです。

全てのカテゴリーについて登録し終えたら、「設定の変更」で並び順を「タイトルで昇順」にし、表示するリストの項目数もカテゴリー数に合わせて変更しておくのをお忘れなく。
　
　
最後に、「ブログ」→「デザインの編集」の中の「表示項目の変更」へ進みます。
ココログ標準の「カテゴリー」のチェックを外し、代わりに自分がマイリストで作成した「カテゴリー」にチェックを入れます。
保存したら、「並べ方を変更」で表示位置を調整したら、作業は終了です。
　

記事を投稿する際に使用するカテゴリーに手を加える必要は、ありません。
たとえば「日記・コラム・つぶやき」に相当する内容の記事を投稿する時には、もちろんこの「日記・コラム・つぶやき」をカテゴリーに選んで投稿します。
そうすれば、ココフラッシュの「日記・コラム・つぶやき」の新着記事に載ります。
でも、自分のブログのサイドバー上では、「01　雑記」（もしくは「01　日記・コラム・つぶやき」）というカテゴリーの中に入っています。
　
　
ココログ標準のカテゴリー別バックナンバーは、「バックナンバー」（月別や週別のバックナンバーが表示されている所）のタイトル部分をクリックすればそこから見ることも出来ますので、標準の「カテゴリー」を外してしまっても特に問題は無いです。

大胆にカテゴリー名をいじると、サイドバーに並んでいるカテゴリー項目と、「バックナンバー」で見るカテゴリー項目がまるで違う・・・という状態になってしまいますが、こんな所を見るのはブログオーナーだけで、来訪者の方々はそこまでチェック入れていないと思います。
　　
　
この方法の最大の欠点が、後から使用するカテゴリーが増えた場合には、いちいちバックナンバーのURLを調べて自分でマイリストに追加しなければならないという点。
順序を変更したくなったら、通しナンバーを修正して並び順を入れ替えるといった作業も必要になります。
面倒といえば面倒ですが、トコトンこだわる人にとっては、このくらいの手間ひまはどうってことないですよね？
　
　
私は記事の管理用に大量の独自カテゴリーを作成しているのですが、これらの記事は別に一覧を作ってサイドバーに置いてあるので、カテゴリー別バックナンバーとして表に出したくなかったのです。（ゲームのタイトル別の記事などが、それに該当してます）
そのために考えた苦肉の策が、この方法でした。
この方法ですと、必要なカテゴリーだけを選んで並べることが出来ますから。
その副産物として、並び順も自分の思いのままに出来た・・・というわけです。

以上、私の実践している方法について解説してみました。
ご参考までに。

タイトルバナーに画像を配置してみる

これまでブログのデザインには無頓着で「読みやすいのがいちばん！余計な画像なんてイラナイ！」と思っておりました。
ですが、他のブログサービスでCSSを触っているうちに、ココログのこのブログでもあれこれとやってみたくなり、とりあえずタイトルバナーに画像を置いてみるべし・・・と、思い立ちました。

ワタクシのCSSの知識は極少です。
ソースを見て、「このへんをいじれば、ここの見栄えが変わるかな？」ということがかろうじて分かるようになって来たという程度です。

それでも、タイトルバナーに画像を貼るぐらい簡単にできるだろうと思いきや・・・２日も悩みましたよ！

以下、ワタクシの悪戦苦闘の記録。
　
　
まず、画像の準備。
大きさは「900px×160px」にしてみました。
横幅は、サイドバー（200px×２）と本文（500px）なので、この幅に。
高さは、だいたいこんなもんかな？ということで。
だいたい良い感じの大きさに作っておけば、ある程度はココログ側で調整してくれるようです。

次にカスタムCSSの準備。
元々使っていたオレンジ系のカスタムCSSをコピーして、それに手を加えていくことにしました。

いよいよ、画像の貼付け。
「テーマ」の「タイトルバナー」で「タイトルバナーに画像を使用する」と「アップロードした画像は、タイトルの背景として使用する」にチェックを入れて画像ファイルをアップロード。

よし、できた。ここまでは順調。
問題はこの後。

タイトルバナーを画像に変更すると、タイトルの文字が左上に寄ってしまうのです。
特に私の場合、画像に文字列が掛かってしまい、かなり見辛い状態に。
この文字列の位置を調整するには、CSSを編集する必要があります。

そこで、「カスタムCSSを編集」する画面の真っ白い記述エリアに、パディングを調整する一文を入力。
これで上手くいくかと思ったのに、出来たのは・・・下図参照。
画像の下に、元々タイトルの背景に設定してあったオレンジ色がはみ出してます。

このオレンジ部分を消すのに、丸２日悩んだわけで・・・

結果的には、CSSの記述エリアに

　#banner {padding: 25px 0px 0px 30px}
　#banner {height: 155px}

と、入力することで解決しました。

「#banner」は「ここはタイトルバナーの見栄えについて設定しているんですよ」ということを宣言するためのワード。
「padding」とは、配置するアイテムの余白を設定している部分です。
上の記述例だと「上　右　下　左」の順で、それぞれ設定していることになります。

そして、「height」
タイトルバナー部分の「高さ」を、画像の大きさに合わせて固定してしまいました。
そうすることで、はみ出した部分を強制的にカット。
無事に画像部分だけが表示されるようになりました。

なんだか、無理矢理な気がするんですが、いいんでしょうかね、これで？
　
とにかく、どうにかタイトルバナーに画像を配置することは出来ました。
（少なくとも、私の使用環境ではちゃんと見えています。が、なにぶんMacユーザーなもので、Winでちゃんと見えているのかどうかが非常に心配です）
　
　
で、どうも妙だなと思ったんですけど・・・
CSSファイルを探し出してソースを見て確認したら、タイトルバナーの背景に「色」だけを指定している時は、パディングのデフォルト値が「15px」になっていました。
ところが、背景に「画像」を設定するとデフォルト値が「0px」になってるんですよね。
なぜなのでしょう？
「0px」だと見栄えが悪いのは分かり切ってると思うんだけど。
ここを「0px」にしなければならない、なんらかの理由があるのでしょうか？
私には分かりません。
　
　
それにしても、直接CSSを書き換えることが出来れば、こんなに悩むことは無かったんですよね。
（この私でさえ、ホンの数分で終わっていたはず）
ココログのカスタムCSSの編集はカナリ分かりづらい・・・ということが、よーっく分かりました。
ユーザーはCSSをいじるな！と言われているような気さえ・・・