ぽっとの陽だまり研究室

はじめに

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

続きを読む...

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。

はじめに

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

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

図１ 設置例

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

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

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。

はじめに

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

図１

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

難易度：★

詳細>>

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。

はじめに

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

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

図１ .TXTFLDに指定した場合

修正前（NG）

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

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

}

正しく指定ができると図２のようになります。

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

今日のポイント

コメント欄を広げたり、コメント入力欄にイメージを挿入する場合は、TEXTAREA.TXTFLDに指定をします。.TXTFLDに指定すると、入力欄全てに影響するため今回のような現象が発生します。

• ログアウトして確認することも忘れずに。意外と気がつき難いです。


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

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。

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

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

CSS編集追加

div.COMMENT_INPUT{display: none;}

図１　設置前

図2　設置後

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

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

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

図3

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



今日のポイント

• display: none;で画面から表示しないようにしています。


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


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

難易度：★

ぽっと

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。

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

図１　設定前

図２　設定後

CSS設置例

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

DIV.COMMENT_TAIL IMG{

height:11px;
width:10px;

}

図３　CSS設置コード

今日のポイント

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

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

難易度：★

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

ぽっと

CopyRight(C) 2004 All rights reserved by potto37

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。

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

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

コメント部分

図１　コメント部分

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

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

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

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

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

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

トラックバック部分

図２　トラックバック部分

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

CopyRight(C) 2004 All rights reserved by potto37 ＆みんと♪

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。

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

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

図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;でイメージを１つだけ表示します。
  
• padding:20px 0px 0px 0px;で上端部分を20px分入れてイメージがすべて表示されるようにしています。
  
• text-indent:30px;で、テキストの位置を30pxずらしてイメージと重ならないようにしました。
  

ぽっと

CopyRight(C) 2004 All rights reserved by potto37

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。

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

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

設置方法

コメント欄のタイトル部分はCSS編集部分のDIV.COMMENT_TAILです。
この部分にイメージファイルを設置すればよいことが分かります。
では、その設置方法を図２に示します。

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;でイメージを１つだけ表示します。
  
• padding:20px 0px 0px 0px;で上端部分を20px分入れてイメージがすべて表示されるようにしています。
  
• text-indent:30px;で、テキストの位置を30pxずらしてイメージと重ならないようにしました。
  

ぽっとからのお知らせ

今まで、「青字が追加です」と表現していましたが、コメントを入れて追加部分の範囲を分かりやすくしました。色を識別しにくい環境の方などにも楽しめるといのですが、
専門の知識が無いので手探りで分かりやすい表現を考えていきたいと思います。

もし、この表現など適切でない場合は教えてください、
よろしくお願いします。<(_ _)>

ぽっと

素材はイラそよさんからお借りしています。ちなみに、所長の故郷です。
イラそよさんの素材はリンクウエアなので、ご利用の方はリンクをお願いします。<(_ _)>

CopyRight(C) 2004 All rights reserved by potto37
無断転記禁止

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。