ボク自身、非プログラマーなので、HTMLタグという言い方が正しい表現かどうかは分かりませんが、ボクなりに振り返りながら書いていきたいと思います。

また人によって、今回と次回の流れが逆になる人もいるかと思いますが、今回はまず本文の書き方から追っていきたいと思います。

HTML要素を少しだけ理解しよう。

そもそもWordPressではどんなファイルが作られるのでしょうか？

用語集 – WordPress Codex 日本語版には、

WordPress は、XHTML 1.0 Transitional 標準の準拠を目指している。

とあります。

さて、それではXHTMLとは何でしょうか？

先程と同じページから引用すると、

XHTML（Extensible HyperText Markup Language）は、すべての Web ページを作るのに使われる HTML に引き続いて作られたW3C 標準言語。CSS や JavaScript と共に使われることが多い。

とあります。

WikipediaでもXHTMLをみてみましょう。

Extensible HyperText Markup Languageでは、

Extensible HyperText Markup Language（エクステンシブル ハイパーテキスト マークアップ ランゲージ）、略記・略称：XHTML （エックスエイチティーエムエル）は、SGMLで定義されていたHTMLをXMLの文法で定義しなおしたマークアップ言語である。その仕様はHTMLと同じくW3Cによって勧告されている。

ようするに、HTMLの親戚？兄弟？親？子？みたいなもののようです。

WordPressを普段使う分にはあまり意識しなくてもいい部分だとは思いますが、XHTMLで書かれていることは知っておいたほうがよさそうです。

HTML文書とは？

では、HTML文書とはどういうものなんでしょう？

これもwikipediaHTML要素 – Wikipediaからの引用をすると、

HTML文書は、複数のHTML要素が入れ子になって構成されている。

とあります。HTML要素？これも同じページから引用すると、

HTML要素（HTMLようそ、英: HTML element）は、HTMLでマークアップした文書を構成するもの

とあります。

文書を構成するもの？続きを見てみましょう。

要素（element）は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成される。要素は<と>で囲まれる開始タグで始まり、</と>で囲まれる終了タグで終わる。また、開始タグと終了タグではさまれた部分が内容となる。

なるほど。ボクがHTMLタグと理解していたものはHTML要素だったということのようです。

HTML要素を少しだけ知ろう。

WordPressでブログを書いているとHTML要素はそんなに意識していなくてもブログを書けてしまいます。

しかし、iPhoneから更新しようとする場合はデスクトップのように直接ダッシュボードに書き込みながらプレビューできないので、普段自分がブログで使っているHTML要素を知っておく必要があります。

再び先程のHTML要素から引用すると、

HTML文書は、ヘッダ部分と本体部分の2つに分けることができる。2007年11月現在で有効なスキーマでは、ルート要素であるhtml要素の直下にはhead要素、body要素をこの順で1つずつだけ取ることができる。

とあります。WordPress標準アプリではタイトルは別に書く場所があるので、HTML文書の本体部分、つまりbody要素部分だけを書けばいいということになります。（するぷろ for iPhoneにデータを渡すならタイトルを1行目に書くことができます。）

さらに、The global structure of an HTML document (ja)によると、

HTMLの要素のうち、BODY要素に出現し得る要素のあるものは「ブロックレベル」と呼ばれ、他のものは「行内」 (これは「テキストレベル」としても知られている)と呼ばれる。

とあります。「行内」はインライン要素とも言われます。

ブロックレベル要素とインライン要素。

では、ブロックレベル要素とインライン要素はどんなものを指すのでしょうか。

ここから先はブロックレベル要素とインライン要素－HTMLの基本も参照しながら書いていきます。

このページによると、ブロックレベル要素とは、

見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。

とあり、インライン要素は、

主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。

とあります。

ということは、ブロックレベル要素の中にインライン要素を入れながら文章を書いていく必要があるということです。

それぞれの要素の詳細は先程から何度も引用しているHTML要素を参照していただければわかると思いますが、参考までにボクが普段使っている要素を挙げておきたいと思います。

まずはブロックレベル要素。

要素	基になった英文熟語	意味
p	paragraph	段落
h（ボクの場合、h3）	heading	文章の見出し
blockquote	block-line qoutation	引用文
ul	unordered list	順序なしリスト
ol	ordered list	順序付きリスト
li	list items	リストの項目

次にインライン要素です。

要素	基になった英文熟語	意味
strong	Indicates stronger emphasis	より強い強調

時々tableも上のような表を作る時に使いますが手打ちするのはこれくらいでブックマークレットで取得するデータを除けば比較的シンプルだと自分では思ってます。

それにしてもこの要素は先程も引用した通り、

要素は<と>で囲まれる開始タグで始まり、</と>で囲まれる終了タグで終わる。また、開始タグと終了タグではさまれた部分が内容となる。

ので毎回これを手打ちするのは正直しんどいです。では、どうしたらいいのか？ここで登場するのがテキスト置換ユーティリティーアプリ、TextExpanderです。

TextExpanderの設定をしよう。

600円もするアプリ、TextExpanderとはどんなアプリなんでしょうか？

TextExpanderは入力される文字を常に監視して、入力された「省略形」の代わりに設定された「スニピット」を自動的に挿入します。「省略形」は半角英字しか利用できませんが、「スニピット」には日本語も登録できます。

実際の使い方については@goryugoさんのこのエントリー、TextExpanderを使うとブログHTMLとかメアドとか署名とかが一瞬で入力出来てすんげー快適 | goryugoも参考になるかと思いますが、iPhoneで簡単に使うためのボクの設定を紹介してみようと思います。

HTML要素	省略形	スニペット
p	,p	<p>%|</p>
h3	,h	<h3>%|</h3>
blockquote	,bl	<blockqoute>%clipboard</h3>%|
ul	,ul	<ul> <li>%|</li> </ul>
ol	,ol	<ol> <li>%|</li> </ol>
li	,li	<li>%|</li>
strong	,st	<strong>%|</strong>

%|や%clipboardはTextExpanderで利用できる特殊シンボルというものです。%|はスニペットを実行した後にこの場所にカーソルを持ってくることができ、%clipboardはスニペットを実行した時にクリップボードにコピーされているものが挿入される特殊シンボルです。

これについては@drakontiaさんのこの記事、TextExpander for Touch で使用できる特殊シンボル【Το Μυσειο στην Δρακοντια】を参考に設定しました。

省略形では1つルールを決めています。それは“,”から始めること。

これはiPhoneのキーボード設定と深い関係があります。

ボクが設定しているキーボードは英語と日本語テンキーの2種類。

1000000821 Photo by feelingplace

iPhoneでブログを書く時にはもちろん日本語テンキーですが、「日本語テンキー」を含めて「アルファベット」と「数字・記号」の3種類が利用可能なのはご存じだと思います。

1000000817 Photo by feelingplace

TextExpanderの「省略形」を入力する時は「アルファベット」に切り替えます。

1000000818 Photo by feelingplace

「日本語テンキー」から「アルファベット」への切り替えは1タップ。「アルファベット」に切り替えてしまえば、「省略形」の入力は簡単にできます。

ここで先程の表を再掲しましょう。

HTML要素	省略形	スニペット
p	,p	<p>%|</p>
h3	,h	<h3>%|</h3>
blockquote	,bl	<blockqoute>%clipboard</h3>%|
ul	,ul	<ul> <li>%|</li> </ul>
ol	,ol	<ol> <li>%|</li> </ol>
li	,li	<li>%|</li>
strong	,st	<strong>%|</strong>

フリック入力に慣れれば簡単に「省略形」が入力できるように”,”を起点としているのです。

TextExpanderを利用しながら、HTML要素の構造を組み立てながら入力を繰り返していきます。

最初はどうしても慣れないのでホントにうまく打てているか心配になりますが、ここで活躍するのがTextforceのプレビュー機能。

例えば、下のようなHTML要素をTextforceで打ち込んだ時にファイルを第2回でご紹介したようにプレビューすると、

1000000823 Photo by feelingplace

このようにh3は見出しとして太字で大きく、blockqouteは引用文とわかるようにセンタリングされているのがわかると思います。

1000000824 Photo by feelingplace

ブログの見た目とは大きく異なりますが、それはWordPressのテーマに使われているCascading Style Sheets（カスケーディング・スタイル・シート） – Wikipediaがこのプレビューでは適用されていないからです。

それではあまり意味がないと思われるかも知れませんが、iPhoneのRSSリーダーでブログを購読している人達はモビライザーを利用していることもあります。そうするとCSSは適用されていない文章を読んでもらうことになるので、この状態を知っておくこともとても大切なことなのです。

終わりに。

iPhoneでブログを書くにはできるだけ省力化を考えていく必要があります。そのために必要なこととして、

1. 自分が利用するHTML要素を知る。
2. TextExpanderを活用する。
3. 「省略形」を簡単に入力できるように設定する。

この3つに気をつけておくと、前回第5回 本文の流れをイメージしよう。で整理しておいた文章がスムーズに書けるようになると思います。

それでは次回、第7回 画像・動画素材のHTMLタグを取得しよう。をお楽しみに。