Paroday

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

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

コメント装飾絵文字入力スクリプトとリアルタイム選択範囲プレビュー

» デモページ

FC2 COMMENT DECORATION

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

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

  • PC環境を除けば、コメントを設置しているすべてのテンプレートで使用可。
  • 常にパレットを表示可。
  • 色、画像パレットどちらか一方を表示している状態で [<||>]をクリックするとパレットが左右に移動。
  • 色、画像パレット両方を表示している状態で [<||>]をクリックすると前背面に移動。
  • 左の[P]をクリックするとプレビュー。
  • コメントの中でプレビューしたいテキストを選択（ドラッグ）した状態で、右の[P]をクリックすると、その選択範囲のみをプレビュー。コメントの文字数・絵文字などが多いときに使用。
  • Previewのボックスをチェックするとリアルタイムプレビュー。コメントの文字数・絵文字などが少ないときに使用。
  • body要素内の途中でjsファイルを読み込まないので、変なところでブログの読み込みが止まったりしない。
  • 絵文字ボタンを押さないかぎりアイコンは生成されない。また、生成は繰り返さない。

利用方法

　[A]～[C]のいずれかをhead要素内に入れると、個別ページとコメント編集ページでのみスクリプトが機能します。できるだけスクリプトは別サーバにアップロードしてご利用ください。

[A] コメント装飾とプレビューを利用する
<!--permanent_area-->
<script type="text/javascript" src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/load01.js" charset="utf-8"></script>
<!--/permanent_area--><!--edit_area-->
<script type="text/javascript" src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/load01.js" charset="utf-8"></script>
<!--/edit_area-->

</head>

　テンプレート内にあるFC2のload.jsスクリプトは削除します。削除するコードについてはFC2のload.jsを削除するをご覧ください。

[B] コメント装飾のみ利用する
<!--permanent_area-->
<script type="text/javascript" src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/load01c.js" charset="utf-8"></script>
<!--/permanent_area--><!--edit_area-->
<script type="text/javascript" src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/load01c.js" charset="utf-8"></script>
<!--/edit_area-->

　テンプレート内にあるFC2のload.jsスクリプトは削除します。

[C] プレビューのみ利用する（装飾にはFC2のload.jsを利用）
<!--permanent_area-->
<script type="text/javascript" src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/load01p.js" charset="utf-8"></script>
<!--/permanent_area--><!--edit_area-->
<script type="text/javascript" src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/load01p.js" charset="utf-8"></script>
<!--/edit_area-->

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

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

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

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

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

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

　出来上がったコードをテンプレートのHTML編集で head要素 の中に入れます。[A]を利用する場合は次のようになります。

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

　head が気に入らない場合は、 </body> の前などに入れます。

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

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

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

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

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

  • 【利用規約】
  • 利用は自己責任でお願いします。
  • 改造、使用画像の別サーバへのアップロードはOKです（著作権などは放棄しておりません）。
  • どこかにリンクがあると、作者のやる気が向上するかもしれませんが、その因果関係についてはよくわかっておりません。
  • スクリプトコード内の作者表記「Author Paroday(c)～」は削除しないでください。コードを移す場合も同様です。
  • 再配布は原則禁止です。カスタマイズ後も含みます。
  • 【更新履歴】
  • 2010 05-24 - 公開。日付変更点。確認OSブラウザのみ実行が無難七日。FC2共有テンプレートに素材として組み込む再配布（例外）について追記予定。
関連記事
  1. comment

コメント

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

トラックバック

https://paro2day.blog.fc2.com/tb.php/558-18700e68

  1. trackback