サクラエディタのHTMLエディタカスタマイズ
公開 2023/10/22 15:57
最終更新
2024/07/12 19:53
・未だにHTMLを手打ち
・文章を作ってからHTMLにすることが多い
・スタイルシートやJavaScriptはいろんなサイトさんを参考にしてほぼコピペだからあまり手打ちしない（テヘッ
という方向けのサクラエディタのHTMLエディタカスタマイズです
ある程度HTMLとサクラエディタのことがわかっている方向けです。
サクラエディタは32bit・v2.4.2でのデータです。
サクラエディタ
https://sakura-editor.github.io/
今こんな感じです。
hosoboso/SakuraEditor-Macro: サクラエディタをHTMLエディタとして使うためのマクロ
https://github.com/hosoboso/SakuraEditor-Macro
ここに個人的に使い勝手が良いやつをまとめています。
タグ手打ちでどうしても欲しいのはなんとなく自作しました。
<p>hogehoge</p>
のようにテキストを挟むタグ変換。 ちょっと手直しして<div>とかも作ることが可能。
選択テキストhogehogeを、
<a href="hogehoge" target="_blank">hogehoge</a>
に変換。
選択テキストの末尾に<br>を追加。
選択テキストをリストタグに変換。
選択テキストをテーブルタグに変換。
サクラエディタの公開マクロ（http://sakura.qp.land.to/?Macro%2F%A5%AB%A5%C6%A5%B4%A5%EA）の中にとても便利なものがあるので紹介します。
ソースコードをJScriptファイル（.js）で保存してマクロ登録します。
これで文字通りに直前のタグを閉じてくれます。
手打ちだとタグの閉じ忘れはよくあるのでとっても助かります。
「とじる」なので私は「Ctrl + T」に登録しています。
<div class="xxx">～みたいなタグの閉じ忘れであっても</div>を入力してくれる賢いマクロです。
<a href="../aaa.html">bbb</a>のようなコードがある時に、「aaa.html」って何だっけ？ とか、「aaa.html」をちょっと編集したいんだけどフォルダから探して開くのめんどいわーという時、「../aaa.html」を選択してからマクロ実行すると「aaa.html」をサクラエディタで開いてくれるという、ちょっとした時に便利なマクロ。
サクラエディタとは離れますが、リンク関係は、ブラウザの拡張機能を入れてフォーマット登録しておくと更に便利です。
FireFoxなら「Link Text and Location Copier」
https://addons.mozilla.org/en-US/firefox/addon/link-text-and-location-copier/
Chrome拡張機能なら「Format Link」
https://chrome.google.com/webstore/detail/format-link/
ファイル→ブラウズ をツールバーに置いておく（ファイルをブラウザでプレビューしつつ編集）
だけはあった方が良いかと。
あとはマウス押して誤爆したら嫌なので使わないツールは全部消しています。
そのほか色設定とかタイプ別設定は下にまとめました。
https://github.com/hosoboso/SakuraEditor-Macro/tree/main/setting
・複数行をTABインデントしたい時は、その複数行を選択してTABキーで一括でインデント。SPACEインデントも同じ仕様。
・編集→高度な操作→「このファイル名をコピー」または「このファイルのパス名をコピー」でファイル間のリンクがまあまあ作りやすいかも。
・エクスプローラーでファイルをコピーし、サクラエディタに貼り付けると、ファイルのフルパスを貼り付けることが可能。複数ファイルでもOK。
・検索→ファイルツリー でファイルのあるフォルダ一覧を横にツリー表示できる。
これはサクラエディタは関係ないけども……
0（ゼロ）やO（アルファベットのオー）の見分けがしやすい等の利点があるプログラミング向けフォントを設定するのがおすすめです。
以下はライセンスが緩め（個人利用なら制限なしと考えてもOK）なフォントになりますが、利用規約などはきちんと読んでください。
私は『白源 (はくげん／HackGen)』を愛用しています。
https://github.com/yuru7/HackGen
同じ作者さんで『PlemolJP』も見やすいかと思います。
https://github.com/yuru7/PlemolJP
同じ作者さんで『Bizin Gothic』のDiscord版が、HackGenの次世代版？ みたいな感じで期待大。
https://github.com/yuru7/bizin-gothic
他の作者さんだと
源暎モノゴ
https://okoneya.jp/font/genei-mono-go.html
M PLUS 1 Code
https://mplusfonts.github.io/
などお好みで。
・文章を作ってからHTMLにすることが多い
・スタイルシートやJavaScriptはいろんなサイトさんを参考にしてほぼコピペだからあまり手打ちしない（テヘッ
という方向けのサクラエディタのHTMLエディタカスタマイズです
ある程度HTMLとサクラエディタのことがわかっている方向けです。
サクラエディタは32bit・v2.4.2でのデータです。
サクラエディタ
https://sakura-editor.github.io/
今こんな感じです。
目次
マクロ #
hosoboso/SakuraEditor-Macro: サクラエディタをHTMLエディタとして使うためのマクロ
https://github.com/hosoboso/SakuraEditor-Macro
ここに個人的に使い勝手が良いやつをまとめています。
タグ手打ちでどうしても欲しいのはなんとなく自作しました。
p.js #
<p>hogehoge</p>
のようにテキストを挟むタグ変換。 ちょっと手直しして<div>とかも作ることが可能。
href.js #
選択テキストhogehogeを、
<a href="hogehoge" target="_blank">hogehoge</a>
に変換。
brreplace.mac #
選択テキストの末尾に<br>を追加。
list.js #
選択テキストをリストタグに変換。
table.js #
選択テキストをテーブルタグに変換。
JScriptマクロ #
サクラエディタの公開マクロ（http://sakura.qp.land.to/?Macro%2F%A5%AB%A5%C6%A5%B4%A5%EA）の中にとても便利なものがあるので紹介します。
Close Last Tag（直前の閉じていない HTML/XML タグを閉じる） #
https://sakura-editor.github.io/bbslog/sf/macro/546.htmlソースコードをJScriptファイル（.js）で保存してマクロ登録します。
これで文字通りに直前のタグを閉じてくれます。
手打ちだとタグの閉じ忘れはよくあるのでとっても助かります。
「とじる」なので私は「Ctrl + T」に登録しています。
<div class="xxx">～みたいなタグの閉じ忘れであっても</div>を入力してくれる賢いマクロです。
openFile（選択したテキストをファイル名として開く） #
https://sakura-editor.github.io/bbslog/sf/macro/134.html<a href="../aaa.html">bbb</a>のようなコードがある時に、「aaa.html」って何だっけ？ とか、「aaa.html」をちょっと編集したいんだけどフォルダから探して開くのめんどいわーという時、「../aaa.html」を選択してからマクロ実行すると「aaa.html」をサクラエディタで開いてくれるという、ちょっとした時に便利なマクロ。
サクラエディタとは離れますが、リンク関係は、ブラウザの拡張機能を入れてフォーマット登録しておくと更に便利です。
FireFoxなら「Link Text and Location Copier」
https://addons.mozilla.org/en-US/firefox/addon/link-text-and-location-copier/
Chrome拡張機能なら「Format Link」
https://chrome.google.com/webstore/detail/format-link/
設定 #
ファイル→ブラウズ をツールバーに置いておく（ファイルをブラウザでプレビューしつつ編集）
だけはあった方が良いかと。
あとはマウス押して誤爆したら嫌なので使わないツールは全部消しています。
そのほか色設定とかタイプ別設定は下にまとめました。
https://github.com/hosoboso/SakuraEditor-Macro/tree/main/setting
HTML編集の上で覚えておくと便利かもしれない機能 #
・複数行をTABインデントしたい時は、その複数行を選択してTABキーで一括でインデント。SPACEインデントも同じ仕様。
・編集→高度な操作→「このファイル名をコピー」または「このファイルのパス名をコピー」でファイル間のリンクがまあまあ作りやすいかも。
・エクスプローラーでファイルをコピーし、サクラエディタに貼り付けると、ファイルのフルパスを貼り付けることが可能。複数ファイルでもOK。
・検索→ファイルツリー でファイルのあるフォルダ一覧を横にツリー表示できる。
フォント #
これはサクラエディタは関係ないけども……
0（ゼロ）やO（アルファベットのオー）の見分けがしやすい等の利点があるプログラミング向けフォントを設定するのがおすすめです。
以下はライセンスが緩め（個人利用なら制限なしと考えてもOK）なフォントになりますが、利用規約などはきちんと読んでください。
私は『白源 (はくげん／HackGen)』を愛用しています。
https://github.com/yuru7/HackGen
同じ作者さんで『PlemolJP』も見やすいかと思います。
https://github.com/yuru7/PlemolJP
同じ作者さんで『Bizin Gothic』のDiscord版が、HackGenの次世代版？ みたいな感じで期待大。
https://github.com/yuru7/bizin-gothic
他の作者さんだと
源暎モノゴ
https://okoneya.jp/font/genei-mono-go.html
M PLUS 1 Code
https://mplusfonts.github.io/
などお好みで。
