ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
FC2ブログ  コメント  コメント装飾  javascript  

コメント装飾 load.js をカスタマイズ

2009/05/22 (金)  カテゴリー: ブログカスタマイズ上級

FC2ブログの コメント装飾機能。 装飾用の独自タグ(変数) を簡単に入れられるように と 深月@FC2 さんの 「仮タグ挿入スクリプト」 が用意されています。

この 「仮タグ挿入スクリプト」 load.js は全サーバーに置いてあるもので、

<script type="text/javascript" src="<%server_url>load.js"></script>
FC2 コメント装飾+プレビュー機能
[ SAMPLE ]

と テンプレートの表示したい場所に貼り付ければOK! 共有テンプレート に元から設置されているものも多そうです。

これって、テキストエリアの文字を反転させている場合、その文字を独自タグで挟む。 反転させている部分がなければ、カーソル位置に挿入。 絵文字まで簡単に選べる! というすごく便利なスクリプトですよね

ただ、「コメントにやたらと絵文字を使われるのも...。」 と思っている私にとってはちょっと重たいかな...と、あえて使わずにいました。

load.js(改変版)+プレビュー機能
[ コメント投稿欄へ ]

ところが、最近になって、太字打ち消し くらいは 簡単に使えた方がやっぱり便利かな と思うようになり、色々検索。 「なかなか良いスクリプトってないなぁ。。。」 と思っていたら、ありました!! load.js ← これ公式スクリプトなのに 改変などもOKで、しかも私でも弄れそう。。。

という訳で、現在は ari_r_load.js を使っています。
【 プレビュー (HTML版) : ari_r_load.js

元ファイル (load.js) との変更点は、アイコンパレット や カラーパレット など必要ない部分を削除した点 と 以下の書き換えです。

// 書き出す
function Wrt(){
document.open();
document.write('<label title="太字の文が入ります"><input type="radio" name="moji" onClick="Tag(¥'[太字]¥',¥'[/太字]¥',¥'太字の文¥');" />[太字]</label>&nbsp;&nbsp;');
document.write('<label title="打ち消しの文が入ります"><input type="radio" name="moji" onClick="Tag(¥'[打消]¥',¥'[/打消]¥',¥'打ち消しの文¥');" />[打消]</label>&nbsp;&nbsp;');
document.write('<label title="色付きの文が入ります"><input type="radio" name="moji" onClick="Tag(¥'[色:cc3366]¥',¥'[/色]¥',¥'色付きの文¥');" />[色:<span style="color:#cc3366">赤</span>]</label>');
document.write('<label title="色付きの文が入ります"><input type="radio" name="moji" onClick="Tag(¥'[色:339966]¥',¥'[/色]¥',¥'色付きの文¥');" />[色:<span style="color:#339966">緑</span>]</label>');
document.close();
}

■色文字部分 を応用すれば、いくらでもカスタマイズができると思います。

あとは、保存した ari_r_load.js (名前は変えてもOKです) をアップロードして テンプレートの表示したい場所に ↓下の一文 を貼り付ければ完成です!

<script type="text/javascript" src="http://blog-imgs-18.fc2.com/a/r/i/ ・・・ /ari_r_load.js" charset="euc-jp"></script>

実際には全ての 独自タグ(装飾用の変数) が使えるので、
[絵文字:v-274] [絵文字:v-424] [絵文字:e-77] などももちろん表示できます! コメント投稿欄 (テキストエリア) のプレビューで試してみてください。 装飾用の変数については [ SAMPLE ] ページに載せています。


[ 関連記事 : コメントのプレビューがより正確にVer.Up ]

キーワード検索 : FC2ブログ  コメント  コメント装飾  javascript  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-74.html

2009/05/22 ~ | Comment (3) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

3 Comment


ari_r_load.js スクリプトが効かないのです。

ari_r_load.js 試用しました。
<script type="text/javascript" src="ttp://blog-imgs-18.fc2.com/a/r/i/ ・・・ /ari_r_load.js" charset="euc-jp"></script> 参照し
<script type="text/javascript" src="ttp://blog-imgs-32.fc2.com/a/b/c/aaaaaa/ari_r_load.js" charset="euc-jp"></script> をHTMLに貼りつけ。
ari_r_load.jsをファイルアップロードしました。
ttp://blog50.fc2.com/control.php?mode=control&process=upload
表示 ttp://blog-imgs-32.fc2.com/a/b/c/aaaaaa/ari_r_load.js 
ファイルのソース表示されます。
しかし、ブログのttp://aaaaaa.blog50.fc2.com/blog-entry-aa.html#comments
スクリプトが効かないのです。
試しに
<script type="text/javascript" src="
ttp://blog-imgs-18-origin.fc2.com/a/r/i/arinogotokuatumarite/ari_r_load.js" charset="euc-jp"></script>
試用してHTMLに貼りつけ
スクリプトが効きます。
<script type="text/javascript" src="ttp://blog-imgs-32.fc2.com/a/b/c/aaaaaa/ari_r_load.js" charset="euc-jp"></script> で、スクリプトが効かないのは、なぜでしょうか。

尚 上記 URLの http;// を ttp:// に
制限上 ttp://  にしています。


phl |  2010/03/02 (火) [ 編集 ] No.314


phl さんへ

ari_r_load.js の件、直接読み込めばOKで、DLしたものだとダメということですよね。
恐らく、DLした際、文字コードが Shift-JIS で保存されてしまったことが原因かと思います。
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/a/b/c/aaaaaa/ari_r_load.js" charset="shift-jis"></script>
↑ の形に直せば機能すると思いますが、文字コードを合わせたければ、EUC-JP で保存(再DL)したものを使ってみてください。

paruparu |  2010/03/02 (火) [ 編集 ] No.315


ari_r_load.js スクリプトが効かないのです。

>DLした際、文字コードが Shift-JIS で保存されてしまったことが原因かと思います。

ご指摘通りShift-JISで保存されてました。TeraPadで
euc-jpで保存アップロードでOKでした。
回答有難う御座いました。

phl |  2010/03/03 (水) [ 編集 ] No.316

コメントを投稿する 記事: コメント装飾 load.js をカスタマイズ


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback


この記事にトラックバックする (FC2ブログユーザー限定)

ブログデザインの変更

ブログのデザインを変更しました。 デザインのひな型を決めてから、実際に仕上がるまで約2週間…すっかりバテてしまいました 自分でブログ...

どうしようもない僕の足元にElonaが転がってきた。 2009/10/25