カテゴリ:│├コメント欄( 15 )

 

Firefoxを使ってexciteの鍵コメントを判断する

はじめに

エキサイトのブログの非公開コメントのことを通称、鍵コメントと呼ばれています。この鍵コメントはアイコンが小さくて判断できないことがあって、うっかり通常のコメントのように対応してしまう時があります。
 そんなことが無いようにいろいろな対策をとってきました。今回はFirefoxユーザのみの記事ですが、Firefoxの拡張である。Stylishを入れて鍵コメントを図1のように分かりやすくする方法を考えてみたいと思います。



続きを読む...
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2007-08-23 00:20 | │├コメント欄 | Trackback | Comments(0)
 

コメント欄の左右に画像を表示する方法

はじめに

コメント欄の左右に画像を表示したいとの要望がありましたので記事をアップします。
 exciteでコメント欄の左右に画像を表示する場合はちょっとだけ工夫が必要となります。
各ブロックには背景画像を1つだけ設定できることになっています。したがって、通常の場合は1つの画像のみの表示となります。しかし、左右2つの画像を表示したい場合はどうしたらいいのでしょうか。

 実は、ちょっとしたアイディアを用いると簡単に表示することができます。今回はそんな、ちょっとしたアイディアの記事です。ゆっくりお楽しみ下さい。
a0031863_16172624.gif


図1 設置例


難易度:★★
 画像の位置あわせや、画像の作り方が難しいかもしれません。



コメント欄の左右に画像を表示する方法の詳細>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-05-20 16:18 | │├コメント欄 | Trackback | Comments(11)
 

鍵コメントを判りやすくする方法 pert2

はじめに

 以前、鍵コメントのアイコンを大きく表示して判りやすくする方法を書いたので試された方もいらっしゃるのではないでしょうか。
 今回は、前回よりももっと分かりやすくする方法として、図1に示すように鍵コメントのアイコンの手前に別のアイコンを表示してみました。この手法は、FirefoxなどCSS2に対応しているブラウザで利用できるのですが、IEなど対応していないブラウザでは試すことができません。
でも、鍵コメントであるのかを判断するのは、サイト主である自分なので、FirefoxなどCSS2に対応しているブラウザを利用されている場合は簡単に判断することができるようになります。

a0031863_121220.gif

図1


IEの方は、以下のリンクを試されるとよいと思います。
鍵コメントを判りやすくする方法

難易度:★


詳細>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-03-11 12:01 | │├コメント欄 | Trackback | Comments(14)
 

初心者のためのコメント欄のおしゃれ注意予報

はじめに

コメント欄を広げたり、コメント入力欄にイメージを挿入して楽しむ場合、TEXTAREA.TXTFLDに対して行うのが定石ですが、.TXTFLDに対して行うとログインしていない状態で、図1にように全てのINPUT入力欄が広がったり、イメージが挿入されるなどします。(検索窓も.TXTFLDです。)

でも、気がつき難いですよね。今回はこのようになった場合の修正方法です。

a0031863_23125146.gif

図1 .TXTFLDに指定した場合



修正前(NG)

以下の用に.TXTFLDに対して高さを広げたり、イメージを指定すると図1のような状態になります。(まちがってこちらをコピー&ペーストしないようにして下さい。)


.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で指定していた内容を取り除いて、TEXTAREA.TXTFLDに対して指定を行って下さい。指定の一例は以下の通りです。


修正後

.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のようになります。

a0031863_23351490.gif

図2 TEXTAREA.TXTFLDで設定した場合



今日のポイント
  • コメント欄を広げたり、コメント入力欄にイメージを挿入する場合は、TEXTAREA.TXTFLDに指定をします。.TXTFLDに指定すると、入力欄全てに影響するため今回のような現象が発生します。
  • ログアウトして確認することも忘れずに。意外と気がつき難いです。

  • 今回は説明のため、自分で素材を作成することにしました。素材を説明のためスクリーンショットを取り込んでブログ等でアップして公開すると、素材の加工とみなされるためです。なお、当サイトは以前からアップしてある説明用画像は素材屋さんに掲載許可を頂いて公開をしています。



[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-07-09 09:25 | │├コメント欄 | Trackback | Comments(27)
 

今までのコメントは見れるけど、コメントできなくする方法


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

この技は、図1に示すコメント入力欄を図2に示すように消す方法です。


CSS編集追加

div.COMMENT_INPUT{display: none;}



a0031863_1145537.jpg

図1 設置前


a0031863_115524.jpg

図2 設置後





エキサイトの設定でコメントを禁止に



参考までに、完全にコメントを禁止する方法は以下の通りです。

ブログ設定の環境設定のコメント権限を”コメント禁止”にすることによりコメントが出来なくなります。ただし、コメントが見れないので今までのコメントを見て楽しめないデメリットがあります。

a0031863_10551680.jpg

図3


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



今日のポイント
  • display: none;で画面から表示しないようにしています。

  • 完全にコメント制御をするためにはエキサイトのコメント権限の指定が必要

  • この技はCSSでコメントの入力を出来ないようにしているだけなのでコメントされる可能性はあります。



難易度:★


ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-12-05 09:40 | │├コメント欄 | Trackback(1) | Comments(23)
 

鍵コメントを判りやすくする方法


鍵コメントのアイコンが小さくて、見づらいことがありませんか?
このアイコンを大きく表示して、鍵コメントを見分けやすくする方法です。
よろしかったらご利用下さい。


a0031863_9164978.jpg

図1 設定前


a0031863_917168.jpg

図2 設定後


CSS設置例


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





DIV.COMMENT_TAIL IMG{

height:11px;
width:10px;

}
図3 CSS設置コード


今日のポイント

  • 今回の技は状況依存セレクタを用いています、
    状況依存セレクタとは、そのスタイルが設定されている状況に応じてスタイルを適応する便利な技です。
    今回のケースで説明しますと、DIV.COMMENT_TAIL  つまり、<div class="COMMENT_TAIL ">~</DIV>で囲まれている間の IMGタグだけにスタイルを指定できます。



関連記事:2004-09-20 12:35 コメント欄の編集のまとめ

難易度:★

注意:普通のコメントのアイコンも大きくなります。アイコンを大きく表示して判断し易くする方法です。

ぽっと


CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-10-02 09:06 | │├コメント欄 | Trackback(6) | Comments(35)
 

コメント欄の編集のまとめ


最近はじめられた方がよく遊びにこられるので、
人気のあったコメント欄の装飾について
説明させて頂きます。

図1、2に示す番号と同じ番号の記事タイトルをクリックすることにより、
対応する記事に飛ぶことができます。



コメント部分


a0031863_12374846.gif
図1 コメント部分


1.コメント入力欄をちょっとおしゃれに♪

2.コメント入力欄をちょっとおしゃれに♪ パート2

3.コメント欄 お洒落改造計画

4.コメント欄の背景の指定方法

5.見えるところのちょっとしたお洒落

6.コメント欄のタイトル部分にプチアニメを入れよう!




トラックバック部分



a0031863_12392048.gif
図2 トラックバック部分


7.トラックバックをお洒落に♪




CopyRight(C) 2004 All rights reserved by potto37 &みんと♪
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-09-20 12:35 | │├コメント欄 | Trackback(17) | Comments(75)
 

コメント欄 お洒落改造計画


当サイトでは見えないところのちょっとしたお洒落として、ご提案してきました。
今回は、新たにコメント欄をちょっとだけ改造して、コメントをクリックしたときに
図1に示すようにキャラクターを表示する方法です。

今回はちょっと難しいかもしれませんが、頑張ってくださいね。



a0031863_74249.jpg

図1 設置例


設置方法はこちら>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-08-28 06:56 | │├コメント欄 | Trackback | Comments(6)
 

見えるところのちょっとしたお洒落


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

a0031863_20181817.jpg

図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;

/*--------------   ここまでです  ---------------*/

}

図2 CSS編集部分



今日のポイント
  • 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
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-08-09 20:15 | │├コメント欄 | Trackback(1) | Comments(19)
 

コメント欄のタイトル部分にプチアニメを入れよう!


見えないところのお洒落シリーズとして、今度はコメント欄のタイトル部分にプチアニメを入れる方法です。図1に示すように、コメント欄小さな花が咲いています。


a0031863_13533862.jpg

図1 コメント欄のタイトル部分に小さな花


設置方法


コメント欄のタイトル部分は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;


/*--------------   ここまでです  ---------------*/

}

青字が追加部分です。

図2 CSS編集部分


今日のポイント
  • 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
無断転記禁止
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-08-07 07:31 | │├コメント欄 | Trackback(1) | Comments(57)
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。