パンヤをやっているであります。へたっぴぃでのろまなカエルであります。時間切れもたまにあるであります。
スポンサーサイト
--年--月--日 (--) | 編集 |
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
開店休業中
2009年08月17日 (月) | 編集 |
パンヤメインでやっていて、Starblogができたので、あっちをメインに活動しようかと思ってます。

ひろぴーけろっとぱんや~であります2

Ads by Googleがでたので、カキコw
スポンサーサイト
最新記事の絵文字変換
2009年06月15日 (月) | 編集 |
記事タイトルに絵文字を使った場合、「最新記事」のところも絵文字変換したいですね(ん)

↓の「パンヤ絵文字のプラグイン変換スクリプト」をダウンロードして、自分の処へアップロードする。
(でんち)pangya_emoji_plugin_henkan.js

「プラグインの設定」の「最新記事」の「詳細」画面を出します。(ぐらさん)
そこで、「プラグインの改造」のところにある、「 【HTMLの編集】を行います。(上級者向け)」のリンクをクリックします。 (ぐらさん)

もとは、こんな感じになっていると思います。
<ul>
 <!--recent-->
  <li &align>
   <a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
  </li>
 <!--/recent-->
</ul>


そこに、下の赤字の文字を追加します。水色の文字のところは、自分の処のに変えてね
<div id="plugin_area">
<ul>
 <!--recent-->
  <li &align>
   <a href="<%recent_link>" title="<%recent_title>"><div class="plugin"><%recent_title> (<%recent_month>/<%recent_day>)</div></a>
  </li>
 <!--/recent-->
</ul>
</div>
<!-- パンヤ絵文字のプラグイン変換スクリプト -->
<script type="text/javascript" src="http://blog-imgs-19.fc2.com/h/i/r/hiropkero/pangya_emoji_plugin_henkan.js"></script>



[設定]ボタンを押して完了で~す(にこ)(爆竹)

お疲れ様でした(ぺこ)
何かあったらコメントしてね~(気まずい)
コメントプレビューを使おう
2009年01月24日 (土) | 編集 |
コメントのプレビュー機能を付けたいと思い、先人のお知恵を拝借(気まずい)

【参考記事】
るんばば」さん:コメントにプレビューの機能をつけたい!
こそっとゴルフ・パンヤ」さん:コメントにプレビュー機能を付けてみるコメントプレビュー機能追加について
FCafe」さん:コメントのプレビュー
stroll::blog」さん:コメントをプレビュー表示コメントプレビューを必要なときだけ実行するには?
感謝(ぺこ)感謝(ぺこ)

1.「プレビュー位置」の設定
まず、「パンヤ絵文字を使おう」の「4.「パンヤ絵文字のコメント・画像リスト出力スクリプト」の設置」で、スクリプトを追加した textarea を探します。2カ所ね(ういんく)
今回はσ( ̄。 ̄) オイラのスクリプトを例に、
<textarea id="comment" cols="88" rows="10" name="comment[body]" tabindex="4"></textarea>

<textarea なんたらかんたら> の > の前に、↓の赤字の文字を追加します。

<textarea id="comment" cols="88" rows="10" name="comment[body]" tabindex="4" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea>

次は、前回挿入した「パンヤ絵文字のコメント・画像リスト出力スクリプト」呼び出し設定の下に、↓の赤字の文字を追加します。
<div style="color:red;">パンヤ絵文字入力の際、全角括弧”(にこ)など”で入力してもOKです。</div>
<!-- パンヤ絵文字のコメント・画像リスト出力スクリプト -->
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/h/i/r/hiropkero
/pangya_emoji_comment_edit_gazou.js"></script>
<br />
<label for="comment_preview">プレビュー:</label>
<p><div id="comment_preview">ここにコメントのプレビューが表示されます</div></p>

</dd>

できたかな?
2カ所だよ忘れないでね~(いかり)

2.「パンヤ絵文字のコメントプレビュースクリプト」の設置
↓の「パンヤ絵文字のコメントプレビュースクリプト」をダウンロードして、自分の処へアップロードする。
(でんち)pangya_emoji_comment_preview.js

コメントのプレビュー表示されるように <!--/comment_area--> と <!--/edit_area--> のすぐ下にコメントプレビュースクリプトの呼び出し設定を入れます。

<!--/comment_area-->

<!-- パンヤ絵文字のコメントプレビュースクリプト -->
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/h/i/r/hiropkero
/pangya_emoji_comment_preview.js"></script>


<!--/edit_area-->

<!-- パンヤ絵文字のコメントプレビュースクリプト -->
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/h/i/r/hiropkero
/pangya_emoji_comment_preview.js"></script>


水色太字のところは自分のところに変えてね
σ( ̄。 ̄) オイラのところを呼び出しても動くと思います(気まずい)


パンヤ絵文字を使おう
2009年01月18日 (日) | 編集 |
FC2でパンヤ絵文字を使えるようにする方法は、だいぶ前にいろいろな方が実装されてますね(気まずい)

新参者なので、備忘録を兼ねて、、、、カンタン設定方法をブロ友へ公開するために書いておきます(気まずい)

参考記事:
Tigerうっす さん : 「記事やコメントにパンヤ絵文字を使う方法
ぱにゃりすさん :  「FC2ブログをパンヤ仕様に(その2)」、「FC2ブログをパンヤ仕様に(その4)」、「FC2ブログをパンヤ仕様に(その5)
感謝(ぺこ)感謝(ぺこ)

やること

テンプレート設定画面で、テンプレートを編集します。
ミスったときのことを考えて、複製しておきましょう(ひょえ)
σ( ̄。 ̄) オイラのとこのスクリプトを動かしてもいいんだが、カスタマイズが多少あったり、自分で拡張できるように、自分のブログにスクリプトを置くようにしましょうね。

ダウンロードしたスクリプトは、「ファイルアップロード」を使って、アップロードします。

1.「パンヤ絵文字のコメント・画像設定スクリプト」の設置

↓の「パンヤ絵文字のコメント・画像設定スクリプト 」をダウンロードして、自分の処へアップロードする。
(でんち)pangya_emoji_settei.js

画像ファイルは、σ( ̄。 ̄) オイラのあるWebサーバを参照するようになってます。
ファイルアップロードで、自分の処にアップしたファイルを使うこともできます。慣れたら、独自アイコンを追加したらいいと思う(ん)
※初めは、200個近くのファイルを、ファイルアップロードでアップしました。今も残ってます(ひょえ)
ブロ友みんなで、同じことするのは大変だぁ(しょぼ)と思って、画像は1カ所にしようと、この方式にしました。

大体テンプレートの場合、先頭から
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

 :

<!--nextentry--><link rel="next" href="<%nextentry_url>" title="<%nextentry_title>" /><!--/nextentry-->

</head>
<body>

となっていますので、
</head> 行の直前に、スクリプト呼び出し設定を入れます。(赤字

<!--nextentry--><link rel="next" href="<%nextentry_url>" title="<%nextentry_title>" /><!--/nextentry-->

<!-- パンヤ絵文字のコメント・画像設定スクリプト -->
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/h/i/r/hiropkero/pangya_emoji_settei.js"></script>


</head>
<body>

水色太字のところは、自分の処のに変えてね

2.「パンヤ絵文字の記事・画像変換スクリプト」の設置
①↓の「パンヤ絵文字の記事・画像変換スクリプト」をダウンロードします。すぐにアップロードはしないでね。
(でんち)pangya_emoji_kiji_henkan.js

②テンプレートを修正します。記事に絵文字が表示・変換されるように <!--/topentry--> のすぐ下に画像変換スクリプトの呼び出し設定を入れます。

③ <!--topentry--> の前に <div id="topentry_area"> を追記して画像変換スクリプトの最後にある</script>の下に</div>を追記します。
※テンプレートによっては、不要な場合もあります。

④<!--topentry-->の下に<div class="entry">が無ければこれも追記します。
※テンプレによってあったりなかったりします。
"entry" は別の文字でも良いですが、<!--topentry-->~<!--/topentry-->の中を囲むclass属性があればそれで(ぐっど)です。

⑤「パンヤ絵文字の記事・画像変換スクリプト」の【// 記事にカスタマイズ絵文字入力機能:画像変換】の下にある(1)と(3)をそれぞれ書き換えます。

(あくま)鬼さん のテンプレートの場合
<!--▼エントリーここから▼-->
<!--topentry-->
<div class="entry_block">
<div class="entry_top">
<!--▼エントリー日付ここから▼-->




</div><div class="entry_bottom"></div>

</div>
<!--/topentry-->
<!--/エントリー囲みここまで-->

となっていますので、
②、③を実施します。(赤字
④は、<div class="entry_block"> なので、 entry_block のままで(ぐっど)です。

<div id="topentry_area">
<!--▼エントリーここから▼-->
<!--topentry-->
<div class="entry_block">
<div class="entry_top">
<!--▼エントリー日付ここから▼-->




</div><div class="entry_bottom"></div>

</div>
<!--/topentry-->
<!--/エントリー囲みここまで-->
<!-- パンヤ絵文字の記事・画像変換スクリプト -->
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/h/i/r/hiropkero/pangya_emoji_kiji_henkan.js"></script>
</div>


水色太字のところは、自分の処のに変えてね

⑤は、(1)は topentry_area 、(3)は entry_block とします。(赤字
「パンヤ絵文字の記事・画像変換スクリプト」の内容(一部)
// 記事にカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)記事全体のタグの id 属性
var commentAreaIdName = 'topentry_area';
// (2)記事全体のタグ名
var commentAreaTag = 'div';
// (3)各記事の class 属性
var commentBodyClassName = 'entry_block';

変更した、pangya_emoji_kiji_henkan.js をアップロードします。

3.「パンヤ絵文字のコメント・画像変換スクリプト」の設置
疲れたかにゃ?(ひょえ)
やることは、2と似ていますので、要領は掴んでいますね?

①↓の「パンヤ絵文字のコメント・画像変換スクリプト」をダウンロードします。すぐにアップロードはしないでね。
(でんち)pangya_emoji_comment_henkan.js

②テンプレートを修正します。コメントに絵文字が表示・変換されるように <!--/comment--> のすぐ下に画像変換スクリプトの呼び出し設定を入れます。

③ <!--comment--> の前に <div id="comment_area"> を追記して画像変換スクリプトの最後にある</script>の下に</div>を追記します。

④<!--comment-->の下に<div class="comment_body">が無ければこれも追記します。
※テンプレによってあったりなかったりします。
"comment_body" は別の文字でも良いですが、<!--comment-->~<!--/comment-->の中を囲むclass属性があればそれで(ぐっど)です。
※また、コメント本体だけか、コメントしてくれた人の名前も変換対象にするかで、ちょっと変わってきます。

⑤「パンヤ絵文字のコメント・画像変換スクリプト」の【// コメントにカスタマイズ絵文字入力機能:画像変換】の下にある(1)と(3)をそれぞれ書き換えます。

(あくま)鬼さんのテンプレートの場合
<div class="entry_naka">
<!--comment-->
<p class="ct_title"><a id="comment<%comment_no>" name="comment<%comment_no>"></a><%comment_title></p>
<div class="comment_body"><%comment_body></div>
<div class="comment_date">
<%comment_mail+name> | <%comment_year>年<%comment_month>月<%comment_day>日(<%comment_wayoubi>) <%comment_hour>:<%comment_minute> | <%comment_url+str> | <a href="<%comment_edit_link>">コメント編集</a>
</div>
<!--/comment-->
<!--/コメント表示ここまで-->

②、③を実施。(赤字
④は、<div class="comment_body">があったので、これを使うのもいいのですが、(あくま)鬼さんのようにコメントしてくれた人の名前なども変換したいので、新しい <div class="mainCommentBody"></div>を追加します。(赤太字

<div class="entry_naka">
<div id="comment_area">
<!--comment-->
<div class="mainCommentBody">
<p class="ct_title"><a id="comment<%comment_no>" name="comment<%comment_no>"></a><%comment_title></p>
<div class="comment_body"><%comment_body></div>
<div class="comment_date">
<%comment_mail+name> | <%comment_year>年<%comment_month>月<%comment_day>日(<%comment_wayoubi>) <%comment_hour>:<%comment_minute> | <%comment_url+str> | <a href="<%comment_edit_link>">コメント編集</a>
</div>
</div>
<!--/comment-->
<!--/コメント表示ここまで-->
<!-- パンヤ絵文字のコメント・画像変換スクリプト -->
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/h/i/r/hiropkero/pangya_emoji_comment_henkan.js"></script>
</div>


水色太字のところは、自分の処のに変えてね

⑤は、(1)は comment_area 、(3)は mainCommentBody とします。(赤字
「パンヤ絵文字の記事・画像変換スクリプト」の内容(一部)
function changeCustmizeEmojiTag() {
// (1)コメント全体のタグの id 属性
var commentAreaIdName = 'comment_area';
// (2)コメント全体のタグ名
var commentAreaTag = 'div';
// (3)各コメントの class 属性
var commentBodyClassName = 'mainCommentBody';

変更した、pangya_emoji_comment_henkan.js をアップロードします。

4.「パンヤ絵文字のコメント・画像リスト出力スクリプト」の設置
↓の「パンヤ絵文字のコメント・画像リスト出力スクリプト」をダウンロードして、自分の処へアップロードする。
(でんち)pangya_emoji_comment_edit_gazou.js

コメント入力エリア、コメント編集エリアに、絵文字リストを追加します。

comment_form を探しましょう。2カ所あります。
1つめは、コメント入力エリア、もう一つはコメント編集エリアです。
そこの下の方の、 comment[body] 、 edit[body] がある、<textarea>~</textarea>の後ろに、「パンヤ絵文字のコメント・画像リスト出力スクリプト」の呼び出しを入れます。
1行前のFC2の絵文字などのスクリプト呼び出しと <dd>~</dd>で整形されていることがあります。(下記黄緑太字)そんな場合は、整形を壊さないように、</textarea>と</dd>の間に挿入します。

(あくま)鬼さんのテンプレートでは
<!--▼コメント投稿ここから-->
<!--▼ナビタイトルここから▼-->
<p class="entry_title">コメントを投稿する</p>
<!--/ナビタイトルここまで-->
<!--▼コメント中味用囲みここから-->
<div class="comment_body">
<!--▼フォームここから▼-->
<form method="post" action="./" name="comment_form">
<dl>
<dt>
<input type="hidden" name="mode" value="regist">



<dt><label for="comment">Comment</label></dt>
<dd><script type="text/javascript" src="http://blog87.fc2.com/load.js"></script><br>
<textarea id="comment" name="comment[body]" cols="53" rows="9"></textarea></dd>
<dt><label for="pass">Pass(編集・削除するのに必要)</label></dt>



<p class="form-btn"><input type="submit" value="送信"></p>
</form>
<!--/フォームここまで-->




<!--▼コメント編集エリアここから-->
<!--edit_area-->

<!--▼囲みここから▼-->
<div class="entry_block">
<div class="entry_top"></div>
<div class="entry_naka">
<!--▼ナビタイトルここから▼-->
<p class="entry_title">コメントを編集する</p>
<!--/ナビタイトルここまで-->
<!--▼コメント中味用囲みここから-->
<div compact="compact" class="comment_body">

<!--▼フォームここから▼-->
<form method="post" action="./" name="comment_form">
<dl>
<dt>
<input type="hidden" name="mode" value="edit">



<dd><script type="text/javascript" src="http://blog87.fc2.com/load.js"></script><br>
<textarea id="comment" name="edit[body]" cols="53" rows="9"><%edit_body></textarea></dd>

こうなっていましたので、整形を壊さないように、</textarea>と</dd>の間に挿入します。(赤字

<dd><script type="text/javascript" src="http://blog87.fc2.com/load.js"></script><br>
<textarea id="comment" name="comment[body]" cols="53" rows="9"></textarea>
<!-- パンヤ絵文字のコメント・画像リスト出力スクリプト -->
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/h/i/r/hiropkero/pangya_emoji_comment_edit_gazou.js">
</script>

</dd>


<dd><script type="text/javascript" src="http://blog87.fc2.com/load.js"></script><br>
<textarea id="comment" name="edit[body]" cols="53" rows="9"><%edit_body></textarea>
<!-- パンヤ絵文字のコメント・画像リスト出力スクリプト -->
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/h/i/r/hiropkero/pangya_emoji_comment_edit_gazou.js">
</script>

</dd>

水色太字のところは、自分の処のに変えてね

これで完了で~す(にこ)(爆竹)

お疲れ様でした(ぺこ)
何かあったらコメントしてね~(気まずい)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。