WordPressプラグインのTinyMCE Advancedで文章作成環境改善

一般にホームページと言われる時代からウェブサイトを作り始めて、今年で20年が過ぎた。

初期の頃は、ソースコードを参考にしながら、メモ帳にて見よう見まねで作っていた。

その後、こつこつ小遣いを貯めて、1996年当時の秋葉原にて最も活気のあったラオックス ザ・コンピュータ館で、「入門HTML ホームページ作りのすすめ」(富田憲範著)というHTMLタグでウェブサイトを制作する本を買ってからだんだん本腰を入れるようになった。

※高校生にとって、ホームページビルダー高嶺の花だった理由も背景にはある

一時期ホームページビルダーやDreamweaverを使ってみるものの、しっくり来なくて短期間で使わなくなり、その後もテキストエディタ(gPadTeraPadサクラエディタ秀丸など)にタグを手打ちしてウェブサイトを作り続けた。

HTML、HTML+CSSからadiary、そしてWordPressに移行してからも、テキストエディタは以前ほど使わなくなったが、引き続きタグ打ちしながらウェブサイトを作っていた。

しかし、タグ打ちしながらウェブサイトを作っていると、1つの記事を書くのに、デザインの修正を含めて、意外と時間がかかるので記事を書くのが億劫になり、一時期ウェブサイトが開店休業になってしまった。

そこで、その状況を打開するために、テキストエディタ(ここでは、WordPressの「テキストエディタ」モードのこと)のタグ打ちからWordやPagesなど文章作成ソフトと同じような制作方法(WordPressの「ビジュアルエディタ」モード)に移行することにした。

※微修正などは、今でも「テキストエディタ」モードにて直接タグ打ちしている

その「ビジュアルエディタ」モードの機能を拡張してくれるのがTinyMCE Advanced

TinyMCE Advancedのツールバーにあるボタンで使っている機能は、以下の通り。

イタリック、引用、打ち消し、下線、書式設定をクリア、段落、中央揃え、続きを読む、テキスト色、背景色、左寄せ、フォントサイズ、太字、右寄せ、リンクの挿入/編集の15種類。

※『これ使うかな』『あれ使うかな』と思って、いろいろと機能を追加してみたものの、結局は上記で挙げた機能しか使っていない

画像の挿入/編集は、今後使うことになるかもしれないが…。

関連記事:WordPressにプラグインをインストールして制作環境を整える

TinyMCE Advanced

インストール

メニュー】>【プラグイン】>【新規追加】と辿りながらクリックする

プラグインの検索

TinyMCE Advanced】と入力する

今すぐインストール】をクリックする

プラグイン TinyMCE Advanced のインストールが完了しました。

有効化】をクリックする

プラグイン

プラグインを有効化しました。

設定

TinyMCE Advanced

設定項目】をクリックする

※メニューからは、【設定】>【TinyMCE Advanced】と辿りながらクリックする

エディター設定

■【エディターメニューを有効化する。】にチェックする

使用しないボタン

使いたい機能を、上部のツールバーにドラッグ&ドロップする

※使用したい機能をクリックし、クリックしたままツールバーの上に移動し、ツールバーの追加したい場所まで来たら、クリックするのをやめて離す

設定

■【リストスタイルオプション】にチェックする

□【コンテキストメニュー】

□【代替リンクダイアログ】

■【フォントサイズ】にチェックする

※チェックすると、pt(ポイント)指定からpx(ピクセル)指定に変更され、8px・10px・12px・14px・16px・18px・20px・24px・28px・32px・36px・48px・60pxになる

高度なオプション

□【CSS クラスメニューの作成】

■【段落タグの保持】にチェックする

※私の使い方では、チェックしていたら不具合が発生したので、今はチェックしていない

□【画像元の貼り付けを有効にする

次のエディター拡張の有効化

■【メインエディター (投稿と固定ページの新規追加と編集)】にチェックする

■【wp-admin の他のエディター】にチェックする

■【サイトのフロントエンドのエディター】にチェックする

変更を保存】をクリックする