こそっとゴルフ・パンヤ

[BLOGいじり]カスタマイズの記事

[04/30]　記事やコメントにパンヤ絵文字を使う方法
[04/25]　コメント投稿者のURL、メールアドレスの空リンク対策
[04/25]　BLOG内検索の強調表示
[04/22]　JavaScriptの追加を簡単にする
[04/22]　コメントプレビュー機能追加について

記事やコメントにパンヤ絵文字を使う方法

2006年04月30日 (日)

定期的にこのBLOGに来て頂いている方は、
なんでいまさらこの記事？とお思いかとも思いますが、
以前からメールでパンヤ絵文字を使う方法のお問い合わせを頂いていました。
その際、ぱにゃりすさんをご紹介していたのですが、
共有テンプレートを公開してからまた増えてきたので、このBLOGでもカスタマイズ方法を紹介したいと思います。

別ページにまとめましたので、参考になさって下さい。

記事やコメントにパンヤ絵文字を使う方法

不具合がありましたら、ご指摘お願いいたします。

2006.05.01 画像リスト出力スクリプトの一部に不具合があったものを修正。
2006.05.01 画像定義スクリプトのimgタグをHTML4.01用に修正。

※この記事が参考になりましたら、トラックバック頂けると幸いです。

07:19

[BLOGいじり]カスタマイズ

(2)

(10)

COMMENT

こんにちわー by 栗田栗男

　こんにちわー　栗田です。うっすさん　もう手順サイトできたんですか？[びっくり]さっそく　これから取り掛かりたいと思います。うまく設置したときはご報告にきまーす。ダッシュ!((( 三( -_-)

>栗田栗男さん by Tigerうっす

栗田さん、ごめんなさい＞＜
スクリプトの一部に不具合がありました(;´д｀)トホホ
たぶんコメント絵文字ができなかったんじゃないかなと思います。
公開内容を修正しておきましたので、よろしくお願いいたします。[ぺこ]

できました～！！ by 栗田栗男

　うっすさん　アニ画像ができましたー
　これも　うっすさんのおかげです[ぺこあにめ]
　本当にありがとうございましたー[ういんくあにめ]

>栗田さん by Tigerうっす

(ノ゜ω゜)ノ*.オオォォォォォォォー
うまくいきましたか！
よかったです＾＾
これで、クラブメンバーの方に楽しくコメントしていただけますね＾＾

ありがとうございます by ひさちん＠

初めまして。
記事を参考にし、お陰様で何とかスクリプト導入自体はできました[わら]
ただ…なぜかコメント記入欄の「上部」にしか表示することができません[かなし]
設置場所は間違えてないと思うのですが、色々試してもここにしか表示できず。。。どこか自分が間違えてるんでしょうけど。。。まあ「使えればいいや」ってことで諦めました[ひょえ]
あと、sleipnirでは記事の絵文字に関するスクリプトが動きませんでしたので諦めました。まだブログサイト構築途中なので、完成したらトラックバックさせていただきます[ぺこ]

追記 by ひさ＠管理人

追記：sleipnirでもできました[はず]

うっすさんご不在なので・・ by 新條ぴかる

うっすさんいつ復活されるか待ってる有人Ａですｗ

ひささん＞
絵文字がコメント欄の上に出ている件で^^
コメント内容記入欄の上か下かに入れる場合は
<td>
<textarea id="comment" cols="45" rows="10" name="comment[body]"></textarea></td>
↑の部分で言いますと
上に入れたい場合は
<td>
ここに画像出力スクリプト
<BR>
<textarea id="comment" cols="45" rows="10" name="comment[body]"></textarea></td>

下に入れたい場合は
<td>
<textarea id="comment" cols="45" rows="10" name="comment[body]"></textarea>
<BR>
ここに画像出力スクリプト
</td>

で、表示されるかと思います^^
これで試して駄目だったらごめんなさい＞＜
テーブルタグでくくられているテンプレートでしたので<TD>～</TD>の中で良いかと思います^^

試しました by ひさちん＠

↑↑は「ひさ＠管理人」ではなく「ひさちん＠」です＾＾；　当然クッキーの訂正忘れです( ﾟ∀ﾟ)･∵. ｶﾞﾊｯ!!
で、ぴかるさん、アドバイスありがとうございました。
やってみたところ、下には移動できたのですが、絵文字が折り返さずフォーマットが崩れるという自体に[わーん]
でもおかげ様で原因は特定できたっぽいです。当面は、無事動いてるということで、上において、もっとhtmlを覚えたときに移動にチャレンジします。

あ・・・ごめんなさい(;´▽｀A`` by 花ちゃ

トラックバックさせてもらいました。
とっても参考になりました。
まだコメント部分がうまくできてないのですが(;´▽｀A``
idっていうのが見つからなくて・・・。
皆さんが動く方をカスタマイズしている時期だというのに申し訳ないです[わーんあにめ]

教えて君でごめんなさい by J.J.J.J.

　初めまして、うっすさん。
FC2 Blogでパンヤブログを開設しているJ.J.J.J.といいます。
当サイトでも、パンヤ絵文字を使用したくて色々探してこちらにたどり着きました。

別ページを参考にして導入準備してましたが、「２．記事内でパンヤ絵文字を使う」の（３）の②で作業が止まってしまいます。
（２）で書かれている"stroll::biog様"のサイトに書かれているコメント等を見ても上手くいきません。

パンヤ絵文字も画像定義スクリプトもアップロードは終わっています。

何が悪いのか判りません、どうかご教授下さい。
宜しくお願いします。[ぺこあにめ]

コメントを閉じる▲

コメント投稿者のURL、メールアドレスの空リンク対策

2006年04月25日 (火)

カスタマイズ * ブログ

数日前から、コメント入力欄へのリンクやコメントステータスをアイコン化したわけですが、
コメント投稿者がURLやメールアドレスを入力しなくても空リンクができてしまい、
クリックすると空ページが開いてしまいす。
そこで、URLやメールアドレスが入力されなかった場合は、アイコンを表示させないようにしてみました。

URL表示に<%comment_url+str>タグを使用している場合も、
URLが入力されなかった場合、「URL」と空リンクができてしまうので、
この方法は有効かなと。

Open↓

02:07

[BLOGいじり]カスタマイズ

(0)

BLOG内検索の強調表示

2006年04月25日 (火)

カスタマイズ * ブログ

以前、Nucleusを使用してBLOGを構築していたとき、
BLOG内検索を行うと、検索結果ページで検索語がマーカーされていました。

FC2でもできないものかと探していたら、
FCafeさんで記事(￣ー『＋』)発見!!
検索語強調
さっそくやってみました。

Open↓

02:07

[BLOGいじり]カスタマイズ

(0)

JavaScriptの追加を簡単にする

2006年04月22日 (土)

カスタマイズ * ブログ

ブログにJavaScriptを追加してカスタマイズする時に、
よく「このJavaScriptは<head>～</head>内に置いて下さい」って注意書きがありますよね。
そんなスクリプトを追加する時に、簡単に追加する方法です。
テンプレを変える時にも、簡単なカスタマイズで済みます。
少々荒業ですが( ﾟ∀ﾟ)･∵. ﾌﾞﾞﾊｯ!

Open↓

プラグインカテゴリーは１～３までありますが、
2カラムテンプレ、3カラムテンプレいずれにしても、
ほとんどの場合、１～２でこと足りるんじゃないかなと思っています。
そんな空いているプラグインカテゴリー３を使う方法です。
既にカテゴリー３にプラグインを追加していたら、
１か２に移動して置いて下さい。

１．テンプレートの<head>～</head>内に、以下の記述を行う。

<%plugin_third_content>

２．テンプレ内のプラグイン３を定義している部分を削除。
こんな感じで書かれていると思いますので、削除します。

<div class="box">
<div class="menu_cont">
<h3><%plugin_third_title></h3>
<div class="menubody">
<%plugin_third_description>
<div class="plugin_content">
<%plugin_third_content>
</div>
<%plugin_third_description2>
</div>
</div>
</div>

３．プラグインカテゴリー３の編集
「プラグインの設定」でプラグインカテゴリー３にフリーエリアを追加します。
フリーエリアの名前は、スクリプトの機能が分かりやすい名前を付けておくとよいでしょう。
追加したら、フリーエリアの設定の変更でHTML編集を行います。
入力エリアには既に、下記の記述がされていると思いますが、全て削除します。

<p class="plugin-freearea" &align>
&freearea
</p>

削除したら、そこにscriptを記述します。

これで、OK。
最初のテンプレカスタマイズ時にはあまり恩恵を受けないかもしれませんが、
スクリプトの追加、テンプレ乗せ換えの時は、最小限のカスタマイズで済み簡単になると思うんですが、どうでしょ。
スクリプトを外部ファイルにしている方には、余計なことかｗ

※この記事が参考になったら、トラックバックして頂けたら幸いです。

Close↑

06:16

[BLOGいじり]カスタマイズ

(0)

(1)

コメントプレビュー機能追加について

2006年04月22日 (土)

カスタマイズ * ブログ

昨日書いた「コメントにプレビュー機能をつける」ですが、
参考サイトの記事は一部JUGEM用に書かれているので、テンプレを見慣れていないと、
少々戸惑うかもしれません。
よく分からなかった方もいらっしゃるようなので、FC2用に覚書をしておきます。

コメントプレビューのチェックボックス付きのカスタマイズ方法にしますので、
ご了承ください。

Open↓

１．まずコメント本文を入力するtextareaタグをテンプレから探します。
ほとんどのテンプレは<--/comment-->の下あたりに配置されていると思います。
このテンプレの場合は、下記の赤字部分です。

・
　・
　・
<h4 id="comment_post">COMMENT POST</h4>
<div class="entry_text" align="left">
<form method="post" action="./" name="comment_form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<label for="subject">題名:</label><br />
<input id="subject" type="text" name="comment[title]" size="40" /><br />
<label for="name">名前:</label><br />
<input id="name" type="text" name="comment[name]" size="40" value="<%cookie_name>" /><br />
<label for="mail">Mail:</label><br />
<input id="mail" type="text" name="comment[mail]" size="60" value="" /><br />
<label for="url">Url:</label><br />
<input id="url" type="text" name="comment[url]" size="60" value="<%cookie_url>" /><br />
<label for="comment">Comment:</label><br />
<script type="text/javascript" src="http://blog36.fc2.com/load.js"></script>
<textarea id="comment" cols="50" rows="8" name="comment[body]"></textarea><br />
<div style="color:red;">パンヤ絵文字入力の際、全角括弧”(にこ)など”で入力してもOKです。</div>
<div id="pangya_emojilist">

<script src="http://blog36.fc2.com/t/tigerwoos/file/pangya_emoji_comennt_listshow.js" type="text/javascript"></script>

</div>
<br />
<label for="comment_preview" id="com_preview_label">Comment Preview:</label><br />
<div class="comment_body" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div>
<label for="pass">Pass:</label><br />
<input id="pass" type="password" name="comment[pass]" size="20" /><br />
<label for="himitu">Secret:</label><br />
<input id="himitu" type="checkbox" name="comment[himitu]" />管理者にだけ表示<br /><br />
<input type="submit" value="送信する" />
</form>

２．このtextareaタグに、以下赤字の様にスクリプトを追加します。

<textarea id="comment" cols="50" rows="8" name="comment[body]" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea>

３・コメントプレビューを表示したい場所に、下記のHTMLタグを追加します。

<label for="comment_preview">comment preview:</label><br />
<div class="comment_body" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div><br />

σ(・_・)は、パスワードを入力するエリアの上に付けてみました。
緑字のクラス属性は、～の中にある<%comment_body>変数を囲っているdivタグで指定されているclass属性を指定します。
このテンプレの場合は、

～
<div class="comment_body"><%comment_body></div>
～

こうなっているので、”comment_body”を指定します。
これは、表示の体裁をコメント表示に会わせるための指定なので、
無かったらclass="～”は無くてもいいかもしれません。

４．コメントプレビューするか否かのチェックボックスの追加
チェックボックスを設置したい場所に、以下のスクリプトを追加。
・デフォルトでプレビューを行わない場合

<input type="checkbox" name="checkboxCommentPreview" value="" onClick="changeCommentPreview()" /> コメントをプレビューする？

・デフォルトでプレビューを行う場合

<input type="checkbox" name="checkboxCommentPreview" value="" onClick="changeCommentPreview()" checked /> コメントをプレビューする？

σ(・_・)は、コメント入力エリアの上、絵文字入力ボタンの横に設置してみました。

<script type="text/javascript" src="http://blog36.fc2.com/load.js"></script><input type="checkbox" name="checkboxCommentPreview" value="" onclick="changeCommentPreview()" /> コメントをプレビューする？<br />

５．最後に以下のスクリプトをの直前に置く。

<script type="text/javascript">

</script>

青文字の部分は、２のtextareaタグで指定されているid属性を、
紫文字の部分は、３で追加したプレビューを表示するタグのid属性を、
太文字の部分は、コメントプレビュースクリプトが実行できる場合に、コメントプレビュー欄にデフォルト表示する文字または、画像タグ。

σ(・_・)は、このスクリプトは外部ファイルにしました。

で、出来上がったHTMLがこちら。赤字部分が追加したところです。

・
・
・


<script src="http://blog36.fc2.com/t/tigerwoos/file/pangya_emoji_input_img_chenge1.js" type="text/javascript"></script>

</div>

<h4 id="comment_post">COMMENT POST</h4>
<div class="entry_text" align="left">
<form method="post" action="./" name="comment_form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<label for="subject">題名:</label><br />
<input id="subject" type="text" name="comment[title]" size="40" /><br />
<label for="name">名前:</label><br />
<input id="name" type="text" name="comment[name]" size="40" value="<%cookie_name>" /><br />
<label for="mail">Mail:</label><br />
<input id="mail" type="text" name="comment[mail]" size="60" value="" /><br />
<label for="url">Url:</label><br />
<input id="url" type="text" name="comment[url]" size="60" value="<%cookie_url>" /><br />
<label for="comment">Comment:</label><br />
<script type="text/javascript" src="http://blog36.fc2.com/load.js"></script>
<input type="checkbox" name="checkboxCommentPreview" value="" onclick="changeCommentPreview()" /> コメントをプレビューする？<br />
<textarea id="comment" cols="50" rows="8" name="comment[body]" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea><br />
<div style="color:red;">パンヤ絵文字入力の際、全角括弧”(にこ)など”で入力してもOKです。</div>
<div id="pangya_emojilist">

<script src="http://blog36.fc2.com/t/tigerwoos/file/pangya_emoji_comennt_listshow.js" type="text/javascript"></script>

</div>
<br />
<label for="comment_preview" id="com_preview_label">Comment Preview:</label><br />
<div class="comment_body" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div>
<label for="pass">Pass:</label><br />
<input id="pass" type="password" name="comment[pass]" size="20" /><br />
<label for="himitu">Secret:</label><br />
<input id="himitu" type="checkbox" name="comment[himitu]" />管理者にだけ表示<br /><br />
<input type="submit" value="送信する" />
</form>
</div>
</div>
</div>

<script type="text/javascript" src="http://blog36.fc2.com/t/tigerwoos/file/comment_preview.js"></script>