記事のマークアップ

ここではHTMLを用いた記事のマークアップやwordpressの拡張機能について紹介していきます。

[toc]

ブロック要素

ブロック要素は段落など、文のまとまりをマークアップする要素です。

ブロック要素の中にはブロック要素を含むことができるので、たとえば、表の中に画像を配置するといったことができます。

見出し

h1からh6までありますぞ。

上の見出しのコーディングは以下のようになります。

ブロック要素としては少し特殊な例に見えてしまうかもしれませんね。

画像

画像を挿入するには img 要素を使います。imgタグのsrc属性に指定したURLの画像として扱われます。

<img src=”http://gazou-no.url/wo.sitei/suru.jpg” />

実は img要素はインライン要素として文の一部としても使えるのですが、このサイトではあまり綺麗に表示されないので、前後に空白行を挟んでブロック要素として表示するのがオススメです。

注釈・補足

記事の大筋とは関係のない、注意や補足などを表す要素です。

<aside>若干分けのわからないことを言っているぞ、気をつけろ！</aside>

引用

他サイトや、文献からの引用文を表す要素です。

<blockquote site=”へりくつ工房 – http://hlkt-kobo.net/”>ゲームがないなら作ればいいじゃない。</blockquote>

ゲームがないなら作ればいいじゃない。

表

<table>

HTMLでは、表は横列の集まりとして表現されます。

表全体はtable要素で表され、表の各横列(row)はtr要素で表されます。tr要素は更に、表のデータを表すtd要素と表の見出し(heading)を表すth要素の集まりとして表されます。

<table>
<tr><th>ユーザ</th><th>投稿した数</th><th>表情の数</th></tr>
<tr><th>天空　薙</th><td>32</td><td>1</td></tr>
<tr><th>kordy</th><td>7</td><td>12</td></tr>
<tr><th>ねこ電球</th><td>5</td><td>7</td></tr>
</table>

ユーザ	投稿した数	表情の数
天空　薙	32	1
kordy	7	12
ねこ電球	5	7

発言・会話

個人の発言

個々の発言は、logueクラスを指定したdiv要素で表します。

それぞれの発言には、lbcat、kordy、tenkuをクラスに指定することができます。

<div class=”logue lbcat”>こんにちは、ねこ電球です。</div>

こんにちは、ねこ電球です。

複数人での会話

複数人での会話を表したい場合はdialogueクラスを指定したsection要素で個々の発言を囲むと複数人での会話として扱われます。

全体を囲む <section class=”logue”> には <section class=”dialogue lbcat“> のようにキャラを指定することができ、その場合は指定されたキャラがその会話のメインキャラとして扱われます。

<section class="dialogue lbcat">
<div class="logue lbcat">メインのキャラと</div>
<div class="logue">サブのキャラを分けて表示することができます</div>
</section>

メインのキャラと

サブのキャラを分けて表示することができます

その他のオプション

表情やアクセサリなどのオプションについては発言のオプションを参照してください。

詩的表現

物語の導入部など、叙事的なものや語り的な詩的表現を表す要素です。

<section class=”poem”>
かつて、全大陸を巻き込んだ数多の大戦の影には、
暗躍する、ひとつ工房の姿があった
へりくつ工房
この話は、とある小さな海辺の工房から始まる
</section>

かつて、全大陸を巻き込んだ数多の大戦の影には、
暗躍する、ひとつ工房の姿があった

へりくつ工房

この話は、とある小さな海辺の工房から始まる

特筆すべきリンク

記事の中で特に重要な外部リンクを独立した段落で表す場合は、featured-linkクラスを指定したdiv要素で表します。

<div class=”featured-link”>
クトゥルフスープはこちら: <a href=”http://hlkt-kobo.net/”>ホビージャパン</a>
</section>

クトゥルフスープはこちら: へりくつ工房

インライン要素

インライン要素は文字や単語、フレーズなど、文章の一部をマークアップしたものです。

とりあえずは「インライン要素の中にブロック要素を入れない」。

これだけを覚えておけば大丈夫です。逆にブロック要素の中にはインライン要素を使いたい放題にできるので、会話の中で強調を使ったりなんてことも全然OKです。

強調

人名、キーワード、キーセンテンスなど、文の中で強調される要素はem要素で表します。

文章の中で<em>強調</em>される要素として扱われます。

文章の中で強調される要素として扱われます。

強い強調

強調される要素のうち、特に強調される要素はstrong要素で表します。

<em>強調</em>よりも更に<strong>強く強調</strong>される要素として扱われます。

強調よりも更に強く強調される要素として扱われます。

リンク

他の文書やメディアなどへのリンクはa要素で表します。リンク先のURLをhref属性で指定します。

<a href=”http://hlkt-kobo.net/”>へりくつ工房</a >はカードゲームなんかを創作するサークルです。

へりくつ工房はカードゲームなんかを創作するサークルです。

改行

<br />

文の改行はbr要素で表します。

ここで<br />改行されます。

ここで
改行されます。

引用

他サイトや、文献からの引用文はq要素で表します。引用元のサイトや書籍の情報をsite属性で指定します。

へりくつ工房によれば<q site=”http://hlkt-kobo.net/”>ゲームは作りたいように作るのが最高</q>であるという。

へりくつ工房によればゲームは作りたいように作るのが最高であるという。

wordpressに関するもの

段落の補完

<p></p>

通常のHTMLでは段落は、<p>を使ってマークアップされますが、wordpressでは自動で補完されるので、p 要素はあまり気にする必要のない要素です。

ただ、入力時の改行の仕方によって補完のされ方、ひいては表示のされ方が変わってくるので、文章の構造を考慮して適切な改行を行う必要があります。

段落内での改行として補完される場合

改行を1個挟んだ場合は、段落内での改行としてbr要素が補完されます。

行1
行2

<p>行1<br />行2</p>

行1
行2

別々の段落として補完される場合

改行を2個以上挟んだ場合は、それぞれ別の段落として補完されます。

行1
行2

<p>行1</p>
<p>行2</p>

行1

行2

プラグイン機能に関するもの

wordpressでは、一部のプラグインの機能は記事中で[]で囲まれたタグを使用することで利用することができます。

見出しリスト

[ toc ]

記事中に[ toc ]を挿入することで記事リストが表示されます。ここのページでは一番上に表示してあるものです。