スポンサーサイト
2008年10月07日 (火)
12:45
コメントにプレビュー機能を付けてみる
新しく記事を書く時には、リアルタイムプレビューを使っているんですが、
コメントを書くときにも同機能があったらいいなぁと思っていたら、
strollさんでずばりそのものの記事を発見！
また、チェックボックスをONにした時だけプレビューする追加機能もあったので、
併せ技一本で導入してみました。
■コメントをプレビュー表示
■コメントプレビューを必要なときだけ実行するには？
「コメントをプレビューする？」のチェックボックスをONにすると、
パンヤ絵文字リストの下にプレビューされるので、お試しください（ぺこ）
全てのパンヤ絵文字を読み終わるまで、
”利用のブラウザ、設定ではご利用になれません。”って出力されますなｗ
スクリプトの読み込み順序を変えてみたけど、だめでした＾＾；
コメントを書くときにも同機能があったらいいなぁと思っていたら、
strollさんでずばりそのものの記事を発見！
また、チェックボックスをONにした時だけプレビューする追加機能もあったので、
併せ技一本で導入してみました。
■コメントをプレビュー表示
■コメントプレビューを必要なときだけ実行するには？
「コメントをプレビューする？」のチェックボックスをONにすると、
パンヤ絵文字リストの下にプレビューされるので、お試しください（ぺこ）
全てのパンヤ絵文字を読み終わるまで、
”利用のブラウザ、設定ではご利用になれません。”って出力されますなｗ
スクリプトの読み込み順序を変えてみたけど、だめでした＾＾；
Open↓
さらにカスタマイズ。
パンヤの絵文字はプレビューされずに”〔わら〕”の様に表示されますが、
パンヤ絵文字もプレビューで表示させようかとｗ
追加したスクリプトに以下の記述がありますが、
※〔わら〕の[]は半角でね！
※この記事が参考になったら、トラックバックしていただけたら幸いです。
さらにカスタマイズ。
パンヤの絵文字はプレビューされずに”〔わら〕”の様に表示されますが、
パンヤ絵文字もプレビューで表示させようかとｗ
追加したスクリプトに以下の記述がありますが、
この下に、以下の様に追加したら表示されるようになりました。s = s.split('\n').join('<br />');
絵文字の数分羅列させればOK。s = s.split('〔わら〕').join('<img src="http://blog-imgs-30.fc2.com/t/i/g/tigerwoos/pangya_emoji_013.gif" width="19" height="19" style="vertical-align:middle" alt="わら" />');
※〔わら〕の[]は半角でね！
※この記事が参考になったら、トラックバックしていただけたら幸いです。
(1)
(2)
COMMENT
ひえ〜 by るんるん
ゲイさんがこの機能をホスィと言うので
タグと睨めっこしたんですが[げーあにめ]撃沈
この機能ついたテンプレート作って公開してくれる日を心待ちにしております[わーんあにめ]
タグと睨めっこしたんですが[げーあにめ]撃沈
この機能ついたテンプレート作って公開してくれる日を心待ちにしております[わーんあにめ]
>るんるんさん by Tigerうっす
このカスタマイズは、少々難易度が高いですからね。
しかも参照先の記事は一部JUGEM用に書かれているので、
テンプレを見慣れていないと、分かりにくいところがあるかもしれません。
σ(・_・)がFC2用に記事にするので、それを見てね。
近いうちにこの機能付きのテンプレも公開したいと思います。
デザインはどうするかぁ〜[むふ]
しかも参照先の記事は一部JUGEM用に書かれているので、
テンプレを見慣れていないと、分かりにくいところがあるかもしれません。
σ(・_・)がFC2用に記事にするので、それを見てね。
近いうちにこの機能付きのテンプレも公開したいと思います。
デザインはどうするかぁ〜[むふ]
CSSチェンジャー
(￣- ￣ ) ンー
最近はパンヤでネタがないので、テンプレとかカスタマイズとかのネタが続いてますな。
でも、メインはパンヤプレイ日記ですので、見逃さないでぇ〜？＞＜
それでも、めげずに今回もカスタマイズネタｗ
新しいデザインのテンプレを作ったので、乗り換えてみた。
少々色を意識したテンプレなので、
色を変えてみたらイメージも変わるだろうと思い、
数種類のスタイルシートを作ってみたんだけど、
いちいち書き換えるのも面倒くさいｗ
確かスタイルシートは動的に変えることができるはずだと思い調べてみたら、
ウェブ木箱さんでスタイルチェンジャーなる物を(￣ー『＋』)発見!!
(・∀・)ｲｲｼﾞｬﾅｰｲ!!
スクリプトや記述するHTMLはジェネレーターで作れるので、とっても簡単＾＾
スイッチはテキストじゃ味気ないのでボタン形式にして、
右メニューの一番上に設置してみました。
4色あるボタンを押してみてね。
CSSが動的に変わります。
クッキーで設定が保存されるので、次回見た時も変更したCSSが維持されます。
最近はパンヤでネタがないので、テンプレとかカスタマイズとかのネタが続いてますな。
でも、メインはパンヤプレイ日記ですので、見逃さないでぇ〜？＞＜
それでも、めげずに今回もカスタマイズネタｗ
新しいデザインのテンプレを作ったので、乗り換えてみた。
少々色を意識したテンプレなので、
色を変えてみたらイメージも変わるだろうと思い、
数種類のスタイルシートを作ってみたんだけど、
いちいち書き換えるのも面倒くさいｗ
確かスタイルシートは動的に変えることができるはずだと思い調べてみたら、
ウェブ木箱さんでスタイルチェンジャーなる物を(￣ー『＋』)発見!!
(・∀・)ｲｲｼﾞｬﾅｰｲ!!
スクリプトや記述するHTMLはジェネレーターで作れるので、とっても簡単＾＾
スイッチはテキストじゃ味気ないのでボタン形式にして、
右メニューの一番上に設置してみました。
4色あるボタンを押してみてね。
CSSが動的に変わります。
クッキーで設定が保存されるので、次回見た時も変更したCSSが維持されます。
Open↓
最初、もともとheadタグ内にあるCSSのリンクをはずして設置したんだけど、
このスタイルチェンジャーはJavaScriptなので、
ブラウザでJavaScriptをOFFにしちゃうとCSSが適用されなくて、
のっぺりページになっちゃいます。
そこで、もともとのCSSのリンクを復活させたら、
JavaScriptがOFFでもデフォルトのCSSが適用されるようになりました。
ところで、このテンプレはすっきり系なので、
パンヤのBLOGらしさがなくなってしまったｗ
そこで、先日のエポートロゴキャンペーンでゲットしたシールのキャラクター画像をTOPに貼ってみました。
しかし、マックスがいないのよねぇｗ
なぜなら、マックスのシールだけゲットできなかったからですｗ
誰か、マックスのシールの画像ちょうだいｗ
最初、もともとheadタグ内にあるCSSのリンクをはずして設置したんだけど、
このスタイルチェンジャーはJavaScriptなので、
ブラウザでJavaScriptをOFFにしちゃうとCSSが適用されなくて、
のっぺりページになっちゃいます。
そこで、もともとのCSSのリンクを復活させたら、
JavaScriptがOFFでもデフォルトのCSSが適用されるようになりました。
ところで、このテンプレはすっきり系なので、
パンヤのBLOGらしさがなくなってしまったｗ
そこで、先日のエポートロゴキャンペーンでゲットしたシールのキャラクター画像をTOPに貼ってみました。
しかし、マックスがいないのよねぇｗ
なぜなら、マックスのシールだけゲットできなかったからですｗ
誰か、マックスのシールの画像ちょうだいｗ
COMMENT
ん〜 by xまゆみx
確か、ぢぇにがマックスのシール使ってたよぉな気がします。。。ｗ
あとは。。。うちのBlogの記事で使った一覧のSSならｗ
http://blog17.fc2.com/m/mayusaya/file/20060310_5.jpg
これですｗ
実際のシールの画像のほうが大きくていいかと思うけどね。。。ｗ
もしだったら、ぢぇにに頼んでおくよｗ
あとは。。。うちのBlogの記事で使った一覧のSSならｗ
http://blog17.fc2.com/m/mayusaya/file/20060310_5.jpg
これですｗ
実際のシールの画像のほうが大きくていいかと思うけどね。。。ｗ
もしだったら、ぢぇにに頼んでおくよｗ
>xまゆみxさん by Tigerうっす
(ノ゜ω゜)ノ*.オオォォォォォォォー
これで問題なしですd(￣◇￣)b グッ♪
xまゆみxさん、どうもありがとう〜。
さっそく使わせて頂きました＾＾
これで問題なしですd(￣◇￣)b グッ♪
xまゆみxさん、どうもありがとう〜。
さっそく使わせて頂きました＾＾
管理人のみ閲覧できます by -
Style Changer（改）
共有テンプレートを作り始めてから常々思っていたのですが、
作っているテンプレートの表示確認をする際に、
いちいちテンプレートの変更をするのは面倒くさい＞＜
プレビューだと、INDEXページしか確認できないし・・・
だから、めったにお客様の来ない（ｗ）もう一つの実験用BLOGに移植して確認していたんだけど、
それも面倒くさい( ﾟ∀ﾟ)･∵. ﾌﾞﾞﾊｯ!
共有プラグインに「Style Changer」っていうのがありますが、
テンプレ名を入力しなくちゃいけないのよね(￣- ￣ ) ンー
プルダウンメニューで切り替えられるものを自作するかとも思っていましたが、
ググってみると・・・
ウェビンブログさんで「Style Changer（改）」なるものを発見！
(ノ゜ω゜)ノ*.オオォォォォォォォー
まさに望んでいたものだぁ！
FCafeさんの「Style Keeper」と併用すると、
プレビュー先でリンクをクリックしてもスタイルが維持されるので、さらに便利に＾＾
σ(・_・)しか使わんだろうと、
ひっそりと右メニューの下部に設置してみましたｗ
('∇^d) ナイス☆!!
作っているテンプレートの表示確認をする際に、
いちいちテンプレートの変更をするのは面倒くさい＞＜
プレビューだと、INDEXページしか確認できないし・・・
だから、めったにお客様の来ない（ｗ）もう一つの実験用BLOGに移植して確認していたんだけど、
それも面倒くさい( ﾟ∀ﾟ)･∵. ﾌﾞﾞﾊｯ!
共有プラグインに「Style Changer」っていうのがありますが、
テンプレ名を入力しなくちゃいけないのよね(￣- ￣ ) ンー
プルダウンメニューで切り替えられるものを自作するかとも思っていましたが、
ググってみると・・・
ウェビンブログさんで「Style Changer（改）」なるものを発見！
(ノ゜ω゜)ノ*.オオォォォォォォォー
まさに望んでいたものだぁ！
FCafeさんの「Style Keeper」と併用すると、
プレビュー先でリンクをクリックしてもスタイルが維持されるので、さらに便利に＾＾
σ(・_・)しか使わんだろうと、
ひっそりと右メニューの下部に設置してみましたｗ
('∇^d) ナイス☆!!
Open↓
メニューのエントリー、コメント、トラックバックの部分をツリー表示にしていますが、
カテゴリー、リンク（BOOKMARKってところ）もツリー化してみようかと・・・
カテゴリーはできたんだけど、
リンクができない・・・
何でだ・・・（あせ）
カテゴリー、リンク（BOOKMARKってところ）もツリー化してみようかと・・・
カテゴリーはできたんだけど、
リンクができない・・・
何でだ・・・（あせ）
自分のコメントに背景色を付ける
自分のコメントかゲストのコメントか一目で分かるように、
自分のコメントには背景色がつくようにカスタマイズしてみました。
まぁ、たいしたカスタマイズじゃないんですけど
自分のコメントには背景色がつくようにカスタマイズしてみました。
まぁ、たいしたカスタマイズじゃないんですけど
Open↓
CSSのレベル2から、クラス名には日本語が使えるんですねぇ。
今日知ったｗ
なので、コメントした者の名前をクラス名にして、
CSSで属性を定義すれば、いいのね。
後、クラス名はスペースで区切って、複数定義できることも今日知った＾＾；
σ(・_・)のテンプレのコメント表示の記述は下記のようになっているので、
スタイルシートにも下記を追加。
2006.04.12追記
説明が分かりにくかったようなので、追記＾＾；
<!--comment-->〜<!--/comment-->の中全体をdivタグでくくってやって、
クラス指定すればOKです。
※この記事が参考になったら、トラックバックお願いいたします。
CSSのレベル2から、クラス名には日本語が使えるんですねぇ。
今日知ったｗ
なので、コメントした者の名前をクラス名にして、
CSSで属性を定義すれば、いいのね。
後、クラス名はスペースで区切って、複数定義できることも今日知った＾＾；
σ(・_・)のテンプレのコメント表示の記述は下記のようになっているので、
赤字の部分を追記して、<!--comment-->
<div class="comment_entry">
<div class="comment_title"><a name="comment<%comment_no>"><strong><%comment_title></strong> (<%comment_no>)</a></div>
<div class="comment_body"><%comment_body></div>
<div class="comment_state">[ <%comment_year>.<%comment_month>.<%comment_day>(<%comment_youbi>) <%comment_hour>:<%comment_minute>] <a href="<%comment_url>" target="_blank">URL</a> | <%comment_mail+name> #<%comment_trip> | <a href="<%comment_edit_link>">EDIT</a> | <a href="#pagetop" title="Top">↑</a>
</div>
</div>
<!--/comment-->
<!--comment-->
<div class="comment_entry <%comment_name>">
<div class="comment_title"><a name="comment<%comment_no>"><strong><%comment_title></strong> (<%comment_no>)</a></div>
<div class="comment_body"><%comment_body></div>
<div class="comment_state">[ <%comment_year>.<%comment_month>.<%comment_day>(<%comment_youbi>) <%comment_hour>:<%comment_minute>] <a href="<%comment_url>" target="_blank">URL</a> | <%comment_mail+name> #<%comment_trip> | <a href="<%comment_edit_link>">EDIT</a> | <a href="#pagetop" title="Top">↑</a>
</div>
</div>
<!--/comment-->
スタイルシートにも下記を追加。
これだけですｗ.Tigerうっす { background-color:#F0F8FF; }
2006.04.12追記
説明が分かりにくかったようなので、追記＾＾；
<!--comment-->〜<!--/comment-->の中全体をdivタグでくくってやって、
クラス指定すればOKです。
<!--comment-->
<div class="<%comment_name>">
〜
</div>
<!--/comment-->
※この記事が参考になったら、トラックバックお願いいたします。
動く絵文字導入
昨日大会プレイ中に、はやさんからささやきが。
なんでも、BLOGに動く絵文字を導入したとのこと。
早速見物に(/*⌒-⌒)o レッツゴー♪
なんと、パンヤ絵文字が動いてる
はやさんから情報を聞き入れ、韓国パンヤからダウンロード。
早速真似っこして、gifアニメの絵文字を追加しちゃいました
でも、Internet Explorerでこの絵文字をクリックすると、リストの絵文字の動きが止まっちゃいますねぇ
FirefoxやNetscapeでは、この現象は起きません。
IEってバグだらけだしなぁ。
スクリプト直せば直るのかな・・・面倒くさくて見てません
→対策しました。方法は追記にて。
なんでも、BLOGに動く絵文字を導入したとのこと。
早速見物に(/*⌒-⌒)o レッツゴー♪
なんと、パンヤ絵文字が動いてる
はやさんから情報を聞き入れ、韓国パンヤからダウンロード。
早速真似っこして、gifアニメの絵文字を追加しちゃいました
でも、Internet Explorerでこの絵文字をクリックすると、リストの絵文字の動きが止まっちゃいますねぇ
FirefoxやNetscapeでは、この現象は起きません。
IEってバグだらけだしなぁ。
スクリプト直せば直るのかな・・・面倒くさくて見てません
→対策しました。方法は追記にて。
Open↓
なので、絵文字クリック時に絵文字のアニメが止まってしまうのを回避するには、絵文字を出力するスクリプトを下記のように修正。
続きの折りたたみ表示、コメントの折りたたみのカスタマイズしている場合も同様の修正をしておくと、
続きOpen/Close、コメントOpen/Closeでも絵文字は止まりません。
※この記事が参考になったら、トラックバックお願いいたします。
の記述を下記のように書き換えればいいらしい。<a href="javascript:xxxx()" 〜
<a href="" onclick="xxxx();return false" 〜
なので、絵文字クリック時に絵文字のアニメが止まってしまうのを回避するには、絵文字を出力するスクリプトを下記のように修正。
<!-- コメントにカスタマイズ絵文字入力機能：画像リスト出力 -->
function writeCustmizeEmojiTagList() {
<!-- コメントを入力するテキストエリアを指定 -->
var textarea = 'document.comment_form.comment';
<!-- ***************** 設定ここまで ***************** -->
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
for (var i = 0; i < list.length; i++) {
window.document.write('<a href="javascript:;" onclick="addCustmizeEmoji(' + textarea + ', ¥'' + list[i][0] + '¥');"><img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" /></a>');
}
}
↓ 青字の部分を下記のように書き換え
window.document.write('<a href="#" onclick="addCustmizeEmoji(' + textarea + ', ¥'' + list[i][0] + '¥');return false"><img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" /></a>');
続きの折りたたみ表示、コメントの折りたたみのカスタマイズしている場合も同様の修正をしておくと、
続きOpen/Close、コメントOpen/Closeでも絵文字は止まりません。
※この記事が参考になったら、トラックバックお願いいたします。
COMMENT
by hayano7228
[わらぼうし][くらっかー]ナイス〜
picture manegerでサイズ変更して元のサイズでアップし直そうと思ってますよ〜[ぺこあにめ]
[めざまし]まぁ時間の問題ですけどね[ういんくあにめ]
picture manegerでサイズ変更して元のサイズでアップし直そうと思ってますよ〜[ぺこあにめ]
[めざまし]まぁ時間の問題ですけどね[ういんくあにめ]
うわぉ！ by マツタカ
ＨＩＯ１００号おめでとうございます！
次は２００ですね[ひょえ]
そしてトップ開いたとたんに
アリンのお尻がドン！と！！！！！
このアングルは貴重品ですよね[ひょえ]
いやー動いてますな[いいえあにめ]
次は２００ですね[ひょえ]
そしてトップ開いたとたんに
アリンのお尻がドン！と！！！！！
このアングルは貴重品ですよね[ひょえ]
いやー動いてますな[いいえあにめ]
by 未流
動く絵文字も楽しくていいけど、アリンのＬＰポーズもなかなかいいですねぇ[ういんくあにめ]
お返事 by Tigerうっす
>はやさん
おかげさまで設置できました〜。
サイズが微妙に違うのは愛嬌ってことで[ひょえ]
リサイズしようかと思ったけど、面倒くさくてやってませんｗ
>マツタカさん
どうもありがとう〜。
200号HIO・・・果てしなく遠い[ひょえ]
アリンのポーズは、このスクリーンショットを撮りたくて、ファミモでわざとLPにしたんです[わらあにめ]
ちょっとえっちぽいところがいいでしょｗ
>未流さん
ついついかがんで、覗き込んでしまいそうです[ひょえ]
おかげさまで設置できました〜。
サイズが微妙に違うのは愛嬌ってことで[ひょえ]
リサイズしようかと思ったけど、面倒くさくてやってませんｗ
>マツタカさん
どうもありがとう〜。
200号HIO・・・果てしなく遠い[ひょえ]
アリンのポーズは、このスクリーンショットを撮りたくて、ファミモでわざとLPにしたんです[わらあにめ]
ちょっとえっちぽいところがいいでしょｗ
>未流さん
ついついかがんで、覗き込んでしまいそうです[ひょえ]
by 未流
絵文字アニメーション、こちらのを参考にさせてもらってやってみました[ぺこあにめ]
なんとか表示されました[おみごとあにめ]
なんとか表示されました[おみごとあにめ]
by §さり§
参考になりました[ぺこあにめ]
>未流さん by Tigerうっす
あれ、コメントが変わってるｗ
自己解決したようですね。
オメデト〜[おみごとあにめ]
自己解決したようですね。
オメデト〜[おみごとあにめ]
by 未流
わざわざうちのページを見に来ていただいてありがとうございました[ぺこあにめ]
自己解決できました。時間がかかったー[わーんあにめ]
§さり§さんはあっさり設置できたようですね。さすが[おみごとあにめ]
自己解決できました。時間がかかったー[わーんあにめ]
§さり§さんはあっさり設置できたようですね。さすが[おみごとあにめ]
>§さり§さん by Tigerうっす
参考になったようで、良かったです[ぺこあにめ]
>未流さん by Tigerうっす
無事に設置できて、良かったですね[ういんくあにめ]
σ(・_・)の記事の書き方が悪かったかな・・・[あせ]
σ(・_・)の記事の書き方が悪かったかな・・・[あせ]
ありがとうございました＾＾ by 新條ぴかる
なんとか修正完了できました〜[おんぷ]
自分のコメントの背景色を変えるも一応やってみようと思ったのですが・・
テンプレートが違うせいかどこに<%comment_name>を入れたらよいのかわからず諦め[おみごとあにめ]
うっすさんのテンプレ公開お待ちしております！！ｗ
配布待ってるファン１号より[はーとあにめ]
自分のコメントの背景色を変えるも一応やってみようと思ったのですが・・
テンプレートが違うせいかどこに<%comment_name>を入れたらよいのかわからず諦め[おみごとあにめ]
うっすさんのテンプレ公開お待ちしております！！ｗ
配布待ってるファン１号より[はーとあにめ]
>新條ぴかるさん by Tigerうっす
絵文字完了したようですね。
お役に立てて、よかったです＾＾
自分のコメントの背景色を変えるの、分からなかったですか。
分かりにくかったかな・・・＾＾；記事手直ししておきます。
このテンプレ、使います？
んじゃ、プラグイン対応に修正して、登録してみようかな[わらあにめ]
個別配布してもいいですけどｗ
お役に立てて、よかったです＾＾
自分のコメントの背景色を変えるの、分からなかったですか。
分かりにくかったかな・・・＾＾；記事手直ししておきます。
このテンプレ、使います？
んじゃ、プラグイン対応に修正して、登録してみようかな[わらあにめ]
個別配布してもいいですけどｗ
by -
[ピピン][ダンプー]
by あはは！
こここここｋｍ、、、こんににににちちちははｈ！[ぺこあにめ]
by -
[おみごとあにめ][いいえあにめ][でんわ][くらっかー][ぐらさん][ピピン][ティッキー][ロロ][わらぼうし][わらあにめ][むふあにめ][びっくり][ちょき][ぺんぎん][ほね][でんわ][でんわ][げーあにめ]
by -
by -
かっこいいさ
Ths is very interesting!!
Ths is very interesting!!
by - 
[すき][かなし][ぎょ][むふ][おくりもの]
[すき][かなし][ぎょ][むふ][おくりもの]
by -
[おくりものあにめ]
by 姫
[めざまし][おくりものあにめ][わらあにめ]
かわ〜 by さや
[かみなり][あめ][ゆき][ほのお][たいよう][てんし][あくま]かわぃ〜〜＾〜〜〜[はーとあにめ][おんぷ][いいえあにめ][かなし]
Tigerうっす(10/04)
atok440(09/24)
ゲイ・ヨンジュン(09/23)
Tigerうっす(08/28)
ゆきねこ(08/27)
Tigerうっす(08/27)
ゆきねこ(08/24)
ゲイ･ヨンジュン(06/23)
みぎｗ(04/03)
亜里沙(03/08)
Tigerうっす(03/01)
Tigerうっす(03/01)
ゲイ･ヨンジュン(02/29)
ゲイ･ヨンジュン(02/26)
ひさちん＠(02/24)
Tigerうっす(02/22)
ひさちん＠(02/21)
ゲイ・ヨンジュン(02/18)
さや(02/10)
ゆきねこ(02/07)