「やった」課

「やる」と心の中で思ってたら、すでに行動は終わっていたんだ

はてなブログの編集モード「HTML」を初心者が活用する方法!!

b.hatena.ne.jp

えっ HTMLモード?!なにそれ便利かも!
って思って早速使ってみました!!

やはり上級者向けですね…^^; それにはてな記法・Markdownモードに慣れている方にはほとんどメリットないのかも…。

 

でも見たままモードユーザーの方はちょっと知っておきたい機能があります。早速ご紹介していきましょう!

HTMLモードとは?

「HTML」モードでは、 GUI(WYSIWYG)エディタも、はてな記法やMarkdownといった簡易記法もなく、記述したHTMLをインデント等も含めてそのまま保存し、そのままレンダリングして表示します。

いちからHTMLで執筆した記事がすでにある場合や、HTMLの細部にまで思い通りに記述したいときなどにご利用いただけます。
(引用:はてなブログ開発ブログ:http://staff.hatenablog.com

※はてなPro(有料会員)限定機能です。 

これだけ見るとただシンプルにHTMLコードで文章書きたい人向けでしかないんですが、一つ特徴があります。

それはリアルタイムプレビューを見ながらHTML編集ができるということ

リアルタイムプレビューとは?

f:id:mw-matrixa:20170525124929j:plain

はてな記法・Markdown・HTMLモードの編集ウィンドウ右上に表示されているマーク(赤枠)をクリックすると現れる画面半分に表示されるウィンドウで、編集内容がリアルタイムで確認できます!

f:id:mw-matrixa:20170525125008j:plain

こんな感じ。

今までも「はてな記法」・「Markdown」モードでは使えたみたいですが、見たままモードでは活用できませんでした。なので見たままユーザーはプレビューのチェックのたびに編集ウィンドウとプレビューウィンドウを行ったり来たりする必要がありました。

その手間をちょっと省けるとしたら、これ結構便利じゃないですか??
そう、HTMLモードは見たままモードの人がHTMLをいじる時にに局所的に使うことができます!
具体的にはHTMLコードでアイコンフォントや画像を貼り付ける際や、公開前のチェック・修正に使えると思います!

見たままモードの編集中にHTMLモードを活用する方法

①普段通り見たままモードで文章を記述して、見出しや装飾を付ける。

②HTML編集タブに移動して、記述内容を全選択→コピー(Ctrl+A→Ctrl+C)する。
 (必要ならお好きな場所に保存しておいてバックアップを)

f:id:mw-matrixa:20170525210347j:plain③編集モードをHTMLモードに切り替え(ウィンドウ内の記載はすべて消えます)、先ほどコピーした内容を張り付ける。

f:id:mw-matrixa:20170525210427j:plain④HTMLモードでリアルタイムプレビューを見ながらコードを張り付けたり、編集をする。

f:id:mw-matrixa:20170525210451j:plain⑤内容を再度全選択→コピーして見たままモードに戻り、HTML編集に貼り付ける。


…まあ正直面倒くさいので、HTMLをしっかり修正・最適化したいときに一部オススメ、といったところでしょうか^^;
僕はHTMLの超絶ショボ初心者なので、こんなふうにかなり使い方を限定すると思います笑

注意点

HTMLモードで記事を一度公開すると、同じ記事を編集する際に他のモードは選べません(他のモードも同様)!なので最終的には自分が一番使いやすいモードで記事を公開すること!

まとめ

・はてなブログのHTMLモードはHTMLで文章書きたい人向けのモード!
・HTML編集しながらリアルタイムプレビューを見れるのでHTML編集には最適!
・見たままモードユーザーも工夫次第でHTML修正に利用可能!

もちろんもっと有効な活用方法もあると思います!「いや その使い方はおかしい」などご意見ご指摘あれば、ぜひぜひコメントなどでお知らせいただけるとありがたいです!!

 

以上、情報共有でした!