notepad++|初心者ガイド

WordPress のテーマやプラグインのファイル編集に、この Notepad++ をインストールから使い方を学習します。WordPressのファイル編集に一般的なワープロソフト使用するとファイル壊してしまいます。Notepad++ は、初心者にも簡単に使えて、正しく WordPress ファイルを編集できます。

Notepad++とは

Notepad ++バージョン7.4.2

Notepad ++バージョン7.4.2

「Notepad ++」は、Windows用の無料で使えるオープンソースのテキスト・コードエディタです。初心者には使いやすく、上級者には非常に強力で「 PHP や JavaScript・HTML・CSS 」などを含む多くのプログラム言語の構文のコードが見やすく強調表示がされます。

また、FTPプラグインが組み込まれているので、WordPressを運用している、サーバーに接続してファイルを直接編集することもできます。

Notepad ++では、以下の言語がサポートされています。

言語・文字コードの対応
ActionScriptCSSLISPRC
ADADLuaRuby
aspDIFFMakefileScheme
AssemblyFlash ActionScriptMatlabShell
autoItFortranNSISSmalltalk
bashGui4CLIObjective-CSQL
BatchHaskellPascalTCL
CHTMLPerlTeX
C++ini filephpVB / VBS
C#InnoSetupPowerShellVerilog
CamlJavaPostscriptVHDL
CMakeFileJavascriptProperties fileXML
CobolJSPPythonYAML
Coffee scriptKiXtartR
※バージョン6.6.6以降

Notepad ++のダウンロード

Notepad ++をダウンロードするには、このDownload Notepad++ ページにアクセスして「 zipファイル(Notepad++ zip package)」または、「 インストーラーパッケージ(Notepad++ Installer) 」をデスクトップなどで、ご自身のわかりやすい場所にダウンロードしてください。

notepad ++ ダウンロードページ

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

Notepad++ インストーラー

installer.exeファイルを右クリックし、[ 管理者として実行 ]を選択します。もし、セキュリィーの警告メッセージが出たら「 実行(R) 」ボタンをクリックします。

セキュリィーの警告メッセージ

セキュリィーの警告メッセージ

次にNotepad ++の表示言語を選択できるメッセージがでます。

日本語環境のPCでインストールしている場合はデフォルトで日本語表示の「Japanese」に選択されています。

変更する場合は「Japanese」をクリックしてください。数十種類の言語名がセレクト表示されます。「 OK 」をクリックします。

表示言語の選択画面

表示言語の選択画面

次の画面が出でます、そのまま「 次へ(N)> 」をクリックします。

Notepad++ v7.4.2 セットアップ メッセージ

Notepad++ v7.4.2 セットアップ メッセージ

次の画面が出でます、契約書のすべての条件に同意するならば、[ 同意する ] を選んでインストールを続けてください。

Notepad++ v7.4.2 ライセンス契約書

Notepad++ v7.4.2 ライセンス契約書

インストール先のフォルダを確認されます。

Notepad++ v7.4.2を以下のフォルダにインストールします。異なったフォルダにインストールするには、[ 参照 ] を押して、別のフォルダを選択してください。 続けるには [ 次へ ] をクリックして下さい。

インストール先のフォルダを選ぶ

インストール先を選ぶ

一番上のLocalizationは表示言語関連のファイルです。

Localization は必要な言語ファイルを選択

インストールしたいコンポーネントにチェックを付けて下さい。不要なものについては、チェックを外して下さい。 続けるには [次へ(N)>] をクリックして下さい。

Notepad++ v7.4.2のインストール オプションを選ぶ

Notepad++ v7.4.2のインストール オプションを選ぶ

次の画面は、英文になります。

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 セットアップ終了

Notepad++ v7.4.2 インストールの完了

以上でインストールが完了しました。「 完了(F) 」をクリックすると、「 Notepad++ 」が起動します。

Notepad ++の基本設定

初めて「 Notepad ++ 」を開くときは、設定をカスタマイズすることをお勧めします。一番上のナビゲーションバーの「 設定 」ボタンをクリックし「 環境設定 」や「 スタイル設定 」をクリックしてください

「 環境設定 」で「 新規文書 」には、デフォルト言語を選択するためのドロップダウンボックスが表示されます。毎回、同じ言語でコーディングするなら、使用している言語と一致するように設定することができます。

「 既存のディレクトリ 」はコードエディタがファイルを保存して開くためのデフォルトの場所として使用するコンピュータ上のフォルダです。ファイルを整理しておくこと、非常に便利です。

デフォルトのフォント設定でもし、日本語が文字化する場合は、「 設定 」>「 スタイル設定 」で フォントを変更してください。

notepad ++ 環境・スタイル設定

notepad ++ 環境・スタイル設定

「フォント名」のドリップダウンリストから フォント名が「日本語名で表記」されている、フォントを選択して見てください。 変更後は「 保存して閉じる 」ボタンをクリックします。

Notepad ++スタイル設定画面

Notepad ++スタイル設定

また、この「 Notepad ++スタイル設定画面 」では、背景色や文字色フォントサイズを使用言語ごとにカスタマイズできます。

Notepad ++の使用方法

まず、基本の使い方は、「 ファイル 」から「 新規作成 」や「 ファイルの保存 」方法です。

ファイルの新規作成

「ファイル(F)」>「新規作成(N)」を選択します。

「new 1」と書かれた新しいタブと新規ファイルが開きます。

ファイルの新規作成

Notepad ++ファイルの新規作成

ファイルの保存

「ファイル(F)」>「名前を付けて保存(A)」を選択します。

Notepad ++ファイルの保存

Notepad ++ファイルの保存

[ファイル名]の入力と[ファイルの種類]を選んで「 保存(S) 」ボタンをクリックします。

Notepad ++ファイルの保存・ファイルの種類

Notepad ++ファイルの保存・ファイルの種類

CSSファイルを作成

CSSファイル作成時に「 言語 」>「 CSS 」を選択してコードを作成して、保存します。

Notepad++ v7.4.2 言語 CSSコード

Notepad++ v7.4.2 言語 CSS

HTMLファイルを作成

HTMLファイル作成時にも同じく「 言語 」>「 HTML 」を選択してコードを作成して、保存します。

Notepad++ v7.4.2 言語 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++ 」が ブラウザを立ち上げて表示します。

HTMLファイルをブラウザで表示

Notepad++ v7.4.2 HTMLファイルをブラウザで表示

「 実行 」>「Launch in 」から始まるブラウザ名を選択してクリックします。

Notepad++ v7.4.2から ブラウザを立ち上げる

Notepad++ v7.4.2から ブラウザを立ち上げる

この様にブラウザで 問題なく表示されます。「 Notepad++ 」本体に プレビュー機能が 無くても 簡単にプレビューできます。(今回、使用している ブラウザは、Chrome です。)