0から始めるiPhoneからのWordPress更新術。第6回 HTMLタグを使ってブログを書こう。

ボク自身、非プログラマーなので、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の設定をしよう。

TextExpander 1.1.8 for iPhoneApp
カテゴリ: 仕事効率化 価格: ¥600
更新: 2010/11/11

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
flickr.com1000000821 Photo by feelingplace

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

1000000817
flickr.com1000000817 Photo by feelingplace

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

1000000818
flickr.com1000000818 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のプレビュー機能。

Textforce – Dropbox text editing 2.2.8 for iPhoneApp
カテゴリ: 仕事効率化 価格: ¥450
更新: 2011/05/18

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

1000000823
flickr.com1000000823 Photo by feelingplace

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

1000000824
flickr.com1000000824 Photo by feelingplace

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

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

終わりに。

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

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

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

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

この投稿へのトラックバック

  1. iPhone D’s Focus ダイジェスト版【20110529版】 | 覚醒する? @CDiP said on 2011年5月29日 at 11:11 PM

    […] !!そこの部分だけ音声で聞きたい。多分もの凄い質問攻めをしていたと思うな(笑) ◇ 0から始めるiPhoneからのWordPress更新術。第6回 HTMLタグを使ってブログを書こう。 (via Feelingplace) […]

  2. Asai’s check No.89 – DraftPadが素敵にバージョンアップ! ほんと、す・て・き! | 日記「おいしいお菓子もあります。」 said on 2011年5月30日 at 6:03 AM

    […] 0から始めるiPhoneからのWordPress更新術。第6回 HTMLタグを使ってブログを書こ… ようするに、HTMLの親戚?兄弟?親?子?みたいなもののようです。WordPr… φ(`д´)メモメモ… […]

  3. […] 2011年6月6日 by @feelingplace | 0 comments 前回の第6回 HTMLタグを使ってブログを書こう。では、TextExpanderを使ってHTML要素を効率よく書いていくことをお伝えしました。今回は素材のHTMLタグをどうやって取得するかを考えていきたいと思います。 […]

  4. 現在のiPhoneホーム画面【2011.7】 | Yu_notes. said on 2011年7月27日 at 8:09 AM

    […] と言い切ってもいいほどの必須アプリです。簡単に言えばタグ打ちが便利になります(^_^;) 参考:0から始めるiPhoneからのWordPress更新術。第6回 HTMLタグを使ってブログを書こう。 | Feelingplace […]

  5. iPhoneでブログ更新 - ほこほこ、ね said on 2011年9月23日 at 11:52 PM

    […] TextExpanderにタグを登録(feelingplaceさんの設定を真似させてもらいました)。 […]

  6. […] 参考:0から始めるiPhoneからのWordPress更新術。第6回 HTMLタグを使ってブログを書こう。 | Feelingplace […]

  7. […] 参考:0から始めるiPhoneからのWordPress更新術。第6回 HTMLタグを使ってブログを書こう。 | Feelingplace […]