kz’s blog

興味のあることについて書いていきます。

はてなブログのカスタマイズで使用できるショートカット【コメント】

はじめに

はてなブログをカスタマイズする際は、各種 HTML 入力欄にコードを入力します。

僕は入力する際は、何のためのコードなのかをコメントとして残しておきますが、毎回手動で入力しておりました。

コメントはこんなやつ
<!-- -->
/* */
//

このコメント入力、実はショートカットキーが存在しておりまして、たまたま気づいたので記事として残しておきます!

ただし、ショートカットキーが有効な場所と無効な場所がありますのでご注意下さい。

コメントのショートカットキー

ショートカットキーを打つ毎に、コメントの ON/OFF が切り替えられます。

Windows の場合

ctrl+/

Mac の場合

command+/

ショートカットキーが有効な場所

PC 用

タイトル下

デザイン > カスタマイズ > ヘッダ

f:id:kz62:20180816211713p:plain:w300

記事上・下

デザイン > カスタマイズ > 記事

f:id:kz62:20180816211456p:plain:w300

フッタ

デザイン > カスタマイズ > フッタ

f:id:kz62:20180816211234p:plain:w300

スマホ用

スマホ用は上記 PC 用に加えて、フッタのページャ下も有効になっております。

おわりに

いかがでしたでしょうか。

コメントはソースコードを書く上で非常に大切な要素になります。

コメントが記載されていることによって、後から見たときに何のためのコードかはっきり分かるので、是非ショートカットキーをご活用頂き、快適なカスタマイズをおこなって下さい。

おまけ

どれだけショートカットキーを活用しても、はてなブログのコードエディタは使い勝手がよいとは言えません。

具体的には、入力エリアが狭くて見通しが悪かったり、シンタックスハイライトが微妙だったりします。

シンタックスハイライト (英: syntax highlighting, 構文強調[1][2][3][4]) とは、テキストエディタの機能であり、テキスト中の一部分をその分類ごとに異なる色やフォントで表示するものである。シンタックスカラーリング (syntax coloring) とも。

この機能により、プログラミング言語やマークアップ言語といった構造化された言語において、その構造や構文上のエラーが視覚的に区別しやすくなるため、ソースコードの記述が容易となる。エディタによってはシンタックスハイライトと、スペルチェックやコード畳み込みといった、その他の機能を統合して提供するものもある。 Wikipedia

少しいじるだけだったり、簡単なコードの場合はあまり困らないですが、がっつりソースコードを書く場合は VS Code 等のテキストエディタを使用することをおすすめします!

code.visualstudio.com