HOME  /WordPress(初級)
 /EmEditor Free版のインストールと利用事例
2022年05月23日

EmEditor Free版のインストールと利用事例

WordPressのCSSファイルやPHPファイルを編集する為には、WPの約束事である『UTF-8のBOMなし』のテキストエディタが必要になります。

私も幾つかのテキストエディタを試しましたが、現在は株式会社エムソフト様が個人向けに無償提供してくれている『EmEditor Free版』を使用させてもらっています。

特徴は

・コメントと本文を色分け表示してくれるために非常に見やすい。

・検索機能が充実しているので、何処に何が記述されているのかを探しやすい。

・インストールプログラムなのでファイル識別子と紐づけられる。

等のメリットを感じています。説明は下記の流れで説明します。

1.EmEditor Free版のインストール

2.WordPressで利用する為の設定変更

3.ファイル識別子との関連づけ

4.使い方の一例

1.EmEditor Free版のインストール

1.EmEditorのサイトから、プログラムをダウンロードする。

EmEditor Free版のサイト(左記URL)をアクセスし、表示された画面の下の方にある赤字のEmEditorのダウンロードの文字をクリックします。(下図参照)

EmEditor Free (以下、Free版) は、EmEditor Professional (以下、Pro版) と別のプログラムにはならず、同じバイナリで、両方の機能を果たします。最初に EmEditor を起動時、Professional版 と Free版 のどちらとして使用するかを選択するダイアログ ボックスが表示されます。また、[ヘルプ] メニューから [アップグレード] または [ダウングレード] コマンド を選択するだけで、Pro版と Free版を切り替えることができます。ただし、Free版は、ご家庭または学校で個人としてのみお使いいただけます。会社、政府、その他の組織で利用することはできません。EmEditor のダウンロード

次に「どれをダウンロードするのか?」の画面が表示されます。

私のPCは64bit版なので「64 ビット インストーラー」をクリックするとダウンロードが開始されます。

※2022年のバージョンは『emed64_21.6.1.msi』がダウンロードされます。

 

2.ダウンロードしたファイルを実行して、インストールする。

①『emed64_21.6.1.msi』をダブルクリックしてインストールします。

・途中で使用許諾を求めてくるので、同意します。

・インストールのタイプは『標準』を選択してください。

②インストールが完了すると下記の画面が表示されます。

■「EmEditor Freeへのダウングレード」ボタンをクリックします。

以上でインストールは完了します。

 

3.初期画面の変更

①EmEditorを起動するとエディタ画面の中に下記のファイル選択画面が表示されます。

■この画面は不要なので「カスタマイズ」ボタンを挿入し、下記のチェックを外します。

■保存をし、EmEditorを終了し、再起動してください。

ファイル選択がない下記の画面が表示されます。

■画面下部のステータスは重要です。

ここで「ファイルの種類」が何か、「ファイルのエンコード」は何かが表示されます。

これをWordPressに合わせる方法を下記で説明していきます。

 

2.WordPressで利用する為の設定変更

­ ­メモ

WordPressで扱うファイル形式はUTF-8のBOMなしが要求され、対象ファイル形式は下記になります。

PHPファイル、②CSSファイル、③JavaScriptファイル、④textファイル

①PHPファイル(.php)

PHPの正式名称はPHP:Hypertext Preprocessorになります。
またPHPはPersonal Home Pageの略称で、WEBページを記述するサーバーで動くスクリプト言語です。WordPressはこのPHPで記述されており、機能のカスタマイズはこのファイルを修正する必要があります。 

②CSSファイル(.css)

CSS(Cascading Style Sheets)はWEBページのスタイルを定義するための言語です。画面の構成やサイズ及び出力変数の表示フォーマット等が定義されており、画面のカスタマイズはこのファイルを修正する必要があります。 

③JavaScript(.js)

PHPはサーバ側で動くスクリプト言語ですが、JavaScriptはデバイス(PCやスマホ)側で動くスクリプト言語です。デバイス操作を検知して、HTMLやCSSを変更します。

④htaccessファイル(textファイルの扱いになります)

.htaccess(ドットエイチティーアクセス)はWEB管理者がサーバ管理者に頼まなくてもディレクトリ単位でWordpresが動いているAppachの設定の一部変更するファイルです。アクセスされるURLとプログラムが実行されるディレクトリの橋渡し等の設定等に使われます。

1.PHPファイルの設定

EmEditorのメニュから「ツール → 設定の選択 → 設定の定義」を実行します。

下図が表示されます。

①ファイルの種類で「PHP」を選択します。

②「プロパティ」ボタンをクリックすると下図が表示されます。

③新規作成ボタンを挿入すると下図が表示されます。

④プルダウンをクリックして、リストから「UTF-8」を選択します。

⑤BOMを付けるのチェックを外して、「BOMなし」にする。

⑥「OK」ボタンを挿入して設定を確定させる。

下記画面に戻ります。

⑦「UTF-8を優先する」にチェックを付ける。

⑧「OK」ボタンを挿入して設定を確定させる。

 

2.CSSファイルの設定

①で「CSS」を選択して、あとの操作は同一です。

 

3.JavaScriotファイルの設定

①で「JavaScript」を選択して、あとの操作は同一です。

 

4.textファイルの設定

①で「text」を選択して、あとの操作は同一です。

又、追加で既定の拡張子が「bat」になっているのを「text」に変えて下さい。

これでメモ帳と同じ形でEmEditorが利用できるようになります。

.htaccessファイルを新規作成するの場合はファイル名を「.htaccess」にします。

以上でWordPressに合った設定になりました。

 

3.ファイル識別子との関連づけの変更

Windowsの基本設定はPHPファイル等のダブルクリックで「メモ帳」が開く設定になっています。
これを「EmEditor」に変更する必要があります。

①phpファイルを右クリックして「プロパティ」を選択します。

②表示された画面から、『変更』を選択します。

③表示された画面から「EmEditor」を選択します。

④OKで終了します。

⑤同様に、CSSファイルも、.htaccessファイルもメモ帳からEmEditorに変更してください。

以上でファイルをダブルクリックすると「EmEditor」で開かれる様になります。

 

4.EmEditorの使い方

1.EmEditorで対象ファイルを指定する方法

PHPファイル等をダブルクリックするとPHPファイル形式に合ったEmEditorが開きます。

一方、EmEditorアイコンをダブルクリックすると「text」形式でEmEditorが開きます。

これを他のPHPCSSJavaSacriptに変更する場合は「ツール→設定の選択」コマンドで変更します。

 

2.EmEditorの表示方法

EmEditorで2つのファイルを開くと、タブ形式で表示されます。

これをファイル毎にEmEditorを分ける場合は、ウインドウメニュの下記のチェックを外します。

以上で個々のファイルとして操作できるようになります。

この形式の方が2つのファイルのチェックには向きます。

 

3.EmEditorの検索機能

EmEditorには、エディタの中での文字検索/置換以外に、ファイルからの文字検索/置換があります。

これは大変便利な機能でターゲット関数やCSSのクラウスがどのファイルの中で使われているのか?を調べる事ができます。使い方は下記になります。

フォルダを右クリックし表示されたメニュから「EmEditorでファイルから検索」を実行します。

②下記画面が開きます。

■ファイルの種類はディレクトリの中でどのファイル識別子をサーチするのか?の指定なので重要です。

③検索ボタンを挿入すると検索した結果の一覧を表示してくれます。

以上でこのドキュメントの説明は完了です。

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

「wordpress」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

WordPressをインストールするとディフォルトではサイトURLはドメイン名/WordPressフォルダになります。これをドメイン名だけにする為にSynologyの仮想ホスト機能を使います。本ドキュメントはこの使い方を解説しています。

WordPressの動作環境を変更すると、DBをダイレクトに変更しなければならないケースがあります。このドキュメントはphpMyAdminのエクスポートとインポートを使って修正した事例を紹介しています。

ここではSynoligyサーバを「Hyper Backup」アプリケーションで、Googleドライブにバックアップ/リストアする方法を解説しています。

Synologyを複数台持っている場合は、Synology間でバックアップを相互に持たせる事ができます。ここではその方法を解説しています。

SynologyのMariaDBから、mysqldumpを使ってDBを定期的にダンプする方法と、それを利用してWordPressを過去の時点に戻す方法を解説しています。

フロントページやカテゴリページを使って最終的なメニュ構成を作成する方法を紹介しています。

Contact Form 7では確認用のe-mailアドレスをチェックする方法がありません。このドキュメントはContact Form 7のフィルターフックの機能をfunctions.phpに記述する事によりこれを可能にする方法を紹介しています。

固定ページに必要なのは、読者からの問い合わせを受けるメールフォームです。これを実現する為に『Contact Form 7』のインストールと設定、更にメールを送るためのSMTPとして、『WP-Mail-SMTP』のインストールと設定事例を紹介しています。

カテゴリページの表示を抜粋表示に変更してもこのカテゴリーの何処にどの様なドキュメントがあるか?は良く分かりません。そこで解説ページを固定ページに書き、カテゴリページの表示の時に、この固定ページを表示させる方法を解説しています。

このドキュメントは投稿ページと固定ページの違いや固定ページのプログラム構造を説明し、この固定ページを広幅表示に変更するための具体的カスタマイズ方法を紹介し更に固定ページのタイトルを非表示にする方法も解説しています。

Twenty twelve 投稿ページには各種の一覧ページがありこの表示方法に全文表示と抜粋表示があります。その中で検索ページは抜粋表示ですがそれ以外は総て全文表示になっています。このドキュメントは一覧表示の物は総て抜粋表示にする方法が記載されています。

ヘッダーはWEBサイトの顔になりますがTwenty Twelveのヘッダーは貧弱です。ヘッダーはタイトル、説明及びメニューから構成されており、このドキュメントはこれらをカスタマイズする方法が記載されています。

このドキュメントはウィジェットエリアの考え方とCSSを編集して少し見栄えの良いウィジェットエリアする方法を解説しています。

一般のテキストボックスを使ってPHP/HTMLソースを記述するとhttp画面で正しく表示されない問題が発生します。
このドキュメントはTinyMCE Advancedに整形済みテキスト(preformatted text)を使ったボックスを作成する方法を紹介しています。

このドキュメントはsingle.phpとcontent.phpをカスタマイズし、投稿ページの<前の記事><次の記事>のリンクを削除。メタ情報はカテゴリと投稿日を削除し編集のみとし、最後に記事タイトルの前に更新日をいれ、記事タイトルを装飾した事例です。

Twenty Twelve のフッターには『Proudly powered by WordPress』という文字が出力されます。これを通常サイトの様に『Copyright表現』に変更する方法を記載しています。

本ドキュメントではBreadcrumb NavXTのインストールからそれを表示させる為のheader.php及びCSSの編集方法と表示されたパンくずリストをビジュアルアイコンを使ってよりビジュアルにする方法を説明しています。

アイコンも文字を使ったWEBサイトをよく目にしますが、WPのビジュアルエディタで使えるプラグインが『WordPress Visual Icon Fonts』です。このドキュメントには、インストールの仕方と簡単な使い方を紹介しています。

このドキュメントはTinyMCEのビジュアルエディタとhttp画面を一致させる設定や、見出しや段落等のテキストエリア要素の設定、テキストボックスの新設方法、及び表がビジュアルエディタで利用できる設定等TinyMCEの使いこなす為のテクニックを紹介しています。

このドキュメントはCSSのカスタマイズ編です。内容はTwenty Twelveの画面構成解説、子テーマの作り方、CSSを編集する際の注意点、具体的なCSSカスタマイズ事例。事例はスマートデバイスにも対応させる為に%指定をしています。

本投稿はTwenty Twelveの投稿のカテゴリ設定や文書の作成について事例と注意点を記載しています。

WordPressをインストールする時に、ログインユーザ名を指定しますが、デフォルトのままではブログの表示名も上記ログインユーザ名が使われます。これを変更する方法を解説しています。

WordPressをインストールして、WPのテーマを『Twenty Twelve』決めた次に悩んだのは、ダッシュボードにある『設定』をどの様に設定したら良いか?です。本ドキュメントではこのWEBサイトの設定をどの様にしたのか?を解説しています。

本サイトのWordPressのテーマは、Twenty Twelveで構築しました。本ドキュメントでは何故、このテーマを選択したのか?の背景と設定方法を解説しています。

SynologyのWordpressパッケージをインストールする方法を解説しています。

画像を取り込むツールとしてOnePerss Image Elevator、サムネールの再構築にRegenerate Thumbnailsを利用しています。このドキュメントは画像に関するツールと管理方法について解説しています。

SynologyのNASに日本語版WordPressをインストールするやり方を解説しています。複数のWordPressも同一手法で稼動させることができます。