Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

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

FC2 COMMENT DECORATION2


FC2 COMMENT DECORATION2

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

 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="http://blog-imgs-44.fc2.com/p/a/r/paro2day/load02.js" charset="utf-8"></script>
<!--/permanent_area--><!--edit_area-->
<script type="text/javascript" src="http://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="http://blog-imgs-44.fc2.com/p/a/r/paro2day/load02c.js" charset="utf-8"></script>
<!--/permanent_area--><!--edit_area-->
<script type="text/javascript" src="http://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'
]

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

addcolor

 初期値は 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
絵文字: v-276~545
 V2
絵文字: i-1~282
 I
絵文字: e-1~260
 E
絵文字: e-261~518
 E2

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

 使用するコードのみを保存します。保存が終わったらファイルをアップロードします。アップロードが完了したら、ファイルのアドレスを先のコードの中に入れます。<!--edit_area--> の 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箇所あります( <!--comment_area--><!--edit_area--> 内に一つずつ)

 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のアイコン背景画像の変形加工については、問い合わせから公式にOKとの回答を得ています。ただし、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 - 公開。
関連記事
  1. comment

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

http://paro2day.blog122.fc2.com/tb.php/560-60dc936d

  1. trackback