diwao日記

Web、ガジェット、仙台のお話

Movable Type5にCKEditorのプラグインを導入

Movable Type5のデフォルトエディタがいまいち使い勝手が悪かったので、CKEditorというプラグインを導入してみました。

デフォルトエディタのここがイヤ

デフォルトのエディタを使っていて一番困るのが、画像の表示サイズの変更でした。アメブロなどのブログサービスでは、画像アップロードすると自動的にブログ用のリサイズしてくれますが、Movable Typeでは基本的には元サイズのまま表示されます。

サムネイルを作るときにサイズを指定することはできますが、サムネ用と元画像とふたつできてしまうのは管理が面倒。。。いままでは、画像を貼りつけたあとにエディタをHTML表示にして、サイズのソースを直接編集していたのですが、これ正直とっても面倒くさいです。

そんなとき、Movable Typeのエディタを充実させるプラグインがあることを知りました。

検討したのはCKEditorとTinyMCEのふたつ

Movable Typeを学ぶにあたって参考にしている書籍によると、現時点でMovable Type5で利用でき、日本語をサポートしている代表的なエディタは、CKEditorとTinyMCEのふたつだそうです。それぞれの特徴をざっくりいうとこんな感じ↓

CKEditor

■TinyMCE

どちらもデモが用意されており、Web上で実際に触ってみることができます。まずはデモで使ってみて、気に入った方を選ぶといいと思います。

初心者にはシンプルな方がいい

デモを触ってみたところ、確かにCKEditorに比べると、TinyMCEの方はちょっと反応がもたつくような印象を受けました。また、TinyMCEは多機能ゆえにボタンが多すぎて、どのボタンがどのような働きをするのかを覚えるのにも苦労しそうに思えました。

私の場合、まだMovable Type自体をあまり使いこなせているわけでもないし、ウェブのコーディングにも詳しい方ではないので、機能よりも動作の快適さを優先してCKEditorを使うことにしました。

CKEditorのインストール方法

オフィシャルサイトのDownloadページからCKEditorをダウンロード。

CKEditorダウンロード

ダウンロードしたファイルを展開。展開したファイルの中から、mt-staticの中のplugiinsとpluginsフォルダの中のファイルをそれぞれアップ。

ファイルを展開

(注)書籍にはこの後にダッシュボードにアクセスするとアップデートがかかるとありましたが、私の場合はこれでインストール完了でした。

ブログ記事の作成画面を開くとエディタが変更されています。

エディタの変更を確認

新たに追加されたメニューボタンを使うことで、挿入した画像のサイズを変えたり枠をつけたり、文字食を変えたり簡単にできる。これでブログの更新作業が大分楽になりそう!もっと早く変更すればよかったです。

広告