Movable TypeのリッチエディタでHTMLをコピペして独自のスタイルを当てたいことがあったので、リッチエディタ内にCSSを適用する方法を調べました。
設定方法
以下のようなHTMLとCSSを用意して、コードをコピペしてリッチエディタ内で使う想定で試してみます。
HTML
1 2 3 4 5 6 7 8 9 | <div class="box"> <div class="box_img"> </div> <div class="box_text"> <p class="box_ttl">タイトルテキスト</p> <p class="box_description">説明文のテキストです。説明文のテキストです。説明文のテキストです。</p> </div></div> |
wysiwyg.css
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 | .box { display: flex; width: 100%; max-width: 1000px; box-sizing: border-box; margin: 20px auto; padding: 0 15px;}.box_img { width: 40%; box-sizing: border-box; padding-right: 20px;}.box_img img { width: 100%; height: auto;}.box_text { width: 60%;}.box_ttl { font-size: 18px; font-weight: bold;}.box_description { font-size: 14px;} |
まずは特に設定しないで投稿してみます。
リッチテキストのフォーマットでHTML編集モードに切り替えて、用意したコードを貼り付けます。
HTML編集モードを終了して表示を確認すると、以下のように縦に並んだ表示になりました。
リッチエディタ内にCSSを適用させてみます。
先ほど用意したwysiwyg.cssをサーバにアップロードします。
左メニューの 設定 > 投稿 > WYSIWYGエディタの設定 で、アップロードしたCSSファイルのURLを指定します。
変更を保存をクリックして保存すれば完了です。
先ほどの投稿を再度確認してみると、CSSが適用されて想定した表示で確認することができました。
ウェブページと記事でCSSを変更したい場合、入力画面内のbodyに対して.pageと.entryというclassが付与されるので、それを使って変更できるようです。
詳しくは参考サイトを確認ください。
【参考サイト】
コメントが承認されるまで時間がかかります。