ノウハウをいつでも。ウェブマーケティングのポータルサイト

Movable Type Tips

Movable Type の編集画面にCSSを適用して[見たまま編集]してみよう

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数

Movable Type の編集画面には[TinyMCE]というエディタが採用されており、公開したみばえに近い形で編集作業ができます。しかし、中には「もっと公開時のイメージに近い形で編集作業をしたい」という方もいると思います。

そんなときは、Movable Type の編集画面に、CSSを適用してみましょう。編集画面へのCSSの適用は、管理画面から行えます。変更したいウェブサイト、ブログを選び、左メニューの[設定] => [投稿] を選ぶと、[WYSIWYGエディタの設定]という入力欄があります。

CSS設定画面

この入力欄[コンテンツCSSファイル]を選び、ウェブサイト・ブログで使われているCSSファイルを指定すると、編集画面にCSSが適用されます。

それでは、実際にCSSファイルを適用してみましょう。ここでは、以下の条件で試します。

  • ブログのテーマを「Pico」に変更する
  • PicoのCSSファイルを編集画面に適用する

Picoは、Movable Type のテーマの一つで、ブログに適したデザインとなっています。

Picoのデザイン

まず、CSS適用前の編集画面を見てみましょう。

CSS適用前の編集う画面

次に、編集画面に対してCSSファイルの適用を行います。公開したブログのhtmlから、cssファイルのURLを確認します。

例えば、CSSファイルが [http://example.com/styles.css] の場合、そのURLを打ち込んで保存します。

テーマのCSSを適用した状態

CSSファイルを適用したら、もう一度編集画面を確認してみましょう。

PicoのCSSを編集画面に適用した状態

先ほどの編集画面と比べて、フォントの書体やサイズが、より公開した[Pico]のデザインに近くなっているのがお分かりいただけるでしょうか?

このように、編集画面のCSS適用はMovable Type の管理画面から簡単に行えます。CSSは、ウェブサイトやブログごとに個別に設定を行うことができます。また、ウェブページと記事それぞれに異なるスタイルを適用することもできます。詳しい情報については、Movable Type のドキュメントをご覧ください。

© MAKEPO

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

オサナイタケシ

長内毅志

Movable Type プロダクトマネジャーを経て、現在、Movable Type エバンジェリスト兼デベロッパーリレーションマネジャー。

他の参加者を見る

長内毅志

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!