カテゴリ:│├コメント欄( 15 )
はじめに
エキサイトのブログの非公開コメントのことを通称、鍵コメントと呼ばれています。この鍵コメントはアイコンが小さくて判断できないことがあって、うっかり通常のコメントのように対応してしまう時があります。
そんなことが無いようにいろいろな対策をとってきました。今回はFirefoxユーザのみの記事ですが、Firefoxの拡張である。Stylishを入れて鍵コメントを図1のように分かりやすくする方法を考えてみたいと思います。
続きを読む...
はじめに
exciteでコメント欄の左右に画像を表示する場合はちょっとだけ工夫が必要となります。
各ブロックには背景画像を1つだけ設定できることになっています。したがって、通常の場合は1つの画像のみの表示となります。しかし、左右2つの画像を表示したい場合はどうしたらいいのでしょうか。
実は、ちょっとしたアイディアを用いると簡単に表示することができます。今回はそんな、ちょっとしたアイディアの記事です。ゆっくりお楽しみ下さい。

難易度:★★
画像の位置あわせや、画像の作り方が難しいかもしれません。
コメント欄の左右に画像を表示する方法の詳細>>
はじめに
今回は、前回よりももっと分かりやすくする方法として、図1に示すように鍵コメントのアイコンの手前に別のアイコンを表示してみました。この手法は、FirefoxなどCSS2に対応しているブラウザで利用できるのですが、IEなど対応していないブラウザでは試すことができません。
でも、鍵コメントであるのかを判断するのは、サイト主である自分なので、FirefoxなどCSS2に対応しているブラウザを利用されている場合は簡単に判断することができるようになります。

IEの方は、以下のリンクを試されるとよいと思います。
鍵コメントを判りやすくする方法
難易度:★
詳細>>
はじめに
でも、気がつき難いですよね。今回はこのようになった場合の修正方法です。

修正前(NG)
.TXTFLD{
FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF;
height:15em;
background-image:url(イメージURLアドレス);
background-position:right;
background-repeat:no-repeat;
}
修正後
.TXTFLD{
FONT-SIZE:9PT;
COLOR:#000;
BORDER:1PX SOLID #666678;
BACKGROUND:#FFF;
}
TEXTAREA.TXTFLD{
height:15em;
background-image:url(イメージURLアドレス);
background-position:right;
background-repeat:no-repeat;
}
正しく指定ができると図2のようになります。


- コメント欄を広げたり、コメント入力欄にイメージを挿入する場合は、TEXTAREA.TXTFLDに指定をします。.TXTFLDに指定すると、入力欄全てに影響するため今回のような現象が発生します。
- ログアウトして確認することも忘れずに。意外と気がつき難いです。
- 今回は説明のため、自分で素材を作成することにしました。素材を説明のためスクリーンショットを取り込んでブログ等でアップして公開すると、素材の加工とみなされるためです。なお、当サイトは以前からアップしてある説明用画像は素材屋さんに掲載許可を頂いて公開をしています。

今までのコメントは見れるようにして、新たなコメントは入力できないようにする方法です。
たぶん、このような技を使うことは無いかもしれませんが、なにかお役に立てる方が一人でもいればよいかなって思いましたので公開します。
この技はCSSでコメントの入力を出来ないようにしているだけです。
一時的にコメントを出来なくしたい時につかえるかなぁ。
この技は、図1に示すコメント入力欄を図2に示すように消す方法です。
div.COMMENT_INPUT{display: none;}


エキサイトの設定でコメントを禁止に
参考までに、完全にコメントを禁止する方法は以下の通りです。
ブログ設定の環境設定のコメント権限を”コメント禁止”にすることによりコメントが出来なくなります。ただし、コメントが見れないので今までのコメントを見て楽しめないデメリットがあります。

私はコメント権限を”ログインユーザ”に設定してます。

- display: none;で画面から表示しないようにしています。
- 完全にコメント制御をするためにはエキサイトのコメント権限の指定が必要
- この技はCSSでコメントの入力を出来ないようにしているだけなのでコメントされる可能性はあります。
難易度:★
鍵コメントのアイコンが小さくて、見づらいことがありませんか?
このアイコンを大きく表示して、鍵コメントを見分けやすくする方法です。
よろしかったらご利用下さい。


CSS設置例
CSS編集部分に以下のコードを設置するだけです。サイズは11pxにしてありますが、好きなサイズを指定してください。

DIV.COMMENT_TAIL IMG{
height:11px;
width:10px;

- 今回の技は状況依存セレクタを用いています、
状況依存セレクタとは、そのスタイルが設定されている状況に応じてスタイルを適応する便利な技です。
今回のケースで説明しますと、DIV.COMMENT_TAIL つまり、<div class="COMMENT_TAIL ">~</DIV>で囲まれている間の IMGタグだけにスタイルを指定できます。
関連記事:2004-09-20 12:35 コメント欄の編集のまとめ
難易度:★
注意:普通のコメントのアイコンも大きくなります。アイコンを大きく表示して判断し易くする方法です。
CopyRight(C) 2004 All rights reserved by potto37
最近はじめられた方がよく遊びにこられるので、
人気のあったコメント欄の装飾について
説明させて頂きます。
図1、2に示す番号と同じ番号の記事タイトルをクリックすることにより、
対応する記事に飛ぶことができます。
コメント部分

1.コメント入力欄をちょっとおしゃれに♪
2.コメント入力欄をちょっとおしゃれに♪ パート2
3.コメント欄 お洒落改造計画
4.コメント欄の背景の指定方法
5.見えるところのちょっとしたお洒落
6.コメント欄のタイトル部分にプチアニメを入れよう!
トラックバック部分

CopyRight(C) 2004 All rights reserved by potto37 &みんと♪
当サイトでは見えないところのちょっとしたお洒落として、ご提案してきました。
今回は、新たにコメント欄をちょっとだけ改造して、コメントをクリックしたときに
図1に示すようにキャラクターを表示する方法です。
今回はちょっと難しいかもしれませんが、頑張ってくださいね。

設置方法はこちら>>
今度は見えるところにちょっとしたお洒落です。
図1のようにコメントを書くときにクリックする部分にプチアニメを入れます。

設置方法
CSS編集部分
DIV.POST_TAIL{
FONT : 11PX/150% TAHOMA;
MARGIN-TOP : 10PX;
TEXT-ALIGN : left; /*修正しました*/
/*--------------- ここから追加です --------------*/
background-image:url(ファイルURL);
background-position:left;
background-repeat:no-repeat;
padding:20px 0px 0px 0px;
/*余白を入れて画像が見えるように設定する*/
text-indent:30px;
/*-------------- ここまでです ---------------*/
}

- background-imageで表示するイメージファイルを指定します。
- background-position:left;で左端に表示させます。
- background-repeat:no-repeat;でイメージを1つだけ表示します。
- padding:20px 0px 0px 0px;で上端部分を20px分入れてイメージがすべて表示されるようにしています。
- text-indent:30px;で、テキストの位置を30pxずらしてイメージと重ならないようにしました。
CopyRight(C) 2004 All rights reserved by potto37

設置方法
コメント欄のタイトル部分はCSS編集部分のDIV.COMMENT_TAILです。
この部分にイメージファイルを設置すればよいことが分かります。
では、その設置方法を図2に示します。
CSS編集部分
DIV.COMMENT_TAIL {
MARGIN: 8PX 0PX 5PX;
FONT: 8PT/150% TAHOMA;
COLOR: #777;
width:480px;
/*--------------- ここから追加です --------------*/
background-image:url('イメージファイル名');
background-position:left;
background-repeat:no-repeat;
padding:20px 0px 0px 0px;
/*余白を入れて画像が見えるように設定する*/
text-indent:30px;
/*-------------- ここまでです ---------------*/
}
青字が追加部分です。

- background-imageで表示するイメージファイルを指定します。
- background-position:left;で左端に表示させます。
- background-repeat:no-repeat;でイメージを1つだけ表示します。
- padding:20px 0px 0px 0px;で上端部分を20px分入れてイメージがすべて表示されるようにしています。
- text-indent:30px;で、テキストの位置を30pxずらしてイメージと重ならないようにしました。
ぽっとからのお知らせ
専門の知識が無いので手探りで分かりやすい表現を考えていきたいと思います。
もし、この表現など適切でない場合は教えてください、
よろしくお願いします。<(_ _)>
ぽっと
素材はイラそよさんからお借りしています。ちなみに、所長の故郷です。
イラそよさんの素材はリンクウエアなので、ご利用の方はリンクをお願いします。<(_ _)>
CopyRight(C) 2004 All rights reserved by potto37
無断転記禁止