執筆者向けブログ編集方法リファレンス

利用できるタグ

利用できるタグ

はじめに

この記事は、執筆者向けの投稿サンプルです。
管理画面の機能やHTML、ショートコードを利用してこの記事のような表示ができます。

以下にはサンプルとソースコードを掲載しています。

見出しの指定

見出しは見出し2（h2）から利用します。見出し1（h1）は記事のタイトルが利用しています。

見出し2

見出し3

見出し4

見出し5
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>

段落の指定

パラグラフ。段落を作る際に利用します。段落を作る際に利用します。段落を作る際に利用します。段落を作る際に利用します。段落を作る際に利用します。段落を作る際に利用します。段落を作る際に利用します。

段落を作る際に利用します。段落を作る際に利用します。段落を作る際に利用します。段落を作る際に利用します。段落を作る際に利用します。段落を作る際に利用します。段落を作る際に利用します。段落を作る際に利用します。

<p>パラグラフ。段落を作る際に利用します。</p>

<p>パラグラフ。段落を作る際に利用します。</p>

引用の指定

引用の指定ができます。引用時は必ず引用元のリンクを指定しましょう。

複数段落の引用

これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。 これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。

引用元

<blockquote>
	<p>これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。</p>
	<p>これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。</p>
</blockquote>
<cite><a href="#">引用元</a></cite>

単一段落の引用

これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。 引用元

<q>これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。</q>
<cite><a href="#">引用元</a></cite>

文字装飾

文字装飾の過度な使用は控えてください。１つの記事内で最大5つまでの利用を推薦します。

ボールド

○○にはここが重要です。

<p>○○には<strong>ここが重要</strong>です。</p>

イタリック

○○にはここが重要です。

<p>○○には<em>ここが重要</em>です。</p>

等幅 (インラインコード)

見出しはh2タグです。

<p>見出しは<code>h2</code>タグです。</p>

改行

○○になります。
しかし○○は××です。

<p>○○になります。<br />しかし○○は××です。</p>

リンク

参考サイトはこちらです。

<p>参考サイトは<a href="https://classmethod.jp/">こちら</a>です。</p>

打ち消し

○○には○○が必要です。

<p>○○には<del datetime="2011-06-30T02:53:28+00:00">○○が必要</del>です。</p>

追加指定（insert）

2011年3月より○○が必要になりました。

<p><ins datetime="2011-06-30T02:53:28+00:00">2011年3月より○○が必要になりました。</ins></p>

これらの文字装飾は入力フォーム上部のボタンから指定が可能です。

リスト

箇条書きリスト

  • リスト１
  • リスト２
  • リスト３
    • 子リスト１
    • 子リスト２
<ul>
	<li>リスト１</li>
	<li>リスト２</li>
	<li>リスト３
		<ul>
			<li>子リスト１</li>
			<li>子リスト２</li>
		</ul>
	</li>
</ul>

番号付きリスト

  1. りんご
  2. みかん
  3. ぶどう
<ol>
	<li>りんご</li>
	<li>みかん</li>
	<li>ぶどう</li>
</ol>

定義リスト

用語
説明１
説明２
<dl>
	<dt>用語</dt>
	<dd>説明１</dd>
	<dd>説明２</dd>
</dl>

テーブル

表を作ることができます。
テーブルを作りにくい方はこちらのツールがオススメです。

テーブル見出し テーブル見出し テーブル見出し
テーブル見出し 項目 項目
テーブル見出し 項目 項目
テーブル見出し 項目 項目 
<table>
	<thead>
		<tr>
			<th>項目</th>
			<th>項目</th>
			<th>項目</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>ID</th>
			<td>項目</td>
			<td>項目</td>
		</tr>
		<tr>
			<th>ID</th>
			<td>項目</td>
			<td>項目</td>
		</tr>
		<tr>
			<th>ID</th>
			<td>項目</td>
			<td>項目</td>
		</tr>
	</tbody>
</table>

画像の貼り付け

画像は必ずパラグラフで囲う必要があります。
画像は「アップロード/挿入」から画像をアップロードし、そのまま記事に貼り付けます。
貼り付ける前に、カーソルの位置に注意してください。画像はその位置に貼り付けられます。

大サイズ

中サイズ

小サイズ（サムネイル）

<p><a href="http://publick-blog.s3.amazonaws.com/wp-content/uploads/2011/06/d3c21ecfb91bd7802e6d1a4e780100ba-640x370.png"><img class="alignnone size-thumbnail wp-image-155" title="Amazon Webサービス" src="http://publick-blog.s3.amazonaws.com/wp-content/uploads/2011/06/d3c21ecfb91bd7802e6d1a4e780100ba-298x98.png" alt="" width="298" height="98" /></a></p>

画像をポップアップ表示させる

cfb_15 aタグのhref属性に画像のリンクを指定することにより画像をポップアップ表示させることができます。右の画像をクリックしてみてください。

メディアファイルへのリンク付きで挿入する 画像はメディアの挿入機能から下記のようにメディアへのリンクを含んだかたちで、記事に挿入させます。

画像に線を付ける

線を付けるには画像のclassにimage-borderを追加します。

<img src="xxxx.png" class="alignnone image-border size-thumbnail wp-image-130298" />

線なし

show-tweet02

線あり

show-tweet02