AVIATION ASSETS

陸上航空の教育訓練、運用、装備、安全等に関連する米軍情報の発信源

WordPressのエディタ環境を整える

はじめに

自分は、Wordpressの記事の作成にテキスト・エディタを主に使用しています。翻訳し終わったデータを流し込んで記事を作成することがほとんどだからです。そういうわけで、Wordpressのテキストエディタをそのまま使っていても、特に不満を感じていなかったのですが、コラム「OmegaTとWordfastを比較してみた」で表を使うのに併せて少し環境を整えてみましたので、その内容を紹介します。

ビジュアルエディタの環境

テキストエディタで表を作るのは、面倒だったので、何か方法はないか探したところ、TinyMCE Advancedというプラグインを見つけました。このプラグインは有名なものですので、らいふーるさんの「TinyMCE Advancedの使い方と設定方法」など、これに関するたくさんの記事が公開されています。このプラグインを使えば、ビジュアルエディタを使って簡単に表を作ることができるようになります。

ところが、このやり方で作った表は、レスポンシブになっていないので、スマートフォンなどでの表示が適切に行われません。細かい設定を行えばレスポンシブな表が作成されるようにもできそうなのですが、めったに作らない表のためにそんな設定をするのも面倒なので、テキストエディタを使って自分でレスポンジブな表に修正しました。そうなると、Wordで作った表をビジュアルエディタにコピー・アンド・ペーストした方が、より修正が容易なプレーンな状態の表を作れるので、TinyMCE Advancedは使わなくなくて良いということになってしまいました。

ただし、このプラグインを使うための設定を行っている最中に、ビジュアルエディタに独自のCSSを読み込むことができることを知りました。自分の場合は、Aviation Assetsのテーマで使用しているStyle.CSSをビジュアルエディタに適用することで、実際の画面に近い状態で表示されるようにしています。この方法については、株式会社bridgeさんの「WordPressのビジュアルエディタを実際の見た目に近づける簡単な方法」に詳しく説明されています。

これによりビジュアルエディタがかなり使いやすくなったので、記事をブラウザ上で直接編集するために使用していた「Front-end Editor for WordPress」というプラグインも使わなくなってしまいました。

テキストエディタの環境

ビジュアルエディタで作った表をテキストエディタでレスポンシブに修正する際に、HTMLのタグがカラーリングされていた方が分かりやすいかなと思い、HTML Editor Syntax Highlighterというプラグインを使ってみることにしました。このプラグインも有名なので、 鈍色スイッチ さんの「エディタをより便利にしてくれるプラグイン『HTML Editor Syntax Highlighter』」など、たくさんの記事が公開されています。初期状態では背景が黒に変わってしまって好きになれなかったのですが、設定でテーマをDefaultにするとすっきりとした表示になっていい感じになりました。しかも、テキストエディタだけではなく、テーマの編集のエディターでもタグがカラーリングされるようになって、非常に使いやすくなりました。これなら、Notepadでテーマの各ファイルを直接編集することがなくなるかも知れません。

さらに、このプラグインを使うことにより、Cntl+Fで検索、Cntl+Shift+Fで置換ができ、Cntl+Sで保存ができるようにもなります。これらの機能について説明している記事は少ないのですが、タグのカラーリングに匹敵するくらいに便利な機能だと思います。

おわりに

エディタ環境を整備することで、より翻訳の方に集中できるようになったはずです。頑張らなければ...

発行:Aviation Assets, 22 April 2018

アクセス回数:319