コメント装飾絵文字入力スクリプト2 : FC2ブログ

コメント装飾絵文字入力スクリプト2

2010-05-26 水 23:08
FC2ブログ

FC2 COMMENT DECORATION2

FC2 COMMENT DECORATION2

　指定の色とアイコンのみ表示するスクリプト。

　FC2ブログのコメント仮タグ挿入スクリプト（load.js）の代わりに使用します。

仮タグ挿入スクリプト（load.js）との違い
利用方法
基本設定 / 色・アイコンの追加
絵文字アイコン識別番号表
スクリプトを別サーバにアップする
FC2のload.jsを削除する
『太』『斜』などのボタン挿入位置を変更する
プレビューの背景色、横幅などのデザインを変更する
ご利用にあたって・更新履歴

仮タグ挿入スクリプト（load.js）との違い

PC環境を除けば、コメントを設置しているすべてのテンプレートで使用可。
常にパレットを表示可。
指定の色、アイコンのみを表示。
左の[P]をクリックするとプレビュー。
コメントの中でプレビューしたいテキストを選択（ドラッグ）した状態で、右の[P]をクリックすると、その選択範囲のみをプレビュー。コメントの文字数・絵文字などが多いときに使用。
Previewのボックスをチェックするとリアルタイムプレビュー。コメントの文字数・絵文字などが少ないときに使用。
body要素内の途中でjsファイルを読み込まないので、変なところでブログの読み込みが止まったりしない。

利用方法

　[A][B]どちらかのコードをテンプレート（HTML）のhead要素内に入れます。できるだけスクリプトは別サーバにアップロードしてご利用ください。テンプレート内にあるFC2の load.js スクリプトは削除します。削除するコードについてはFC2のload.jsを削除するをご覧ください。

[A] コメント装飾とプレビューを利用する

<!--permanent_area-->
<script type="text/javascript" src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/load02.js" charset="utf-8"></script>
<!--/permanent_area--><!--edit_area-->
<script type="text/javascript" src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/load02.js" charset="utf-8"></script>
<!--/edit_area-->

</head>

[B] コメント装飾のみ利用する

<!--permanent_area-->
<script type="text/javascript" src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/load02c.js" charset="utf-8"></script>
<!--/permanent_area--><!--edit_area-->
<script type="text/javascript" src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/load02c.js" charset="utf-8"></script>
<!--/edit_area-->

　次に表示する色とアイコンを指定するコードを入れます。

　[ア][イ]どちらかを最下部（</body>の前）付近に入れます（最下部でなくても何らかのarea変数内でなければ、どこでも構いません）。

[ア] 簡易

<!--not_index_area--><!--not_date_area--><!--not_category_area-->
<!--not_search_area--><!--not_tag_area--><!--not_titlelist_area-->
<script type="text/javascript">var FcolorIcon = {
 setup : [ 0, 0, 0, 18, 18,
  '19px', '10px', '1px #cccccc solid', 'none',	//color
  '1px #cccccc solid', '#ffffcc',             	//icon table
  '19px', '19px', '0px #cccccc solid', 'none' 	//icon td
 ],color : [
  '000000', '666666', '999999', 'cccccc', 'ffffff',
  'ff0000', 'ff00ff', 'ff8800', 'ffff00', '00ff00', '00aa33',
  '0000ff', '0088ee', '00ffff'
 ],icon : [
  'v-218', 'v-221', 'v-217', 'v-116', 'v-236', 'v-237', 'e-291', 'v-315',
  'v-344', 'v-359', 'v-371', 'v-274', 'v-231', 'v-278', 'v-277', 'v-279',
  'v-280'
 ]
}</script>
<!--/not_titlelist_area--><!--/not_tag_area--><!--/not_search_area-->
<!--/not_category_area--><!--/not_date_area--><!--/not_index_area-->

</body>

　スクリプトが機能するのであれば、特に問題は起こらないと思いますが、トップページからの送りページ（/page-1.html）でも上記コードは表示されます。これを回避するには、[イ]のように permanent_area と edit_area のそれぞれに上記コードを追加する必要があります。

[イ] permanent_area + edit_area

<!--permanent_area-->
<script type="text/javascript">var FcolorIcon = {
 setup : [ 0, 0, 0, 18, 18,
  '19px', '10px', '1px #cccccc solid', 'none',	//color
  '1px #cccccc solid', '#ffffcc',             	//icon table
  '19px', '19px', '0px #cccccc solid', 'none' 	//icon td
 ],color : [
  '000000', '666666', '999999', 'cccccc', 'ffffff',
  'ff0000', 'ff00ff', 'ff8800', 'ffff00', '00ff00', '00aa33',
  '0000ff', '0088ee', '00ffff'
 ],icon : [
  'v-218', 'v-221', 'v-217', 'v-116', 'v-236', 'v-237', 'e-291', 'v-315',
  'v-344', 'v-359', 'v-371', 'v-274', 'v-231', 'v-278', 'v-277', 'v-279',
  'v-280'
 ]
}</script><!--/permanent_area--><!--edit_area-->
<script type="text/javascript">var FcolorIcon = {
 setup : [ 0, 0, 0, 18, 18,
  '19px', '10px', '1px #cccccc solid', 'none',	//color
  '1px #cccccc solid', '#ffffcc',             	//icon table
  '19px', '19px', '0px #cccccc solid', 'none' 	//icon td
 ],color : [
  '000000', '666666', '999999', 'cccccc', 'ffffff',
  'ff0000', 'ff00ff', 'ff8800', 'ffff00', '00ff00', '00aa33',
  '0000ff', '0088ee', '00ffff'
 ],icon : [
  'v-218', 'v-221', 'v-217', 'v-116', 'v-236', 'v-237', 'e-291', 'v-315',
  'v-344', 'v-359', 'v-371', 'v-274', 'v-231', 'v-278', 'v-277', 'v-279',
  'v-280'
 ]
}</script>
<!--/edit_area-->

　テンプレートは見難くなりますが、[A]より無駄な出力はありません。変更するときはもう片方も同じコードにしなければなりません（コピー上書き）。

　プレビューのみ利用する場合はFC2 COMMENT DECORATIONの[C]を使用します。

基本設定

setup : [ 0, 0, 0, 18, 18,

　最初の「0」を「1」に変更すると『色』（色パレット）が削除されます。二番目の「0」を「1」に変更すると『ヒヨコ』（アイコンパレット）が削除されます。例えば、次のようにするとアイコンパレットがなくなります。

setup : [ 0, 1, 0, 18, 18,

　三番目の「0」を「1」に変更すると上段にアイコンパレット、下段に色パレットの順番に入れ替わります。

setup : [ 0, 0, 1, 18, 18,

並び替え

　四番目の数値「18」には一行に並べる色の数を指定します。例えば、「18」でcolorに色が20色あった場合は、一行目に18色、二行目に2色表示されます。初期値の14色で「7」を指定すると次のようになります（一行7色）。

setup : [ 0, 0, 0, 7, 18,

14色で「7」

　五番目の数値「18」には一行に並べるアイコンの数を指定します。例えば、「18」でiconに画像が20個あった場合は、一行目に18個、二行目に2個表示されます。初期値の17個で「10」を指定すると次のようになります（一行10個まで）。

setup : [ 0, 0, 0, 18, 10,

17個で「10」

'19px', '10px', '1px #cccccc solid', 'none',	//color

　最初の「19px」は各色の横幅、次の「10px」が高さです。「1px #cccccc solid」は色パレットの外枠の線です。最後の「none（なし透過）」は背景色です。

'15px', '15px', '1px #000000 solid', '#ffffff',	//color

　上記に変更すると次のようになります。

正方形

'1px #cccccc solid', '#ffffcc',             	//icon table

　「1px #cccccc solid」はアイコンパレットの外枠の線です。「#ffffcc」は背景色です。

'0px none', 'none',             	//icon table

　上記に変更すると線と背景がなくなります。

線背景なし

'19px', '19px', '0px #cccccc solid', 'none' 	//icon td

　最初の「19px」は各アイコンの横幅、次の「19px」が高さです。「0px #cccccc solid」は各アイコンの枠線です。初期値は「0px」なので、表示されません。最後の「none（なし透過）」は各アイコンの背景色です。

'0px none', 'none',             	//icon table
'21px', '21px', '1px #cccccc solid', '#ffffcc' 	//icon td

　上記に変更すると各アイコンごとに線と背景が表示されます。

アイコンに線と背景

色・アイコンの追加

color : [
  '000000', '666666', '999999', 'cccccc', 'ffffff',
  'ff0000', 'ff00ff', 'ff8800', 'ffff00', '00ff00', '00aa33',
  '0000ff', '0088ee', '00ffff'
]

　colorの中に追加する色を入れます。値は #なしの16進数（6桁）です。「'」で囲み、「,」で区切ります。最後には「,」をつけてはいけません。長くなったら適当な箇所（「,」後）で改行します。「,」の後のスペースは削除しても構いません。

color : [
  '000000', '666666', '999999', 'cccccc', 'ffffff',
  'ff0000', 'ff00ff', 'ff8800', 'ffff00', '00ff00', '00aa33',
  '0000ff', '0088ee', '00ffff','99cc00','9900cc','cc9900','990000'
]

　上記のコードを加えると色が追加されます。

　初期値は setup : [ 0, 0, 0, 18, 18, なので、二行する場合は、倍の36色にするか、

 '19px', '10px', '1px #cccccc solid', '#ffffff',   //color

　の 'none' に '#ffffff' などを指定すると見栄えがよくなります。
　1行に並べる数の変更

icon : [
  'v-218', 'v-221', 'v-217', 'v-116', 'v-236', 'v-237', 'e-291', 'v-315',
  'v-344', 'v-359', 'v-371', 'v-274', 'v-231', 'v-278', 'v-277', 'v-279',
  'v-280'
]

　iconの中に追加するアイコンを入れます。値は識別コード-数値です。「'」で囲み、「,」で区切ります。最後には「,」をつけてはいけません。長くなったら適当な箇所（「,」後）で改行します。「,」の後のスペースは削除しても構いません。

　識別コード-数値はアイコンを挿入したときに表示される [絵文字:v-218] の後半部分です。識別コードは『v』『i』『e』の3種類です。

icon : [
  'v-218', 'v-221', 'v-217', 'v-116', 'v-236', 'v-237', 'e-291', 'v-315',
  'v-344', 'v-359', 'v-371', 'v-274', 'v-231', 'v-278', 'v-277', 'v-279',
  'v-280','v-295','v-323','v-324','v-337','v-353','v-354','e-377','e-402',
  'v-233'
]

　上記のコードを加えるとアイコンが追加されます。

addicon

　初期値は setup : [ 0, 0, 0, 18, 18, なので、19個目以降は二行目に表示されます。
　1行に並べる数の変更

絵文字アイコン識別番号表

絵文字: v-1～275: 　
絵文字: v-276～545: 　
絵文字: i-1～282: 　
絵文字: e-1～260: 　
絵文字: e-261～518:

スクリプトを別サーバにアップする

使用するコードのみを保存します。保存が終わったらファイルをアップロードします。アップロードが完了したら、ファイルのアドレスを先のコードの中に入れます。 の src にも同じアドレスを入れます。

[A] http://blog-imgs-44.fc2.com/p/a/r/paro2day/load02.js

[B] http://blog-imgs-44.fc2.com/p/a/r/paro2day/load02c.js

<script type="text/javascript" src="ファイルのアドレス" charset="utf-8"></script>

　出来上がったコードを先のコードの中に入れます。[A]を利用する場合は次のようになります。

<!--permanent_area-->
<script type="text/javascript" src="http://～/load02.js" charset="utf-8"></script>
<!--/permanent_area--><!--edit_area-->
<script type="text/javascript" src="http://～/load02.js" charset="utf-8"></script>
<!--/edit_area-->

</head>

FC2のload.jsを削除する

　もとから load.js がないテンプレートについては何も削除する必要はありません。

　削除するのは次のようなコードです。

<script type="text/javascript" src="load.js"></script>

　load.jsの前に blog1.fc2.com や <%server_url> がついているテンプレートもあります。これらを削除します。

<script type="text/javascript" src="<%server_url>load.js"></script>

コードを探すときはテンプレートのHTML内を『load.js』で検索します。ほとんどのテンプレートは2箇所あります（ と  内に一つずつ）

　load.js のスクリプトを直接挟む要素があれば、それも削除します。

<dt><label for="comment">本文</label></dt> ※次の行を削除　dd～/dd <dd><script type="text/javascript" src="load.js"></script></dd> <dd><textarea id="comment" cols="50" rows="5" name="comment[body]"></textarea></dd>

　Font & Icon 、アイコンなどとスクリプトに見出しがついている場合はそれもあわせて削除します。

※ここから　dt～/dt　dd～/dd <dt><label>Font & Icon</label></dt> <dd><script type="text/javascript" src="load.js"></script></dd>※ここまで削除 <dt><label for="comment">本文</label></dt>

『太』『斜』などのボタン挿入位置を変更する

　表示したい箇所の要素に id="FinsertImg" をつけます。すると要素内にボタンが挿入されます。

<div id="FinsertImg"></div>

<dd id="FinsertImg">Font & Icon
ここに入る</dd>

<dt>Font & Icon</dt>
<dd id="FinsertImg">ここに入る</dd>

プレビューの背景色、横幅などのデザインを変更する

　プレビュー部分と実際にコメントを表示する箇所の横幅や背景色などが大きく異なっている場合は、プレビュー部分のデザインを変更します。

　プレビュー部分のマークアップは次のようになっています。

<span style="padding: 5px 0; display: block;" id="checkPreBody">
  <input type="checkbox" id="checkPreBox" value="Preview" />
  <label for="checkPreBox"> Preview </label>
  <span style="padding: 5px 0px; display: block;" id="textPreBody">
   ここにプレビューが表示される
  </span>
</span>

　使用しているテンプレートのスタイルシート欄にそれぞれのスタイルを追加します。

[例] 左下の □Preview の文字色を変更する

#checkPreBody label {
   color: #00f;
}

[例] プレビュー表示箇所の横幅などを変更する

#checkPreBody {
   width: 400px;
}
#textPreBody {
   margin: 10px 0 10px;
   padding: 10px 10px !important;
   border: 1px #ddc solid;
   background: #fffff0;
}

■表示結果

ご利用にあたって・履歴履歴

　FC2のアイコン背景画像の変形加工については、問い合わせから公式にＯＫとの回答を得ています。ただし、FC2ブログ内での利用が前提です。

動作確認(Win) : IE6-8、Firefox2-3、Opera10、Chrome4、Safari4

　Operaのリアルタイムプレビューは日本語を入力するときには機能しません。入力確定後に、「Ctrl」キーや「Delte」キー、「Enter」キーを押すとプレビューが反映されます。setintervalを使うぐらいなら、普通にプレビュー。ということなのかもしれません。また、IE5などの古いブラウザは動作の対象外です。

　Macは確認できません。keyCodeはそのままでいいのかよくわかりません。装飾（太字や絵文字などの挿入）は正常に動く。普通のプレビューは問題ないけど、リアルタイムプレビューは動かなかった。などの報告があると誰かが助かります。こちらでは確認できないため、Macだけ除外するように変更します。

　質問や不具合・要望などはコメントにお願いします。動作や表示がおかしいときは、利用しているテンプレートやブログアドレスなどの情報があると解決するかもしれません。

【利用規約】
利用は自己責任でお願いします。
改造、使用画像の別サーバへのアップロードはOKです（著作権などは放棄しておりません）。
どこかにリンクがあると、作者のやる気が向上するかもしれませんが、その因果関係についてはよくわかっておりません。
スクリプトコード内の作者表記「Author Paroday(c)～」は削除しないでください。コードを移す場合も同様です。
再配布は原則禁止です。カスタマイズ後も含みます。

【更新履歴】
2010 05-26 - 公開。

【関連項目】
Paroday - FC2ブログインフォメーション / テンプレート関連記事
2010 05-24 - コメント装飾絵文字入力スクリプトとリアルタイム選択範囲プレビュー
2010 04-03 - FC2ブログのコメント投稿完了ページから元記事に移動するユーザスクリプト

関連記事

0 0 Hatena tweet Top

comment

トラックバック

https://paro2day.blog.fc2.com/tb.php/560-60dc936d

trackback