はてなブログで、HTMLをスマホやアプリから思いっきり書く方法
はてなブログの記事を書くとき、スマートフォンから書いているという方も、多いと思います。
ですが、スマートフォンから書く場合、ちょっとHTMLを書き足したいと思っても出来ないし、できても思った通りに記入できない、ということがあります。
そこで今回は、はてなブログでスマホから記事内にHTMLを書く場合に、どんなHTMLも、何でもかんでも思いっきり書ける方法をいろいろ調べ検証したので、そのご報告です。
スポンサーリンク
スマホからHTMLを書く方法
初めに、スマートフォンから記事を書く場合、スマホのウェブブラウザとアプリの2つの方法があるのですが、これはどちらでも良いです。
というか、本当はブラウザの編集画面だけでも事足りるのです。スマホのブラウザでもデスクトップ用の画面を表示させることで、ある程度パソコンに近い編集が可能です。
可能ですが、それと使いやすさがイコールするわけではありません。ていうか、スマホでのデスクトップ用画面は非常に使いにくい。
その使いにくい部分をフォローできるのがアプリです。
アプリはさすがスマホに最適化しているだけあって、非常に使いやすく、さくさく書くことができます。
ですので、はてなブログのアプリはインストールしときましょうね（笑）
なので、基本的にはアプリで記事を書き、カスタムURLなどアプリで出来ないことはブラウザで設定するというのが効率がいいと思います。
ちなみに私のスマホはiPhoneなので、iPhoneアプリの使用感しかわかりません。
ひょっとしたらandroidアプリでは操作方法やインターフェイスなどが違うかもしれませんが、その辺りはご了承ください。
HTMLタグを書ける編集モードの選択
編集モードはそれぞれ長所短所がありますが、スマホからHTMLを書くのであれば「はてな記法モード」か「Markdownモード」のどちらか二択です。
「見たままモード」では、スマホからでは書き込んでる途中で急にpタグがdivタグに変わったりします。その挙動が予測不能すぎるので見たままモードは除外します。*1
で、その残った二つのモードの中でも、HTMLを正確にガンガン書けるとなると「はてな記法モード」を選択すると良いでしょう。
HTMLタグを直接記述できる「pタグ停止記法」
通常ならばMarkdownで十分書くことができます。ですが、途中で直接HTMLを記述する場合は、はてな記法モードのほうが軍配が上がります。
というか、はてな記法モードとMarkdownモードでは直接HTMLを記述することができるのです*2。ですが、Markdownモード場合、要素の種類によってはpタグが段落前後に自動的に挿入されるからです。
つまり<section>タグなどを入れると、思いもよらない所にpタグが挿入されることがあるのです。*3
これでは正確にHTMLタグを書き込むのが非常に難しくなります。
これはそういう仕様なので、どうすることもできません。ですが、はてな記法モードでは『pタグ停止記法』というものがあるので、この自動挿入されるpタグを挿入させなくすることができます。
これを使えば、自分が入れたいHTMLタグを任意の場合に記述することができます。それを利用してHTMLをマークアップしていきます。
pタグ停止記法の記述方法
このpタグ停止記法の書き方は簡単でタグの開始タグから終了タグの前後に><~~><と記入するだけです。><の<は開始タグ左側の<で。終了タグはその逆で><の>が終了タグの右側になります。
記述例としては、このようになります。
><samp style="color:#0066ff;">この文がスタイルで青色になります。</samp><
表示はこのようになります。
この文がスタイルで青色になります。
このように、Markdownのなどのモードでは書き込みにくいHTMLタグも、pタグ停止記法を使えばpタグの自動挿入の影響なく書き込むことができるます。これを使いこなすことで、HTMLをスマホでもきちんと書けれるようになります。
実際マークアップする際の注意点
このように、どんなHTMLタグもダイレクトに記述できるpタグ停止記法ですが、注意点が無い訳ではありません。
それはpタグ停止記法の問題というよりは、はてな記法ならではの注意点です。それは、はてな記法でははてな独自のマークアップを自動的に行うため、想定したものと違うマークアップになる場合があるということです。
例えば、はてな記法では「* ~~」で大見出し（h3）がマークアップされるのですが、この場合、h3タグだけではなく、その見出しのアウトラインを囲むように<div class="section">が自動的に挿入されるのです。
これは、そういう仕様なので、どうのこうのできる物ではありません。ですが、便利なpタグ停止記法を利用するのに比べたら、気をつければ十分回避できる、ほんと些細なものです。
私が確認したものでは、以下の記法で思いもよらないマークアップをしてくるので、これらを注意すれば、それほど気にすることは無いでしょう。
- 見出し記法全般
見出しの暗黙的なアウトラインを、自動的にdivタグで囲む。 - pre記法全般
codeタグが挿入されず、ソースコードをcodeタグでマークアップすることが出来ない。
締め
このような方法を使えば、スマートフォンからでもHTMLを編集しなが記事を書くことができます。できますが、やはり少々面倒臭いです（笑）
実際この方法でマークアップをするなら、ある程度のHTMLタグをユーザー辞書に登録して使うのが良いでしょう。いちいち書くのは大変ですからね。
今回の記事は、個人的なメモ用として書いた部分もありますが、読まらた方の何かの参考になってくれれば幸いです。
ちなみに、今回のこの記事は、iPhoneアプリから全て記述しました。
（
新しくHTMLだけで記述できる「HTMLモード」が追加されましたが、現段階ではスマートフォンから編集することができません。
スポンサーリンク
