このページの位置: ホーム > blogっぷり! > 石輪っぷり! > MovableType > TinyMCE にスタイルクラスを設定

石輪っぷり!

TinyMCE にスタイルクラスを設定

[MovableType] 2006年6月 9日 2時52分

○○っぷり！を書いている社長とスタッフの皆さんへ。

このサイトに導入しているWYSIWYGエディタ“TinyMCE Plugin for MT Ver1.00 Ja”に、少しだけユーザースタイルクラスを設定しました。
スタイル選択のプルダウンメニュー

写真等画像を挿入した際に、後に続くテキストを画像の右あるいは左に回りこませることができます。

Bug 画像を挿入したあと、挿入した画像をクリックして選択し、ツールバーの [-- スタイル --] から“left”を選択するとこのように画像が左側に配置され、後に続くテキストが画像の右側に回りこみます。
なお、画像とテキストとの間隔は、画像の右を10ピクセル、下を5ピクセルに設定してあります。

Bug 画像を挿入したあと、挿入した画像をクリックして選択し、ツールバーの [-- スタイル --] から“right”を選択するとこのように画像が右側に配置され、後に続くテキストが画像の左側に回りこみます。
なお、画像とテキストとの間隔は、画像の左を10ピクセル、下を5ピクセルに設定してあります。

今後いろいろなスタイルクラスを追加していきたいと思いますので、リクエストがあればお知らせ下さい。

なお、メインのスタイルシート上で、水平面線を挿入ボタンから水平線<hr />を挿入すると、上のように1ピクセルの破線が表示されるようにしています。

また、インデントボタンを使うと、左側に2ピクセルの青い線が表示されるようにしています。
これは、インデントボタンを使うと<blockquote>～</blockquote>タグが生成されるのですが、本来<blockquote>は、他のWebサイトや文献からの“引用文”を意味するタグであり、インデントといった装飾目的に利用することはWeb標準から外れるばかりでなく、音声ブラウザ上問題があります。
したがって、このサイト上でのインデントボタンは「引用」ボタンとして扱って下さい。
（この段落はスタイルの説明のために、<blockquote>を使っています。
なお、いしわっぷり!はスタイルを変更しているのでデザインが異なりますが、この段落はタグに直接スタイルを記述して青い線を表示しています。）