WordPress Theme Raindrops

投稿本文の基本機能とHTML要素

原文を表示

ワードプレスの投稿本文での特有の機能について

WordPressの投稿本文では、入力の利便性を高めるために文字を自動的に処理する機能があります。WordPressを使い始めるうえで「知っておきたい機能」について簡単に説明します


ワードプレスの投稿本文での特有の機能について

WordPressの投稿本文では、入力の利便性を高めるために文字を自動的に処理する機能があります。WordPressを使い始めるうえで「知っておきたい機能」について簡単に説明します。

oEmbed

oEmbedは、外部サイトのコンテンツをhtmlに埋め込むための通信規約で、ワードプレスはこの機能をサポートしているので、URLを投稿本文に貼り付けるだけで、例えばYoutubeのビデオを簡単に表示できます。

CODEX oEmbed

WordPress TAG

タグは、ワードプレス特有の投稿本文に記述されたタグを使って、投稿の表示をコントロールする機能です。

よく使われるタグ

  • <!--more-->
  • ワードプレスには、投稿をリスト形式で表示するアーカイブページと、個別ページだけを表示するシングルページに大別されますが、リスト形式で表示する場合に、このタグを投稿本文に記述しておくと、アーカイブなどリストページでは、このタグ以前の文章しか表示されなくなります。概要だけを表示することが出来ます。
  • <!--noteaser-->
  • このタグは、<!--more-->とセットで使用されます。このタグが記述されている場合、リストページでは、<!--more-->の手前までの文章が表示され、シングルページでは、<!--more-->以降の文章だけが表示されるようになります。
  • <!--nextpage-->
  • このタグで、文章を区切ると、それぞれ区切られた文章が1ページとしてページ建てして表示されます。

Raindrops特有のタグ

  • [raindrops color_type="minimal" col="1″]
  • 上のタグ(記法)の場合、シングルページのカラム数を1カラム カラータイプをminimalで表示することが出来ます。color_typeは、dark w3standard light minimal colは、1-3カラムで指定することが出来ます
  • [raindrops class="my-design"]
  • このタグ(記法)は、個別投稿ページのarticle要素の親要素にクラスを追加します。(上の例だと、my-design)これによって、投稿の性質毎に自由にデザインが可能になります。必要な時にこのタグを追加すると、いつでもそのデザインを再利用することが出来るようになります。
  • [raindrops skip-excerpt]
  • このタグ(記法)は、ブログアーカイブやカテゴリアーカイブなどが概要表示設定にしてある時に使用します
    投稿本文にこの記述があると、全文表示します。
    html要素がないと、意味のよくわからない概要文になってしまう投稿に利用してみてください
  • [raindrops class="writing-mode-mix"]
  • このタグ(記法)は、縦書きを有効にするタグです。(ver1.482以降)このタグを使用可能にするためには、事前にカスタマイザーの設定が必要です。カスタマイズ/アドオン/縦書きのセクションで「はい」を設定すると投稿が縦書きで表示されます。詳細は、「Raindrops1.482がライブになりました」を参照してください。

特有のタグは、ショートコードではありませんので、本文に表示されるので<!--[raindrops color_type="minimal" col="1″]-->といった形で記述してください

WordPressは、Formatting APIにより、特定の文字が自動変換されます

例えば、"と入力した場合 “ (&8220;) に変換に変換するといった機能です。

以下の要素は、フォーマット機能が働きません

  • pre
  • code
  • kbd
  • style
  • script
  • tt

Note: ttは、廃止要素です

詳細

関数リファレンス/wptexturize

HTML要素

WordPressは、ユーザー権限により利用可能なhtml要素が異なります

権限別 投稿内で利用可能なタグ一覧
h1-h6 見出し
p 段落
ol ul dl リスト
hr 区切り線
table tr td 表
iframe object embed 埋め込み要素
form
strong em sub sup del ins ruby rt rp テキスト効果
time abbr var code kbd samp address blockquote q citeテキストの意味をあらわす要素
pre 整形済みテキスト

廃止要素一覧

  • acronym
  • applet
  • basefont
  • bgsound
  • big
  • blink
  • center
  • dir
  • font
  • frame
  • frameset
  • hgroup
  • isindex
  • listing
  • marquee
  • multicol
  • nextid
  • nobr
  • noembed
  • noframes
  • plaintext
  • spacer
  • strike
  • tt
  • xmp

一覧に戻る

h1~h6 見出し

WordPressの投稿本文では、h3要素から―h6要素を使います。(h1要素やh2要素を使っても、html5では問題ありませんが、古いブラウザや、特殊なブラウザを考慮して、h3から使用するのがおすすめです。)h3だと、文字サイズが小さめでバランスが悪いといった場合は、CSSクラス .h1-.h6を用意してありますので、クラスを指定してください。

例:

h3だけど文字を大きくする

<h3 class="h1">h3だけど文字を大きくする</h3>

クラスを追加する時は、エディタをテキストモードで行ってください。

見出し要素は記法が使えます

ワードプレスは、リストをエディターのボタン操作や要素の手書き入力を行わないで記号を入力する事で見出しを作る事もできます

##でh2 ###ならh3 文字を入力する前にスペース一個必要で 改行すると見出しになります

表示例

h2 投稿タイトルなどの見出し

h3 投稿本文で使用する見出し

h4 投稿本文で使用する見出し

h5 投稿本文で使用する見出し
h6 投稿本文で使用する見出し

ソース

<h2>h2 投稿タイトルなどの見出し</h2>
<h3>h3 投稿本文で使用する見出し</h3>
<h4>h4 投稿本文で使用する見出し</h4>
<h5>h5 投稿本文で使用する見出し</h5>
<h6>h6 投稿本文で使用する見出し</h6>

クラスの例

タイトル文字列

タイトル文字列

タイトル文字列

タイトル文字列

タイトル文字列

タイトル文字列

<p class="h1">タイトル文字列</p>
<p class="h2">タイトル文字列</p>
<p class="h3">タイトル文字列</p>
<p class="h4">タイトル文字列</p>
<p class="h5">タイトル文字列</p>
<p class="h6">タイトル文字列</p>

関連


一覧に戻る

p

p要素は、段落を表します。この要素は、WordPressが必要な部分に自動的に付加します。(手動で記述しても構いません)段落内改行を行う場合は、shift + enter キーを同時に押すと、段落内改行になります。

表示例

これは段落です

ソース

<p>これは段落です</p>

関連


一覧に戻る

ol ul dl リスト

リスト表示を行う場合に使用します。

リストには、番号なしリスト(ul)番号付きリスト(ol)タイトル付リスト(dl)の3種類があります。

番号有り無しは、どちらの要素を使用してもCSSで表示を変更する事が出来ます。

ワードプレスは、リストをエディターのボタン操作や要素の手書き入力を行わないで記号を入力する事でリストを作る事もできますアスタリスクをまず入力します。 スペースを一つ入れると、アスタリスクが消えて、続けて文字を入力すると、自動的にリスト表示が出来ます。

レインドロップスでは、

テーマ組み込みクラスがあります

ul用クラス .rd-list-type-tree
ol用クラス .sectioned

表示例

ol 番号付きリスト

  1. ol
  2. あいうえお
  3. abc
  4. abc
  5. abc
  6. abc
<ol>
	<li>ol</li>
	<li>あいうえお</li>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
</ol>

ul 番号なしリスト

  • ol
  • あいうえお
  • abc
  • abc
  • abc
  • abc
<ul>
	<li>ol</li>
	<li>あいうえお</li>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
</ul>

例 rd-list-type-treeクラス

  • ol
  • あいうえお
    • あいうえお
  • abc
  • abc
  • abc
  • abc
<ul class="rd-list-type-tree">
	<li>ol</li>
	<li>あいうえお<ul><li>あいうえお</li></ul></li>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
</ul>

例 sectionedクラス

  • ol
  • あいうえお
    • あいうえお
  • abc
  • abc
  • abc
  • abc
<ul class="sectioned">
<li>ol</li>
<li>あいうえお<ul><li>あいうえお</li></ul></li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>

dl dt dd データリスト

データリストはブラウザ幅640pxを境界にスタイルが変更されます。

データリストタイトル1
データ1
データ2
データ3
データリストタイトル2
データ1
データ2
データ3
データリストタイトル3
データ1
データ2
データ3
<dl>
<dt>データリストタイトル1</dt><dd>データ1</dd><dd>データ2</dd><dd>データ3</dd>
<dt>データリストタイトル2</dt><dd>データ1</dd><dd>データ2</dd><dd>データ3</dd>
<dt>データリストタイトル3</dt><dd>データ1</dd><dd>データ2</dd><dd>データ3</dd>
</dl>

関連


一覧に戻る

hr 区切り線

区切り線を書く場合は、hr要素を使います。

hr要素のカスタマイズ例

表示例


ソース

<hr />

関連


一覧に戻る

table tr td 表

table 要素は、htmlの中で、フォーム要素などと並び、とても複雑な要素の組み合わせを持ちます

テーマでは、table要素 td要素で左右位置制御クラス left center right 上下位置調整クラス top middle bottom を使用することが出来ます。

また、テーブル幅が指定されている場合など、テーブルの幅がブラウザの幅を上回る場合は、スクロールバーが下部に表示されます。

表示例

ol あいうえお abc abc abc abc
<table>
<tbody>
	<tr>
		<td>ol</td>
		<td>あいうえお</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
	</tr>
</tbody>
</table>

table thead th tbody tfoot tr td ヘッダーフッター付の表

ol あいうえお abc abc abc abc
ol あいうえお abc abc abc abc
ol あいうえお abc abc abc abc
ol あいうえお abc abc abc abc
<table>
<thead style="background: #eeeedd;">
	<tr>
		<th scope="col">ol</th>
		<th scope="col">あいうえお</th>
		<th scope="col">abc</th>
		<th scope="col">abc</th>
		<th scope="col">abc</th>
		<th scope="col">abc</th>
	</tr>
</thead>
<tfoot style="background: #c0c0c0;">
	<tr>
		<td>ol</td>
		<td>あいうえお</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
	</tr>
</tfoot>
<tbody style="background: #ffffff;">
	<tr>
		<td>ol</td>
		<td>あいうえお</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
	</tr>
	<tr>
		<td>ol</td>
		<td>あいうえお</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
	</tr>
</tbody>
</table>

table tr td colgroup colgroup要素を持つ表

ol あいうえお abc abc abc abc
ol あいうえお abc abc abc abc
ol あいうえお abc abc abc abc
<table>
<colgroup style="background: #ccccff;">
</colgroup>
<colgroup style="background: #eeccff;">
</colgroup>
<colgroup style="background: #eeccff;">
</colgroup>
<colgroup style="background: #eeccff;">
</colgroup>
<colgroup style="background: #eeccff;">
</colgroup>
<colgroup style="background: #eeccff;">
</colgroup>
<tbody>
	<tr>
		<td>ol</td>
		<td>あいうえお</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
	</tr>
	<tr>
		<td>ol</td>
		<td>あいうえお</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
	</tr>
	<tr>
		<td>ol</td>
		<td>あいうえお</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
	</tr>
</tbody>
</table>

table tr td caption caption要素を持つ表

caption ABCD abcd えいびぃしぃでぃ 瑛美市出
ol あいうえお abc abc abc abc
ol あいうえお abc abc abc abc
ol あいうえお abc abc abc abc
<table>
<caption>caption ABCD abcd えいびぃしぃでぃ 瑛美市出</caption>
<tbody>
	<tr>
		<td>ol</td>
		<td>あいうえお</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
	</tr>
	<tr>
		<td>ol</td>
		<td>あいうえお</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
	</tr>
	<tr>
		<td>ol</td>
		<td>あいうえお</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
		<td>abc</td>
	</tr>
</tbody>
</table>

ソース

関連


一覧に戻る

iframe object embed 埋め込み要素

外部ドキュメントや、画像、といったものを投稿本文に埋め込みたい場合に、iframe object embed タグを使用することが出来ます。

表示例

object

画像切り替え 等価な内容の記述
<object data="/index.html" type="text/html" width="540" height="200">画像切り替え 等価な内容の記述</object>

embed

<embed type="text/html" src="/index.html" type="text/html" width="540" height="200" />

iframe

<iframe src="/index.html" width="540" height="200"> 画像切り替え 等価な内容の記述</iframe>

ソース

関連


一覧に戻る

form

form 要素は、データの送信に使われます。

ワードプレスの投稿本文で、直接フォーム要素を記述する事はあまりないでしょう。

ただ、フォーム要素 checkbox 等では、チェックボックスがチェックされているかどうかを、CSSで受け取ることが出来るため、イベントスイッチとして使われることもあります。

CSS イベント

表示例

<form action="" method="post">
	<label id="label1" for="sample1">label text</label>
	<input id="sample1" type="text" />
	<label id="label0" for="sample0">label text</label>
	<input id="sample0" name="sample1" type="text" value="form" />
</form>

fieldset legend フィールドセット

<form action="" method="post">
	<fieldset>
		<legend>fieldset</legend>
		<label id="label0" for="sample0">label text</label>
		<input id="sample999" name="sample1" type="text" value="form" />
	</fieldset>
</form>

form input type=radio ラジオボタンフィールド

<form action="basic.html" method="post">
	<fieldset>
		<legend>グループ1(xhtml)</legend>
		<input id="sample2" checked="checked" name="sex" type="radio" value="Male" />
		<label for="sample2">Male</label>
		<input id="sample3" name="sex" type="radio" value="Female" />
		<label for="sample3">Female</label>
	</fieldset>
	<fieldset>
		<legend>グループ2(html5)</legend>
		<input id="sample4" checked="checked" name="sexb" type="radio" value="Male" />
		<label for="sample4">Male</label>
		<input id="sample5" name="sexb" type="radio" value="Female" />
		<label for="sample5">Female</label>
	</fieldset>
</form>

form type="checkbox" チェックボックスフィールド

<form action="basic.html" method="post">
	<fieldset>
		<legend>グループ2(html5)</legend>
		<input id="sample6" name="sexc" type="checkbox" value="Male" />
		<label for="sample6">Male</label>
		<input id="sample7" name="sexc" type="checkbox" value="Female" />
		<label for="sample7">Female</label>
	</fieldset>
</form>

FORM SELECT NAME="SAMPLE1″ SIZE="3″ MULTIPLE 複数選択可能なセレクトボックス

<form action="" method="post">
	<fieldset>
		<legend>グループ</legend>
		<label for="select-group1">group1</label>
		<select id="select-group1" multiple="multiple" name="sample1" size="3">
			<optgroup label="group1">
				<option selected="selected" value="sample1">サンプル</option>
				<option value="sample2">sample2</option>
				<option value="sample3">sample3</option>
				<option value="sample4">sample4</option>
				<option value="sample5">sample5</option>
			</optgroup>
		</select>
		<label for="select-group2">group2</label>
		<select multiple="multiple" name="sample2" size="3">
			<optgroup label="group2">
				<option selected="selected" value="sample1">サンプル</option>
				<option value="sample2">sample2</option>
				<option value="sample3">sample3</option>
			</optgroup>
		</select>
		<label for="select-group3">group3</label>
		<select multiple="multiple" name="sample2" size="3">
			<optgroup label="group3">
				<option value="sample4">sample4</option>
				<option value="sample5">sample5</option>
			</optgroup>
		</select>
	</fieldset>
</form>

form type="submit" type="reset" リセットボタン

<form action="basic.html" method="post">
	<input type="submit" value="サンプル" />
	html4
	<input accesskey="y" type="submit" value="abc" />
	<input accesskey="z" type="reset" value="リセット" />
</form>

form type="password" name="pass" size="30″ maxlength="30″ パスワードフィールド

<form action="basic.html" method="post">
	<input id="sample8" maxlength="30" name="pass" type="password" />
	<label for="sample8">Password</label>
	html4
	<input id="sample9" accesskey="w" maxlength="30" name="pass" type="password" />
	<label for="sample9">Password</label>
</form>

form type="file" name="sample" size="30″ ファイル選択フィールド

<form action="basic.html" method="post">
	<input id="sample10" accesskey="x" name="sample" type="file" />
	<label for="sample10">File</label>
</form>

form textarea wrap="hard" テキストエリア

<form action="basic.html" method="post">
	<label for="sample12">Textarea</label>
	<textarea id="sample12" accesskey="v" cols="50" name="message" rows="5">strong ABCD abcd えいびぃしぃでぃ 瑛美市出</textarea>
</form>

ソース

関連


一覧に戻る

テキスト効果

強調

strong

strong ABCD abcd えいびぃしぃでぃ 瑛美市出
<strong> strong ABCD abcd えいびぃしぃでぃ 瑛美市出 </strong>

em

em ABCD abcd えいびぃしぃでぃ 瑛美市出
<em> em ABCD abcd えいびぃしぃでぃ 瑛美市出 </em>

上付き文字 下付き文字

sub

H2O

H<sub>2</sub>O

sup

12

1<sup>2</sup>

削除と訂正

del

the xmp element contains preformatted text in which markup other than an end tag is treated as literal text.

<del title="xmp is obsolete" cite="http://www.w3.org/tr/rec-html40/appendix/changes.html#h-a.1.3" datetime="1997-12-19T00:00:00-05:00">
the xmp element contains preformatted text in which markup other than an end tag is treated as literal text.
</del>

ins

山田を見ていた。いや、睨んでいたというべきか

山田を<del datetime="2016-08-26T09:57:51+00:00">見ていた。</del><ins datetime="2016-08-26T09:57:51+00:00">いや、睨んでいたというべきか</ins>

読み仮名

ruby

(かん)()
<ruby>漢 <rp>(</rp><rt>かん</rt><rp>)</rp> 字 <rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
rt
Kanji
<ruby> 漢 <rt>Kan</rt> 字 <rt>ji</rt></ruby>

東アジア言語の発音を表示するため

rp
(Kan)(ji)
<ruby> 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp></ruby>

ルビをサポートしないブラウザ向けのフォールバックとして括弧を提供するために使用


一覧に戻る

テキストの意味を現す要素

時刻

コンサートは に開催します。

コンサートは <time datetime="2001-05-15 19:00">5 月 15 日</time>に開催します。

略語

HTML
<abbr title="Hypertext Markup Language">HTML</abbr>

Raindrops テーマは、abbr要素にtitle属性が含まれる場合、略語にマウスを重ねると、ツールチップでtitleを表示します。

var

Variable
<var>Variable</var>

変数の意味で使用

code

code ABCD abcd えいびぃしぃでぃ 瑛美市出
<code> code ABCD abcd えいびぃしぃでぃ 瑛美市出 </code>

プログラムコードの意味で使用し、等幅フォント

kbd

ABC
<kbd>A</kbd><kbd>B</kbd><kbd>C</kbd>

ユーザがキーボードから入力する文字列

samp

samp ABCD abcd えいびぃしぃでぃ 瑛美市出
<samp> samp ABCD abcd えいびぃしぃでぃ 瑛美市出 </samp>

サンプル

著者情報

Raindropsテーマ(以下テーマ)では、フッターに使用される 著者情報を表示するために使用し、子要素はセンタリングされます。

テーマで、デフォルトで記載されているリンク テキストは、「カスタマイザー/高度な設定/フッタークレジット」で変更が可能です。

表示例
©2016 Raindrops for theme site 投稿フィード
コメントフィード

レインドロップス テーマ
ソース
<address>
	<small>©2016 Raindrops for theme site <a href="#" class="entry-rss">投稿フィード</a>
	<a href="#" class="comments-rss">コメントフィード</a></small> 
	<small><a href="#" class="external">レインドロップス テーマ</a></small> 
</address>

引用文

外部コンテンツの引用を行う時に使用する要素です

左側に、太いボーダーとカラータイプによっては、枠線 背景色が設定されます。

この要素は、「blockquote要素に cite属性」を使用することが出来る Raindropsの拡張設定があります。

blockquote要素に cite属性がある場合 自動的にリンクを追加します。

表示例
引用は権利者に無断で行われるもので、法(日本では著作権法第32条)で認められた合法な行為であり、権利者は引用を拒否することはできない[3]。権利者が拒否できるのは、著作権法の引用の要件を満たさない違法な無断転載等に限られる。 引用元:https://ja.wikipedia.org/wiki/%E5%BC%95%E7%94%A8
ソース
<blockquote>
引用は権利者に無断で行われるもので、法(日本では著作権法第32条)で認められた合法な行為であり、権利者は引用を拒否することはできない[3]。権利者が拒否できるのは、著作権法の引用の要件を満たさない違法な無断転載等に限られる。

引用元:https://ja.wikipedia.org/wiki/%E5%BC%95%E7%94%A8
</blockquote>
cite属性を使用した場合
引用は権利者に無断で行われるもので、法(日本では著作権法第32条)で認められた合法な行為であり、権利者は引用を拒否することはできない[3]。権利者が拒否できるのは、著作権法の引用の要件を満たさない違法な無断転載等に限られる。
<blockquote cite="https://ja.wikipedia.org/wiki/%E5%BC%95%E7%94%A8">
引用は権利者に無断で行われるもので、法(日本では著作権法第32条)で認められた合法な行為であり、権利者は引用を拒否することはできない[3]。権利者が拒否できるのは、著作権法の引用の要件を満たさない違法な無断転載等に限られる。
</blockquote>

関連

q要素

blockquote要素だけでなく、q要素を使っても、引用を記述する事が出来ます

q要素は、文中での引用(段落内)で使われます。引用元情報は、blockquoteではcite属性を使いますが、この場合はcite要素を使って表示します。

「残すべき、何かなどあるはずもない」ミショニポー
<q>「残すべき、何かなどあるはずもない」<cite><a href="http://d.hatena.ne.jp/tenman/20150926/p1">ミショニポー</a></cite></cite></q>

一覧に戻る

pre 整形済みテキスト

テキストモードで、改行などを行った場合にWordPressの自動的な段落タグの挿入機能を使わないで、改行をしたらそのまま改行を表示できる要素がpre要素です。主には、ソースコード表示を行う時に使用されますが、通常のテキストでも、詩のようなものを書く場合に役に立つこともあります。

表示例

test

test
test

ソース

<pre>
test

test
test
</pre>

関連