この記事はココログ・ベーシックに関する記事です。現在、記事ネタ探しの「プレスリリース・コラム」として活用中。⇒「プレスリリース・コラム

正しくはメリーゴーランドじゃなくてメリー・ゴー・ラウンドっていうんですよね (^^;

ともあれ、この間ブログの背景画像をメリー・ゴー・ラウンド変更したばかりなんですけど、コメント欄に不満を残したまま放置しておりました。「どうしようかな~」と思ってたんですけど、昨日、「初めてのココログ・カスタマイズ」さんとこで新作カスタマイズがアップされているのを発見。コメント欄にモノクロ画像を入れるのって、ちょっとかっこよくありませんこと? ってなわけで、早速、真似っこしてみました♪ 画像で見るとこんな感じです。

コメント欄

CSSはこんな感じです。

body {BACKGROUND-COLOR: #FFFFFF;}
#container {WIDTH: 800px;
background-image: url(http://wondada.cocolog-nifty.com/hibi_saisai/wooden_horse.jpg);
background-repeat: no-repeat;
background-position: left top;}
#banner {HEIGHT: 210px;
padding: 20px;
BACKGROUND-COLOR: transparent;}
#center {WIDTH: 400px;
BACKGROUND-COLOR: transparent;}
#left {WIDTH: 200px;
BACKGROUND-COLOR: transparent;}
#right {WIDTH: 200px;
BACKGROUND-COLOR: transparent;}
#comment-text textarea,
#comment-text-field textarea {
background-image:url(http://wondada.cocolog-nifty.com/hibi_saisai/wooden_horse2.jpg);
background-repeat:no-repeat;
background-position:0% 130%;}
.content {BACKGROUND-COLOR: transparent;}
.content p.posted {
border:#cccccc 1px solid;
padding:5px;}

赤い文字が、今回、手を入れたところです。「.content p.posted」の部分は実はうっかり間違えてしまった部分。なんだけど、これ、投稿者名のとこが四角い枠で囲まれるんですね。おかげでコメントとコメントの区別がつけやすくなったような気がします。「初めてのココログ・カスタマイズ」さんとこで見た、コメント部分をぐるっと囲むのとは違うけど、見やすくなったので採用~(笑)

あとは確認ボタンをクリックしたときに出てくる確認画面をコメント欄と同じ幅で表示されるようにしたいんだけど… これはどこを触ればいいのかなぁ。ココログカスタマイズはまだまだ続く。

【追記】07/01/30
できました~! 不満のコメント欄、やっとやっと不満解消です♪ しのぶさん、ありがとうございました。
今回のCSSはこんな感じ。赤い所がコメントプレビューのために追加したところです。

body {BACKGROUND-COLOR: #FFFFFF;}
#container {WIDTH: 800px;
background-image: url(http://wondada.cocolog-nifty.com/hibi_saisai/wooden_horse.jpg);
background-repeat: no-repeat;
background-position: left top;}
#banner {HEIGHT: 210px;
padding: 20px;
BACKGROUND-COLOR: transparent;}
#center {WIDTH: 400px;
BACKGROUND-COLOR: transparent;}
#left {WIDTH: 200px;
BACKGROUND-COLOR: transparent;}
#right {WIDTH: 200px;
BACKGROUND-COLOR: transparent;}
#comment-text textarea,
#comment-text-field textarea {
background-image:url(http://wondada.cocolog-nifty.com/hibi_saisai/wooden_horse2.jpg);
background-repeat:no-repeat;
background-position: 0% 130%;}
.content {BACKGROUND-COLOR: transparent;}
.content p.posted {
border:#cccccc 1px solid;
padding: 5px;}
.comment-preview {
width: 370px;}
.comment-list-previous {
width: 370px;}

いろいろ数字を変えてみたところ、うちのでは370pxがいいみたいです。ブラウザのアドレス部分に「自分のココログのURL/styles.css」と入れると自分のココログのCSSが見れるようになるんですけど、370pxと書いてあるのは「textarea#comment-text」と「#comment-data」の下にある「.image-full」の部分の2カ所みたいですね。何か関係があるのかな。…できたから、まあいいか♪←アバウト

【関連記事】
トラックバック・ポリシー(追記あり) 06/01/30

ブログ背景画像・いつか食べたケーキ 11/08/04
ブログ背景画像・大阪城の桜 09/03/22
ブログ背景画像・鍋料理(追記あり) 08/12/13
ブログ背景画像・公園 08/07/21
ブログ背景画像・紫陽花 その2 08/06/14
ブログ背景画像・紫陽花 08/06/01
ブログ背景画像・桜 08/04/08
ブログ背景画像・空 07/05/20
ブログ背景画像・メリーゴーランド番外編 コメント欄のカスタマイズ 07/01/29
> ブログ背景画像・メリーゴーランド 07/01/18
ブロ分背景画像・岬の分教場 06/08/07
ブログ背景画像・オリーブ 06/08/07
ブログ背景画像・猫 06/06/17
ブログ背景画像・皐月(追記あり) 06/06/17
ブログ背景画像・空(追記あり) 06/05/02
カスタムCSS(追記あり) 06/04/01

この記事、いいなと思ったらボタンをクリック
  • Facebook
  • Hatena
  • twitter
  • Google+
ブログの購読はこちらも便利
follow us in feedly
このタグに関する他の記事を読みたい時は、このリンクから一覧で見ることができます