WordPress のテーマやプラグインのファイル編集に、この Notepad++ をインストールから使い方を学習します。WordPressのファイル編集に一般的なワープロソフト使用するとファイル壊してしまいます。Notepad++ は、初心者にも簡単に使えて、正しく WordPress ファイルを編集できます。
ページコンテンツ
Notepad++とは
Notepad ++バージョン7.4.2
「Notepad ++」は、Windows用の無料で使えるオープンソースのテキスト・コードエディタです。初心者には使いやすく、上級者には非常に強力で「 PHP や JavaScript・HTML・CSS 」などを含む多くのプログラム言語の構文のコードが見やすく強調表示がされます。
また、FTPプラグインが組み込まれているので、WordPressを運用している、サーバーに接続してファイルを直接編集することもできます。
Notepad ++では、以下の言語がサポートされています。
| 言語・文字コードの対応 | |||
|---|---|---|---|
| ActionScript | CSS | LISP | RC |
| ADA | D | Lua | Ruby |
| asp | DIFF | Makefile | Scheme |
| Assembly | Flash ActionScript | Matlab | Shell |
| autoIt | Fortran | NSIS | Smalltalk |
| bash | Gui4CLI | Objective-C | SQL |
| Batch | Haskell | Pascal | TCL |
| C | HTML | Perl | TeX |
| C++ | ini file | php | VB / VBS |
| C# | InnoSetup | PowerShell | Verilog |
| Caml | Java | Postscript | VHDL |
| CMakeFile | Javascript | Properties file | XML |
| Cobol | JSP | Python | YAML |
| Coffee script | KiXtart | R | |
| ※バージョン6.6.6以降 | |||
Notepad ++のダウンロード
Notepad ++をダウンロードするには、このDownload Notepad++ ページにアクセスして「 zipファイル（Notepad++ zip package）」または、「 インストーラーパッケージ（Notepad++ Installer） 」をデスクトップなどで、ご自身のわかりやすい場所にダウンロードしてください。
notepad ++ ダウンロードページ
「notepad ++ ダウンロードページ」で下記の様な項目がありますが、その中で「32ビットと64ビット版」があり、①③は「 インストーラーパッケージ 」で、インストーラーを使いたくない場合は②④は「 zipパッケージ 」です。
どちらをダウンロードするべきかわからない場合は、①をダウンロードしてください。
※ Windows7:32bit＆64bit「動作確認済み」です。
- （一部抜粋）
- Download 32-bit x86
- ①：Notepad++ Installer 32-bit x86: Take this one if you have no idea which one you should take.
- ②：Notepad++ zip package 32-bit x86: Don't want to use installer? Check this one (zip format).
- Download 64-bit x64
- ③：Notepad++ Installer 64-bit x64: Take this one if you have no idea which one you should take.
- ④：Notepad++ zip package 64-bit x64: Don't want to use installer? Check this one (zip format).
Notepad ++のインストール
インストーラーを使用する場合
ダウンロードした任意の場所（フォルダ）に、カメレオンが鉛筆に乗った様な画像のインストーラ「npp.7.4.2.Installer.exe」がダウンロードされます。（バージョンは7.4.2です。）
Notepad++ インストーラー
installer.exeファイルを右クリックし、[ 管理者として実行 ]を選択します。もし、セキュリィーの警告メッセージが出たら｢ 実行(R) ｣ボタンをクリックします。
セキュリィーの警告メッセージ
次にNotepad ++の表示言語を選択できるメッセージがでます。
日本語環境のPCでインストールしている場合はデフォルトで日本語表示の「Japanese」に選択されています。
変更する場合は「Japanese」をクリックしてください。数十種類の言語名がセレクト表示されます。「 OK 」をクリックします。
表示言語の選択画面
次の画面が出でます、そのまま｢ 次へ(N)> ｣をクリックします。
Notepad++ v7.4.2 セットアップ メッセージ
次の画面が出でます、契約書のすべての条件に同意するならば、[ 同意する ] を選んでインストールを続けてください。
Notepad++ v7.4.2 ライセンス契約書
インストール先のフォルダを確認されます。
Notepad++ v7.4.2を以下のフォルダにインストールします。異なったフォルダにインストールするには、[ 参照 ] を押して、別のフォルダを選択してください。 続けるには [ 次へ ] をクリックして下さい。
インストール先を選ぶ
一番上のLocalizationは表示言語関連のファイルです。
Localization は必要な言語ファイルを選択
インストールしたいコンポーネントにチェックを付けて下さい。不要なものについては、チェックを外して下さい。 続けるには [次へ(N)>] をクリックして下さい。
Notepad++ v7.4.2のインストール オプションを選ぶ
次の画面は、英文になります。
Notepad++ v7.4.2 コンポーネントの選択 メッセージ
Don't use %APPDATA% Enable this option to make Notepad++ load/write the configuration files from/to its install directory. Check it if you use Notepad++ in a USB device.
％APPDATA％を使用しないでください このオプションを有効にすると、Notepad ++は設定ファイルをインストールディレクトリから読み込んだり、書き込んだりします。 USBデバイスでNotepad ++を使用している場合はチェックしてください。
Allow plugins to be loaded from %APPDATA%\notepad++\plugins It could cause a security issue. Turn it on if you know what you are doing.
％APPDATA％\ notepad ++ \ pluginsからプラグインの読み込みを許可する セキュリティ上の問題が発生する可能性があります。 あなたが分かっているなら、チェックしてください。
Create Shortcut on Desktop
一番下のチェックボックスは「 デスクトップ 」にショートカットを作成します。必要であれば、チェックを入れてください。
Notepad++ v7.4.2 インストールの完了
以上でインストールが完了しました。｢ 完了(F) ｣をクリックすると、「 Notepad++ 」が起動します。
Notepad ++の基本設定
初めて「 Notepad ++ 」を開くときは、設定をカスタマイズすることをお勧めします。一番上のナビゲーションバーの「 設定 」ボタンをクリックし「 環境設定 」や「 スタイル設定 」をクリックしてください
「 環境設定 」で「 新規文書 」には、デフォルト言語を選択するためのドロップダウンボックスが表示されます。毎回、同じ言語でコーディングするなら、使用している言語と一致するように設定することができます。
「 既存のディレクトリ 」はコードエディタがファイルを保存して開くためのデフォルトの場所として使用するコンピュータ上のフォルダです。ファイルを整理しておくこと、非常に便利です。
デフォルトのフォント設定でもし、日本語が文字化する場合は、「 設定 」＞「 スタイル設定 」で フォントを変更してください。
notepad ++ 環境・スタイル設定
「フォント名」のドリップダウンリストから フォント名が「日本語名で表記」されている、フォントを選択して見てください。 変更後は「 保存して閉じる 」ボタンをクリックします。
Notepad ++スタイル設定
また、この「 Notepad ++スタイル設定画面 」では、背景色や文字色フォントサイズを使用言語ごとにカスタマイズできます。
Notepad ++の使用方法
まず、基本の使い方は、「 ファイル 」から「 新規作成 」や「 ファイルの保存 」方法です。
ファイルの新規作成
「ファイル（F）」＞「新規作成（N）」を選択します。
「new 1」と書かれた新しいタブと新規ファイルが開きます。
Notepad ++ファイルの新規作成
ファイルの保存
「ファイル（F）」＞「名前を付けて保存（A）」を選択します。
Notepad ++ファイルの保存
［ファイル名］の入力と［ファイルの種類］を選んで「 保存（S） 」ボタンをクリックします。
Notepad ++ファイルの保存・ファイルの種類
CSSファイルを作成
CSSファイル作成時に「 言語 」＞「 CSS 」を選択してコードを作成して、保存します。
Notepad++ v7.4.2 言語 CSS
HTMLファイルを作成
HTMLファイル作成時にも同じく「 言語 」＞「 HTML 」を選択してコードを作成して、保存します。
Notepad++ v7.4.2 言語 HTML
作成したHTMLファイルをブラウザで表示
下記のサンプル、HTMLファイルとCSSファイルを作成します。この例では、HTML と CSS ファイルは、同じ testフォルダ にいれています。
例）HTMLファイルを作成します、ファイル名は test.html
<link href="test.css" rel="stylesheet" type="text/css">は「 test.css 」とリンクします。
Template Files
<html>
<head>
<title>notepad++｜初心者ガイド | wpm</title>
<link href="test.css" rel="stylesheet" type="text/css"> <!--test.cssとリンクする。-->
</head>
<body>
<h1>notepad++｜初心者ガイド | wpm</h1>
</body>
</html>
例）CSSファイルを作成します、ファイル名は test.css
Template Files
body {
font: normal 13px arial,sans-serif;
margin: 0;
padding: 0;
background: #d4bcbc;
color: #fff;
}
h1 {
font-size: 30px;
}
Notepad++ 本体には、「 ブラウザ プレビュー 」の機能はついていませんが「 Notepad++ 」が ブラウザを立ち上げて表示します。
Notepad++ v7.4.2 HTMLファイルをブラウザで表示
「 実行 」＞「Launch in 」から始まるブラウザ名を選択してクリックします。
Notepad++ v7.4.2から ブラウザを立ち上げる
この様にブラウザで 問題なく表示されます。「 Notepad++ 」本体に プレビュー機能が 無くても 簡単にプレビューできます。（今回、使用している ブラウザは、Chrome です。）