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だけど文字を大きくする


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

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

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

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

表示例

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

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

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

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

ソース

クラスの例

タイトル文字列

タイトル文字列

タイトル文字列

タイトル文字列

タイトル文字列

タイトル文字列

関連


一覧に戻る

p

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

表示例

これは段落です

ソース

関連


一覧に戻る

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

ul 番号なしリスト

  • ol
  • あいうえお
  • abc
  • abc
  • abc
  • abc

例 rd-list-type-treeクラス

  • ol
  • あいうえお
    • あいうえお
  • abc
  • abc
  • abc
  • abc

例 sectionedクラス

  • ol
  • あいうえお
    • あいうえお
  • abc
  • abc
  • abc
  • abc

dl dt dd データリスト

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

データリストタイトル1
データ1
データ2
データ3
データリストタイトル2
データ1
データ2
データ3
データリストタイトル3
データ1
データ2
データ3

関連


一覧に戻る

hr 区切り線

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

hr要素のカスタマイズ例

表示例


ソース

関連


一覧に戻る

table tr td 表

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

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

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

表示例

ol あいうえお abc abc abc abc

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 tr td colgroup colgroup要素を持つ表

ol あいうえお abc abc abc abc
ol あいうえお abc abc abc abc
ol あいうえお abc abc abc abc

table tr td caption caption要素を持つ表

caption ABCD abcd えいびぃしぃでぃ 瑛美市出
ol あいうえお abc abc abc abc
ol あいうえお abc abc abc abc
ol あいうえお abc abc abc abc

ソース

関連


一覧に戻る

iframe object embed 埋め込み要素

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

表示例

object

画像切り替え 等価な内容の記述

embed

iframe


ソース

関連


一覧に戻る

form

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

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

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

CSS イベント

表示例

fieldset legend フィールドセット

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

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

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

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

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

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

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

ソース

関連


一覧に戻る

テキスト効果

強調

strong

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

em

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

上付き文字 下付き文字

sub

H2O

sup

12

削除と訂正

del

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

ins

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

読み仮名

ruby

(かん)()

rt
Kanji


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

rp
(Kan)(ji)


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


一覧に戻る

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

時刻

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

略語

HTML


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

var

Variable


変数の意味で使用

code

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


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

kbd

ABC


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

samp

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


サンプル

著者情報

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

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

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

レインドロップス テーマ
ソース

引用文

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

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

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

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

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

cite属性を使用した場合
引用は権利者に無断で行われるもので、法(日本では著作権法第32条)で認められた合法な行為であり、権利者は引用を拒否することはできない[3]。権利者が拒否できるのは、著作権法の引用の要件を満たさない違法な無断転載等に限られる。

関連

q要素

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

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

「残すべき、何かなどあるはずもない」ミショニポー


一覧に戻る

pre 整形済みテキスト

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

表示例

test

test
test

ソース

関連