« 第17回:ページ全体のスクロールバーの色を変えてみよう | トップページ | 第19回:引用部分の装飾を設定してみよう »

2006/03/09

第18回:コメント表示欄とコメント入力欄の背景に画像を表示してみよう

コメント(表示欄)とコメント入力欄の背景に画像を表示してみましょう。
こんな↓感じになります。

コメント表示欄 コメント入力欄
コメント表示欄 コメント入力欄


手順

事前準備:画像を入手する

表示する画像を準備します。
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう

私は「フリー素材<ivory>」 様でお借りした素材を使いました。
※「フリー素材<ivory>」様は'07年2月までで写真素材の配布を中止されました。

ファイルをココログにアップロードする

画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1: ファイルのアップロード』
を参照して下さい。

CSSを編集する

  1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックして画像が保存されているページを開く。
    ※「リンク」ボタンではなく、画像(ファイル)の名前のリンクをクリックして下さい。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  3. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください
    ※カスタムテンプレートの作り方は 『第3回:カスタムテンプレートを作ってみよう』を参照して下さい。
  4. 「編集」画面のCSS記述欄に

    /*コメント入力欄*/
    #comment-text textarea, #comment-text-field textarea
    {
    background-image:url(●●●); /*背景画像の指定*/
    background-repeat:no-repeat; /*背景画像の繰り返し:なし*/
    background-position:■ ▲ ; /*背景画像の位置*/
    }


    /*コメント表示欄*/
    .comment-body
    {
    background-image:url(●●●); /*背景画像の指定*/
    background-repeat:no-repeat; /*背景画像の繰り返し:なし*/
    background-position:■ ▲ ; /*背景画像の位置*/
    }


    を記述する。
    ※/*~*/で囲まれた部分以外は全て半角英数で記述して下さい。
    ●●●には上記で保存した画像のURL、 ■、 ▲には画像を表示する位置を入力して下さい。
    ※画像の位置指定については下記のページを参考にして下さい。
    「TAG index」様内 『背景画像の表示位置を指定する』
    ※私の場合は「bottom right」(一番下の一番右)に指定してあります。
  5. 「変更を保存」ボタンを押す。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  9. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • 「コメント入力欄」も「コメント表示欄」も全く同じ内容を指定する場合は、セレクタをまとめて
    #comment-text textarea, #comment-text-field textarea ,.comment-body
    と一行で記述して一度に指定してもOKです。
  • background-repeat:no-repeat;
    は、 画像を繰り返さない(=一つだけ)表示する、 ことを指定しています。
    その他の表示方法(繰り返し、敷き詰めなど)については下記のページを参照して下さい。
    「TAGindex」様内 『背景画像の並び方を指定する』
  • 今回の指定箇所はどちらも文字が上に載る部分です。
    背景画像や表示方法は文字とのバランスを考えて文字の邪魔にならないものを選びましょう
    私はお借りした素材をペイントソフトを使って少し白くなるように加工しています。
    素材サイト提供の素材については加工が許可されているかどうかを確認して下さい。

お世話になりました

「PRISM」様<記事中のボタン素材>
「フリー素材<ivory>」
「TAG index」


<関連記事>

第12回: コメント欄の幅を調整してみよう
第15回: コメント欄のスクロールバーの色を変えてみよう
第16回: コメント欄の背景色を変えてみよう


*この記事にコメントを書く*


|

« 第17回:ページ全体のスクロールバーの色を変えてみよう | トップページ | 第19回:引用部分の装飾を設定してみよう »

カスタマイズ」カテゴリの記事

コメント欄」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

はじめまして!
最近takoさんのページを参考にさせてもらってます。
すごいわかりやすくて
超初心者の私にもなんとか
自分なりのページを作ることができてます!!
takoさんのおかげです!
ありがとうございます
今日はお礼を言いたくて書き込みました。
また参考にさせていただきます\(^o^)/

投稿: ienien | 2006/03/16 11:46

■ienienさん
こんにちは。コメントありがとうございます(^^)

少しでもお役に立てているようで何よりです。
ココログのテンプレートは大きくデザインを変更するのは無理ですが、少しでも画像や色を変えることでイメーージが変わるので少しずつ自分好みにしてみて下さいね。

また遊びに来てください。
お待ちしています。

投稿: tako→ienienさん | 2006/03/16 22:22

はじめまして!!

私もちょくちょく拝見させて頂いています。

私も自分のブログを少しでも見栄え良くしようと奮闘しているのですが・・・

コメント本文に画像を組込もうとしているのですが、コメント記入欄には画像は入りましたが、どうしても本文には入らないのです。

調べた結果、私のには
comment-body
がsourceに無いんです。ココログフリーなんですけど・・・

何か設定を間違えているのでしょうか?

もう少し奮闘してみます!ではまたお邪魔します~ヽ(^ー^)ノ

投稿: H,T | 2006/03/21 20:57

■H,Tさん
こんにちは。コメントありがとうございます。

>comment-bodyがsourceに無い

普通にカスタムテンプレートを作っていればある「はず」なのですが…。
ちょっとそれだけでは何とも判断しにくいですね。

ただ気になったのですが、
「.comment-body」
は一番先頭に半角のピリオド( . )が付きますが、これはキチンと記述されていますか?
ピリオド一つでも落ちていると反映しないので、もう一度確認してみて下さい。

投稿: tako→H,Tさん | 2006/03/21 21:46

早速のご対応ありがとう御座いました!!!!

はい。ご指摘の有りました「ドット」ですが、間違いなくつけております。で、カスタムテンプレート使用してます。

どうしても私のブログのコメント周り(source)には
div class="comment-body"
が無いのです。
で、結局の所、
div class="comment-content"に引っ掛けてみようと、
.comment-content
としたら表示しました。

大変お騒がせ致しました!!

投稿: H,T | 2006/03/21 22:16

■H,Tさん
こんにちは。

全然お役には立てませんでしたが(と言うか「ドット」の件、大変失礼しました^^;)、無事表示できてよかったです。

>.comment-contentとしたら表示しました。

そんな方法があったんですね。
勉強になりました。
私もあとで確認してみます。

わざわざご報告ありがとうございました(^^)

投稿: tako→H,Tさん | 2006/03/21 22:47

こんばんは☆
また参考にさせていただきました。
ありがとうございます。
今日、これから書く記事にリンクさせていただきま~す♪

投稿: ママりん | 2006/04/30 22:33

■ママりんさん
こんにちは。コメントありがとうございます。

ブログ拝見しました。
柔らかなカントリー調で居心地のいいブログになっていますね(^^)
お気に入りの雑貨屋さんにお邪魔したような気分になります。

記事での紹介もありがとうございました。
今後とも宜しくお願いします。

投稿: tako→ママりんさん | 2006/05/02 00:03

いつも利用させていただいております
ありがとうございます
現在使用中のデザインとは別に新しいのを作りました。まだそのデザインは使わないので保存をしておりますが、確認をするとコメント欄が現在使用中のデザインになります。CSS編集でのコメント欄はきちんと画像のurlを記述しております。なにが原因なのでしょうか?お願いいたします。

投稿: kei | 2006/07/09 23:10

■keiさん
こんにちは。

ご質問の件ですが、適用していないテンプレートを確認できるのは、「確認」ボタンを押した直後に表示されるページだけのようです。
コメント欄はこのページには表示されていないため、リンクをクリックして別ページにジャンプされていますよね?
その場合、そのページは既に「確認用の画面」ではなく通常適用しているデザインの画面なのです。
上記の理由で、コメント欄については適用前に「確認ボタン」で確認することは出来ません。
実際に適用してから確認、調整して下さい。

投稿: tako→keiさん | 2006/07/10 21:40

takoさん、お忙しいところありがとうございました
さっそく試してみます

投稿: kei | 2006/07/11 17:01

いつも参考にさせていただいています。ありがとうございます。今回は、コメント欄を少しいじってみました。これからも、いろいろやってみたいと思ってますので、またお世話になると思います。よろしくお願いします。

投稿: ★節約ごはん★ | 2008/01/05 23:08

■★節約ごはん★さん
こんにちは。コメントありがとうございます。

ブログ拝見しました。
リッチテンプレートの中に上手く画像を組み合わせてオリジナルのテンプレートにされてますね(^^)
「カスタマイズ」というとつい「最初から手作りで…」と思ってしまいますが、リッチテンプレートでもここまで出来るんですね。
こちらこそ参考になりました。

今後とも宜しくお願いいたします。

※コメントの承認、及び返信が遅くなり申し訳ありませんでした。

投稿: tako→★節約ごはん★さん | 2008/01/12 10:24

★節約ごはん★改め、Gohanです。
返信いただいていたのを、今気が付きました。こちらこそすみません。そしてありがとうございます。^^

投稿: Gohan | 2008/01/21 19:39

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/975485

この記事へのトラックバック一覧です: 第18回:コメント表示欄とコメント入力欄の背景に画像を表示してみよう:

» コメント欄のカスタマイズ [★節約ごはん★]
今日は、家族がみんな仕事へ行ってしまい、私だけまだまだのんびりムードなので、朝か [続きを読む]

受信: 2008/01/04 16:14

» コメント欄に背景を入れる [memo-book]
”初めてのココログ・カスタマイズ”様 何度もうかがわせていただきました。こんなに [続きを読む]

受信: 2008/08/20 19:32

» 二重アゴ(ノД`)シクシク [A careful living]
[主婦] ブログ村キーワード 昨日、前の職場の人に会ったら 「どうしたの~そんな [続きを読む]

受信: 2008/11/30 15:00

« 第17回:ページ全体のスクロールバーの色を変えてみよう | トップページ | 第19回:引用部分の装飾を設定してみよう »