freoで絵文字を使うには | freoカスタマイズ集

エントリー

freoで絵文字を使うには

  • カテゴリーTinyMCE3
  1. js/admin.js の87行目以降のうち赤字部分を追加してアップします。
    //TinyMCE
    tinyMCE.init({
    ~(略)~
      plugins: 'advimage,advlink,autosave,contextmenu,fullscreen,inlinepopups,pagebreak,searchreplace,table,emotions',
      theme: 'advanced',
    ~(略)~
      theme_advanced_buttons2: 'forecolor,backcolor,removeformat,|,link,unlink,image,charmap,pagebreak,|,search,replace,|,undo,redo,|,emotions',
    ~(略)~
    });
    編集画面に表情アイコンが表示されます。
    ファイル 9-1.jpg
    これだけでtinyMCEに添付されている絵文字が使用できます。
  2. 過去にWDPで絵文字を使用していた場合、1.の作業に加えて行ってください。

    Right Bower(kirijiさん)作成の WebDiaryProに絵文字ボタンを作る を参考に設定して使用している絵文字をfreoでも使うことを前提としています。

    1. 絵文字アイコンを tiny_mce/plugins/emotions/img/ 内に emoji/ を作成しアップします。
    2. tiny_mce/plugins/emotions/emotions.htm の下から5行目(</table>の前)に次のタグを加入します。
          <tr>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_00.gif','…');"><img src="img/emoji/pp_00.gif" width="17" height="17" border="0" alt="{#…}" title="{#…}" /></a></td>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_01.gif','ハート');"><img src="img/emoji/pp_01.gif" width="17" height="17" border="0" alt="{#ハート}" title="{#ハート}" /></a></td>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_02.gif','汗');"><img src="img/emoji/pp_02.gif" width="17" height="17" border="0" alt="{#汗}" title="{#汗}" /></a></td>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_03.gif','蒼ざめ');"><img src="img/emoji/pp_03.gif" width="17" height="17" border="0" alt="{#蒼ざめ}" title="{#蒼ざめ}" /></a></td>
          </tr>
          <tr>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_04.gif','怒');"><img src="img/emoji/pp_04.gif" width="17" height="17" border="0" alt="{#怒}" title="{#怒}" /></a></td>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_05.gif','♪');"><img src="img/emoji/pp_05.gif" width="17" height="17" border="0" alt="{#♪}" title="{#♪}" /></a></td>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_06.gif','?');"><img src="img/emoji/pp_06.gif" width="17" height="17" border="0" alt="{#?}" title="{#?}" /></a></td>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_07.gif','!');"><img src="img/emoji/pp_07.gif" width="17" height="17" border="0" alt="{#!}" title="{#!}" /></a></td>
          </tr>
          <tr>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_08.gif','滝汗');"><img src="img/emoji/pp_08.gif" width="17" height="17" border="0" alt="{#滝汗}" title="{#滝汗}" /></a></td>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_09.gif','ひらめき');"><img src="img/emoji/pp_09.gif" width="17" height="17" border="0" alt="{#ひらめき}" title="{#ひらめき}" /></a></td>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_10.gif','ハートブレイク');"><img src="img/emoji/pp_10.gif" width="17" height="17" border="0" alt="{#ハートブレイク}" title="{#ハートブレイク}" /></a></td>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_11.gif','LOVE LOVE');"><img src="img/emoji/pp_11.gif" width="17" height="17" border="0" alt="{#LOVE LOVE}" title="{#LOVE LOVE}" /></a></td>
          </tr>
          <tr>
            <td><a href="javascript:EmotionsDialog.insert('emoji/pp_12.gif','ドクロ');"><img src="img/emoji/pp_12.gif" width="17" height="17" border="0" alt="{#ドクロ}" title="{#ドクロ}" /></a></td>
          </tr>
    3. 文字コードをUTF-8にして保存してアップします。
  3. 編集画面の表情アイコンを押して次のようになればOKです。

    ※表示の変更ができてない場合はブラウザのキャッシュをクリアしてから更新してみてください。
    ファイル 9-2.jpg

ページ移動

関連エントリー

ユーティリティ

2024年11月

- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

キーワード検索

キーワード検索フォーム

ユーザー

  • cccのアバター

新着画像

ブログパーツ

Twitter

Twilogを見る

Feed