Seesaaでは、記事には絵文字
が使えますが
コメント欄でも使えるようにカスタマイズしてみました。
お世話になったのは
stroll::blogさんの
コメントにカスタマイズ絵文字入力機能です。
ただし、コメント確認画面で、どうしても不具合があったので
コメント確認を削除してしまいました。
それでもよければ使ってみてください。
まず、当然ながら絵文字画像が必要になります。
私はstroll::blogさんでもおすすめしていた
SWEETSさんの素材をお借りしました。
画像をアップしたら、画像設定スクリプトの編集をします。
はじめはstroll:blogさんのまま使ってみたのすが
この画像は11Ｘ11と小さくて、間がないと非常に見づらかったので
間を空けるために少し書き換えてあります。
（
青字部分が書き換え箇所です）
その設定でよければ、
以下の画像設定スクリプトをコピーしてメモ帳に貼り付けて
赤字部分を編集します。
list[list.length] = new Array('画像名', '画像URL');
は画像の数だけ増やして下さい。（これが結構大変です
）
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length] = new Array('画像の名前', '画像URL');
list[list.length] = new Array('画像の名前', '画像URL');
list[list.length] = new Array('画像の名前', '画像URL');
return list;
}
function getCustmizeEmojiAttribute() {
// 画像タグに含める属性値（alt属性以外）
var att = 'border="0" style="vertical-align:middle" hspace="2" vspace="2"';
// ***************** 設定ここまで *****************
att = (att != '') ? (' ' + att) : '';
return att;
}
// -->
</script>
では、編集したらそれをコピーして
デザイン→HTMLを開いて
今までHTMLを編集したことのない方はHTMLの追加をクリックして
HTML名をつけ、その画面を編集します。
</head>
を探して、その前に、先ほどの画像設定スクリプトを貼り付けます。
HTMLの編集はここまでなので、これを保存して
この新しいHTMLを適用させます。
続いてデザイン→コンテンツ→記事HTML編集画面を開いて
ここに画像リスト出力スクリプトと画像変換スクリプトを記述します。
まず、画像リスト出力スクリプトですが
stroll::blogさんのものをSeesaa用に書き換えた以下のものをコピーしてください。
（
青字部分が書き換えた箇所です）
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.article_child__body';
// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
for (var i = 0; i < list.length; i++) {
window.document.write('<a href="javascript:;" onClick="addCustmizeEmoji(' + textarea + ', \'' + list[i][0] + '\');"><img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" /></a>');
}
}
// reference from jugem.jp (c)
function addCustmizeEmoji(obj, tag) {
var item = '[' + tag + ']';
if (document.selection) {
obj.focus();
sel = document.selection.createRange();
sel.text = item;
} else if (obj.selectionStart || obj.selectionStart == '0') {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ item + obj.value.substring(endPos, obj.value.length);
} else {
obj.value += item;
}
}
writeCustmizeEmojiTagList();
// -->
</script>
これを絵文字を表示したい部分に貼り付けるのですが
私の場合は、コメントテキストエリアの上に表示したかったので
<textarea name="article_child__body" rows="10" cols="50">
の上に貼り付けました。
それで、コメントテキストエリアはスタイルシートで見ると350pxだったので
その上にきれいに収まるように
この画像出力スクリプトを
<div style="width:350px;"></div>
で囲んで
３列きれいに並ぶように絵文字の数を調節してみました。
pxの値はスタイルシートによって違うかもしれないので
自分の環境に合わせて変えてください。
それから
<form action="/pages/user/comments2/regist/input" method="post">
を探して、これを
<form name="comform"
action="/pages/user/comments2/regist/input" method="post">
と書き換えます。
続いて画像変換スクリプトですが
これもSeesaa用に書き換えた以下のものをコピーしてください。
（
青字部分が書き換えた箇所です）
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'comments';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comments-body';
// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (commentAreaIdName != '') {
objComArea = document.getElementById(commentAreaIdName);
if (!objComArea || !objComArea.innerHTML) return;
classComArea = objComArea.getElementsByTagName(commentAreaTag);
} else {
classComArea = document.getElementsByTagName('*');
}
for (var i = 0; i < classComArea.length; i++) {
if (classComArea[i].className == commentBodyClassName) objComBody[objComBody.length] = classComArea[i];
}
for (var i = 0; i < objComBody.length; i++) {
objComBody[i].innerHTML = getStringCustmizeEmojiTag(list, objComBody[i].innerHTML, att);
}
}
function getStringCustmizeEmojiTag(list, s, att) {
for (var i = 0; i < list.length; i++) {
s = s.split('[' + list[i][0] + ']').join('<img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" />');
}
return s;
}
changeCustmizeEmojiTag();
// -->
</script>
これを
</form>
</div>
<% /if -%>
<% if:page_name eq 'search' -%>
の前に貼り付けます。
以上で保存して記事ページを再構築すれば完了です。
【追記】
以前の記事では、HTMLにも3つのスクリプトを記述して
確認画面の不具合があったので、確認部分を削除すると書きましたが
HTML部分には
画像設定スクリプトのみを記述して
記事HTMLに
画像リスト出力スクリプトと
画像変換スクリプトを記述すれば、確認画面の不具合は出ませんでした。
ただし、確認画面では絵文字ではなくタグなんですけど・・・
BlogPet
を使えばスライドショーとしても利用できます
こんな感じ
こんなマークがついているんですよ。
というフリーソフトを使っているのですが
https://blog.seesaa.jp/img/bg/sakura/title.gifというアイコンが
at 08:20
|
