アイコンを使おう！

文字が小さくなってしまう。文字を大きく表示したい。

はて、なんのことやら・・・。

ハードな日々も去って、も～んびりした生活を送っているので「楽天ブログ絵文字アイコン簡単入力」を復活させるべく、日曜大工な感じに新バージョンの開発をしています。
いつ完成するやら、完成すらするのか定かではないけど。。。

TinyMCE
おそらく楽天ブログの日記投稿に使われている「高機能エディタ」も母体はTinyMCEのHTMLエディタだと思う。このTinyMCEは、サイトから手軽にダウンロードできてホームページの中に簡単に組み込むことができます。カスタマイズも簡単で自分の必要な機能だけ記述するだけで、それでいて高機能なエディタができあがります。

で、これを使ってHPを作成したのですが、思わぬ落とし穴にはまってしまい少しあせった部分があるので意味なく紹介ししておきます。

mode : "exact"　または　"textarea"
elements : "elm1"　または　「id」
content_css : "example_advanced.css"　または　スタイルシート

【１】モード設定　mode :　～
"textarea"で設定するとHPに表示されるtextareaが全部HTMLエディタになってしまいます。１つだけなら大して問題ないけど複数textareaを作るときはちと厄介です。もしターゲットを１つに絞りたい、特定したいときは、mode : "exact"　にします。
※mode : は　elements :　とセットで設定しましょう。

【２】ターゲット設定　elements : ～
どのエリアをHTMLエディタにしたいかというのを「id」で指定します。
idの指定方法は<textarea id="elm1"></textarea>みたいな感じでタグの属性に記述すればOKです。

【３】スタイルシート設定　content_css : ～
TinyMCEは単独のスタイルシートを読み込んでいます。が、大きく影響する部分は、エリア内の文字の大きさ、背景の色などの大ざっぱな環境です。もしここの設定を省くと入力文字が小さくなったりとつまらないないところで影響が出ます。
HP用にstyle.css、HTMLエディタ用にtiny_style.cssってな感じで２つ作っておくといいかもしれません。