はてなブログ、「見たままモード」のアイコンで指定されるHTML

前回の記事に引き続き、はてなブログユーザーに向けた簡単なHTML講座を開催しておきましょう。今回は、「見たままモード」の編集画面にあるアイコンを使って書式を指定したときに、どのようなHTMLが出力されるかを紹介します。

 

「見たままモード」に用意されているアイコン

はてなブログ」のユーザーは、「見たままモード」の編集画面を使って記事を作成している方が多いと思います。この編集画面には、以下のようなツールバーが用意されています。

見たままモードに用意されているツールバー

 

文字を選択した状態で各アイコンをクリックすると、太字や斜体、文字の大きさ、文字色などの書式を指定できます。この操作により、記事のHTMLがどのように変化するかを学んでおくと、「はてなブログ」で使用されるHTMLの理解が深まると思います。それでは、順番に紹介していきましょう。

 

文字を装飾する書式指定

まずは、太字や斜体といった文字装飾を指定するアイコンをクリックしたときに出力されるHTMLについて紹介します。これらのアイコンは、ツールバーの下段に配置されています。

 

太字/斜体

太字の書式を指定すると、その文字が<strong>~</strong>で囲まれてHTML出力されます。strong要素は「文字の強調」を指定する要素となりますが、「はてなブログ」では文字を太字にする要素として利用されています。

斜体の書式を指定した場合は、その文字が<em>~</em>で囲まれてHTML出力されます。em要素も「文字の強調」を指定する要素となりますが、こちらは斜体で表示されるのが一般的となるため、「はてなブログ」では文字を斜体にする要素として利用されています。

 

打消/アンダーライン/文字の大きさ/文字色

書式を指定した文字が<span>~</span>で囲まれてHTML出力されます。span要素は文字の範囲を指定する要素で、それ自体に書式を指定する役割はありません。それぞれの書式は、style属性(CSSを使って以下のように指定されます。

 

・打消

<span style="text-decoration: line-through;">~</span>

 

・アンダーライン

<span style="text-decoration: underline;">~</span>

 

・文字の大きさ

<span style="font-size: xxx%;">~</span>

 

・文字色

<span style="color: 色コード;">~</span>

 

 

リンクの指定

文字や画像にリンクを指定すると、その前後を<a>~</a>で囲んだHTMLが出力されます。

<p>詳しい情報は<a href="http://www.tokyo-skytree.jp/">東京スカイツリーの公式サイト</a>でご確認ください。

 

a要素はリンクを指定する要素で、リンク先のURLをhref属性で指定します。上記の例の場合、「東京スカイツリーの公式サイト」の文字がリンクとして機能し、そのリンク先は「http://www.tokyo-skytree.jp/」となります。なお、画像にリンクを指定した場合は、img要素が<a>~</a>で囲まれてHTML出力されます。

a要素にtarget属性を追加し、リンク先を表示するウィンドウ(タブ)を指定することも可能です。新しいウィンドウ(タブ)にリンク先を表示する場合は、a要素にtarget="_blank"の記述を追加します。

 

 

「箇条書き」と「番号付きリスト」

箇条書き(リスト)を指定すると、その範囲が<ul>~</ul>で囲まれ、各項目を<li>~</li>で囲んだHTMLが出力されます。さらに、行間の調整用の<span>~</span>が各項目に追加されます。

箇条書きの例

<ul>
<li><span style="line-height: 1.5;">東京</span></li>
<li><span style="line-height: 1.5;">神奈川</span></li>
<li><span style="line-height: 1.5;">大阪</span></li>
</ul>

 

番号付きリストを指定した場合は、<ul>~</ul>の代わりに<ol>~</ol>が出力されます。

番号付きリストの例

<ol>
<li><span style="line-height: 1.5;">東京</span></li>
<li><span style="line-height: 1.5;">神奈川</span></li>
<li><span style="line-height: 1.5;">大阪</span></li>
</ol>

 

 

続きを読む、引用、脚注

そのほか、「見たままモード」のツールバーには、続きを読む、引用、脚注といった書式を指定するアイコンも用意されています。これらの書式を指定すると、以下のようなHTMLが出力されます。

 

続きを読む

<p><!-- more --></p>というHTML(p要素)が出力されます。ただし、このHTMLだけで「続きを読む」の機能が実現される訳ではありません。サーバーにより自動処理される、「はてなブログ」独自の記述方法となります。

 

引用

引用を指定した段落(p要素)が<blockquote>~</blockquote>で囲まれてHTML出力されます。

 

脚注

脚注に指定した部分が( ( ~ ) )で囲まれて出力されます。ただし、この記述は一般的なHTMLではありません。「はてなブログ」のサーバーにより自動処理される記述となります。

 

前回の記事で紹介した内容に加えて、今回紹介した内容を覚えておけば、「はてなブログ」の記事に使用されるHTMLをほぼ網羅できたことになります。記事のHTML編集を行う際に役に立つので、念のため確認しておくとよいでしょう。