テンプレートカスタマイズをよく行うFC2ブロガーにSublime Text3をおすすめします

htmlやCSSというのは何かしらのミスが有った時に、ブラウザの画面では問題の特定が非常に困難です。
特にスペースなど目に見えないものを探す 時にテンプレート管理画面、つまりブラウザ画面上で行うには相当な苦労を要します。
細かな作業をする際にはhtmlエディターが有った方が絶対捗りますしミスの可能性も低くなります。

無料のエディターはいろいろあるのですが、やっぱり総合的に見て使いやすいと思うのはWin, Mac共に「恋に落ちるエディター (The text editor you'll fall in love with)」という触れ込みで有名な Sublime Text3 かなぁ、と思いますので、今回は導入の仕方などをご紹介します。
日本語化など少し手間がかかりますが、初期設定さえ済ませれば後はかなり快適に使用できるかと思います。

で、html内で全角スペースを使ってはいけませんよ という注意勧告を補完する記事でもありますので、下記のリンク先内容も事前にお読み頂ければと思います。

htmlの絶対的NGそれは「全角の利用」

やっぱりすごく多いんですね。うっかり全角を利用して全てが台無しになっている というケース。 母国語が日本語の場合は普段からキーボードが「ひらがな」の状態になっているのではないかと思います。 htmlを操作する際にはまず最初に「半角英数字」にキーボードを変換する ことを癖づけされると良いと思います。...

vanillaice000.blog.fc2.com

HTMLエディターとは

文字通りhtmlやCSSやJSなど、マークアップ言語・プログラミング言語などを扱う専用のエディター(文書を扱うアプリケーション)です。
Windowsにはメモ帳、Macにはテキストエディットが標準搭載されており、共にhtmlなどを扱うことも可能ですが、単純な「テキスト(文章など)」に利用されることも仮定していますので見た目がシンプルで、白紙のノートみたいな感じですね。
htmlを扱うには

• 英数字が見やすいこと
• インデントの様子がわかりやすいこと
• 半角スペースと全角スペースの区別ができること

などが重要です。
html, CSS, JSなどは原則として 半角英数字のみ を利用しますので、この種の文字列が見やすいというのは大事です。
そして特にhtmlではインデント(字下げ, 各行の開始位置揃え)が多用されており、それがそのままネスト(入れ子)の状態を示しています。
日本人にとってはこのインデントに存在によって全角使用のミスが発生します(詳細は後述)
html内での全角使用は即エラーですから、アルファベットを全角で入力してはいけないというのはもちろんのこと、目に見えない全角のスペース にも注意しなければいけません。
専用のエディターを使うことでいろいろな面での労力やミスを減らせるかもしれません。

Sublime Text3をインストール

Sublime Text - the sophisticated text editor for code, markup and prose

Available on Mac, Windows and Linux

www.sublimetext.com

上記がダウンロードページへのリンクです。
自身のデバイスと合致したものを選ぶようにします。最新バージョンは3です。

日本語化に必須の作業

Package Controlをインストール

Package ControlというのはSublime Text用に開発されている諸々の追加機能を利用できるようにするためのものです。これから行う日本語対応パッケージのインストール前に必ず必要になります。

1. Sublime Text3を開く
2. メニュー内にある「View」をクリックし「Show Console」を選択してコンソールを開く
3. Package Controlインストールページ にある文字列をコピペして Enter/ Return キー押下

この内容を…
ここに貼り付け。

ConvertToUTF8をインストールして日本語対応

日本語の Shift_JIS を扱えるようにしておかないと入力した日本語全てが 文字化け してしまいますので必須です。

1. メニュー内にある「Tools」をクリックし「Command Pallete」を選択
2. convert と入力して「ConvertToUTF8」を探す
3. 見つけたらクリックしてインストール

すぐに見つかると思います。名称の後ろの文言が多少違うかもしれませんが、ともかく名前が ConvertToUTF8 です。

最低限これだけで使えるようになります。他にも優秀なパッケージがありますので「こんなのあったら便利だなぁ」と感じた時にでも調べてみると良いと思います。

具体的なテンプレート編集の仕方

Sublime Textを入手し、初期設定が済みましたら具体的な作業に入ります。初心者向けなのでなるべく細かく説明 ^^;
テンプレート内容はhtmlとCSSがワンセットですが、今回はhtmlの方を例に取ります。

編集作業の前にまず複製を取る

デフォルトのソースコードのなにかしら手を加える時には事前にテンプレートの複製を取るようにしてください。
作業が上手く行かずぐちゃぐちゃになってどうして良いかわからない、といった状態に陥ることもありますが複製があれば一旦リセットして新たに始められます。

複製を取り忘れた場合には 手元にあるテンプレートの名称を変更 してから配布ページで再DLを行えます。同じ名称のものはDLできませんので注意。
例: Son-Of-Valkyrie → Son-Of-Valkyrie1

テンプレート管理画面からhtml内容を移植

htmlのソースコードを Ctrl + A で全選択。
(Macユーザーさんはこれを含み以降の内容の Ctrl を Command に置き換えてください)
内容全選択時にマウスでドラッグ選択して… なんてことをしていたら内容の拾い忘れが生じたりしますし効率が非常に悪いので、ショートカットキーで一括選択をしてください。

上段がhtmlです。htmlソースコードが書かれているボックス内のどこでも良いので一旦カーソルを合わせてアクティブな状態にしてから上記ショートカットで全選択します。

この状態を確認し Ctrl + C でコピー。

開いてあるSublime Textに Ctrl + V でペースト。

移したSublime Textの方で作業をし、今度は逆のことを行うわけですね。Sublimeを全選択してテンプレート管理画面の「HTML編集」の方へペースト。もちろんペーストをする前に既存の内容は全選択後 delete キー押下で一括消去して白紙状態にしてからです。

今までブラウザ上で行っていた作業をSublime Textの方でするというだけのことです。難しく考える必要はありません。

効率化のためのショートカット

Sublime Text独自のショートカットももちろんありますので使いこなします。

行複製

複製したい行にカーソルを合わせ(ドラッグ選択の必要はありません)、
Ctrl + Sift + D

文字列検索(重要！)

これが非常に大事なので是非使ってください。ブラウザ上のページ内検索と同じ
Ctrl + F で下部に入力場所が出てきますので探したい文字列を入力して
Enter/ Return です。

この方法で html内に紛れ込んでいる全角スペースも探すことができます。
全角スペースを可視化するパッケージもありますが、検索だけで十分いけるのではないかと思います。

日本語は 全角 なわけですが念の為説明しておくと「htmlに全角利用不可」というのは タグとしては使えない という意味です。

例) タグの一部(ブラケット)が全角

＜p＞
This text is written in English.
＜/p＞

例) 正しい半角

<p>
This text is written in English.
</p>

例) タグではなく内容が全角

<p>
この文章は日本語で書かれています。
</p>

上記は記号など可視のものが全角だった場合ですが、不可視であるスペースの全角ももちろんNG です。
ブラウザ上でテンプレート修正を行う方によく起こるミスがこれです。

これには理由というか原因があってですね、例えばGoogle Analyticsなんかのコードを head情報 内に追加する際など。
コピーして貼り付けるだけなんですが、ソースコード内のインデントを踏襲しようとして うっかり全角スペースを入れてしまうんですね。
このミスがもう本当に多い んです。

仮にGoogleの管理者用コードを入れる作業をブラウザ上で行うとします。

Googleの某関連設置の目印はここです。</head> の直前ですね。
google-site-verificationの場合はもっと前でも良いのですが特に無理する必要はなくここを目印にされるのが安全です。Analyticsなども同様。

① 正しい貼り付け。

② 正しい貼り付け。

③ 間違った貼り付け (構文エラー)

これみなさんそれぞれ何が違うかわかりますか。特に②と③の違い。
①はコードの前にスペース無し。これはOKです。
②はコードの前に半角スペース2つ。これもOKです。
③はコードの前に全角スペース1つ。これはいけませんね。この全角スペースによってhtml構文的にはエラーとなり、この部位だけでなく以降の内容全てに悪影響を及ぼします。

インデントというのは通常半角スペース2つで行います。見た目的には全角スペース1つとほぼ同じなんですね。
インデントは無理につける必要は全くありませんので、初心者の自覚がある方は貼り付けたい一つ前の要素の末尾にカーソルを合わせて改行したら何もせずに(スペースなどを入れずに)すぐに貼り付けを行えば良いんです。
ところが多くの方が「ソースの見た目」を維持しようという目的だと思いますが、インデントを入れようとします。しかも全角で(笑)

コード内の全角をブラウザ上で判別しようと思うとかなり難儀ですが、Sublimeの検索機能を使えば一発でわかります。

複数該当する場合には Enter/ Return キーをポンポンと押していけば順繰りに該当箇所を教えてくれます。

head情報内には通常目に見える要素は置きません。画像表示によってアクセスを取得するタイプの解析コードぐらいです。
なので全角スペースが紛れていても気が付かないことが多いんですね。
テンプレートのデザインによっては ヘッダーやナビゲーションが下へ下がって隙間ができてしまう など見た目の問題がすぐに分かる場合もありますが。
現時点で隙間があるという方は全角の使用を疑ってみると良いと思います。あるいはFC2独自の問題としては FC2アクセス解析のソーシャルタイプ を利用しても隙間ができます。まぁ隙間の原因は大抵このどっちかよね (´・ω・｀)

htmlというのは要素間や要素の前後のスペースもルールがあります。日本語の全角スペースは「文字」として認識されてしまいますので、
目には見えないが文字がある = 隙間となって表示
という理屈です。でもってhead内のそれは構文エラー。しかもクリティカルなやつ。

たった2つだけショートカットをご紹介しましたが、正直初心者の方なら使うのこのぐらいじゃないかと思います。無理に使って「これってどうやるんだったっけ？」なんてググってたら逆に効率悪くなるのでほどほどで。

--- 2018.11.6 追記

アンドゥ(undo, 元に戻す)とリドゥ(redo, やり直す)ぐらいは必要でしょうかね。以下の通りです。

UNDO --- Ctrl + U

REDO --- Ctrl + Y

--- 追記ここまで

まとめ

初心者向け記事ということでもう少しコツというか。
既存のhtmlやCSSのファイルをSublimeにドラッグ&ドロップして開いた時に日本語が文字化けしている場合。日本語化を済ませていてもしばしば起こります。
そんな時はそのファイルを一旦ブラウザの新規タブにドラッグ&ドロップし、その内容を全コピーしてSublimeに放り込むと修正される場合があります。ほぼこれでOK (´・ω・｀)

あと、htmlファイルを保存するには拡張子を .html に、CSSなら .css、JSなら .js とこれはまぁ当たり前のことなんですが、htmlファイルというのはhtml拡張子で保存してしまうとブラウザで開きたい場合には 描画変換されてしまいます ので都合が悪いことも。
しかもFC2ブログというのは独自変数などを利用していますのでまともな描画が行われません。
常にhtml構文として開きたい場合には .html ではなく .txt のプレーンテキストとして保存した方が便利「かも」しれません。

また、既出ですがFC2ブログのhtmlは独自変数が多用されており、エディター的にはその文字列は理解不能・意味不明なものという認識ですのでちょっとエラーっぽい表示になったりもします。
これはFC2ブログの特性上致し方ないことです。

Sublime Text、初心者から上級者まで幅広く使える良エディターだと思います。他にもBracketsなどが有名ですがSublimeに比べて重たいんですね。
Sublimeは動作も軽いですし、停電など不測の事態が起きてもそれまでの履歴をちゃんと保持してくれる点が優秀。Bracketsは保存前の内容は全部消え失せます(笑)
フリーズの場合はどうだったかな。私個人は今までにフリーズ経験したことないんじゃないか。たぶん (´・ω・｀)

フリーで利用できますがたまに「良かったら寄付して欲しい…」的な案内が出ることがあります。なので本来はフリーウェアではなくシェアウェアなんですね。
便利だ！使える！素敵！と思われましたら是非donate(寄付)を。私はしましたよ (o'ω')ﾉ
ですがフリーでも全機能が使えます。なんて太っ腹。
この機会もあなたも恋に落ちてみてはいかがでしょうか。