内容

毎回、制作で必要なのでメモ📝
デザインに無くとも各タグのスタイルはコーディングでよしなに最低限指定しておきたい。
こちらを突っ込んでCSSアテておけば、納品間際に慌てなくて済みます。
コピペで使えるWordPressで投稿（WYSIWYG）に入力するパーツ
デフォルトのボタンで入力できるよう、見出しはclass無し/classはWordPress自動付与を使っています。
HTML

<h1>WordPressのWYSIWYGテスト用パーツです</h1>

<h2>見出し／段落</h2>
h1タグ／h2タグ／h3タグ／h4タグ／h5タグ／h6タグ：各複数行表示
pタグ／pタグ2連続表示
  
<h1>h1タグ:1行</h1>
<h1>h1タグ:複数行 見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。</h1>
 
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
 
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  
<h2>h2タグ:1行</h2>
<h2>h2タグ:複数行 見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。</h2>
 
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
 
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  
<h3>h3タグ:1行</h3>
<h3>h3タグ:複数行 見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。</h3>
 
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
 
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  
<h4>h4タグ:1行</h4>
<h4>h4タグ:複数行 見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。</h4>
 
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
 
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  
<h5>h5タグ:1行</h5>
<h5>h5タグ:複数行 見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。</h5>
 
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
 
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  
<h6>h6タグ:1行</h6>
<h6>h6タグ:複数行 見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。</h6>
  
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
 
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>

<h2>区切り線</h2>
hrタグ
<hr /> 

<h2>段落内のタグ</h2>
aタグ／strongタグ／emタグ／delタグ／insタグ

<p>
これはテスト投稿ですこれは<strong>strongタグ</strong>これは<em>emタグ</em>ですこれはテスト投稿です<del datetime="2019-02-14T09:37:14+00:00">delタグ</del>これはテスト投稿ですこれは<ins datetime="2019-02-14T09:38:34+00:00">insタグ</ins>これはテスト投稿ですこれはテスト投稿です<a href="http://link">リンクURL</a>これはテスト投稿ですこれはテスト投稿ですこれはテスト投稿ですこれはテスト投稿ですこれはテスト投稿ですこれはテスト投稿です これはテスト投稿ですこれはテスト投稿ですこれはテスト投稿ですこれはテスト投稿ですこれはテスト投稿ですこれはテスト投稿です</p>

<h2>リスト</h2>
ulタグ／olタグ

<ul>
<li>リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。</li>
<li><b>リストの太字テキストが入ります。</b><a>http://hoge.com http://hoge.com</a>リストのテキストが入ります。リストのテキストが入ります。</li>
<li><b>リストの太字テキストが入ります。</b><a>http://hoge.com http://hoge.com</a>リストのテキストが入ります。リストのテキストが入ります。</li>
</ul>
<ol>
<li>リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。</li>
<li><b>リストの太字テキストが入ります。</b><a>http://hoge.com http://hoge.com</a>リストのテキストが入ります。リストのテキストが入ります。</li>
<li><b>リストの太字テキストが入ります。</b><a>http://hoge.com http://hoge.com</a>リストのテキストが入ります。リストのテキストが入ります。</li>
</ol>
<ul>
<li>リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。</li>
<li><a>内部リンク</a></li>
<li><a target="_blank" rel="noopener">外部リンク</a></li>
</ul>

<h2>引用</h2>

<blockquote>引用文がここに入ります。サンプルテキストもここに入り、sampletextもここに入ります。引用文がここに入ります。サンプルテキストもここに入り、sampletextもここに入ります
<a>出展 http://--------</a></blockquote>

<h2>code</h2>

<code>codeが入ります。codeが入ります。codeが入ります。codeが入ります。codeが入ります。codeが入ります。codeが入ります。codeが入ります。</code>

<h2>ギャラリー 横4列／横3列／横2列／横1列</h2>

<h3>横4列</h3>
<div id="gallery-5" class="gallery galleryid-1 gallery-columns-4 gallery-size-thumbnail"><dl class="gallery-item">
<dt class="gallery-icon landscape">
<a href=""><img width="150" height="150" src="http://placehold.jp/24/eeeeee/000000/150x150.png" class="attachment-thumbnail size-thumbnail" alt=""></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon landscape">
<a href=""><img width="150" height="150" src="http://placehold.jp/24/999999/000000/150x150.png" class="attachment-thumbnail size-thumbnail" alt=""></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon landscape">
<a href=""><img width="150" height="150" src="http://placehold.jp/24/666666/eeeeee/150x150.png" class="attachment-thumbnail size-thumbnail" alt=""></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon landscape">
<a href=""><img width="150" height="150" src="http://placehold.jp/24/cccccc/000000/150x150.png" class="attachment-thumbnail size-thumbnail" alt=""></a>
</dt>
</dl>
<br style="clear: both">
</div>

<h3>横3列</h3>
<div id="gallery-5" class="gallery gallery-columns-3 gallery-size-thumbnail">
<dl class="gallery-item">
<dt class="gallery-icon landscape">
<a href=""><img width="150" height="150" src="http://placehold.jp/24/eeeeee/000000/150x150.png" class="attachment-thumbnail size-thumbnail" alt=""></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon landscape">
<a href=""><img width="150" height="150" src="http://placehold.jp/24/999999/000000/150x150.png" class="attachment-thumbnail size-thumbnail" alt=""></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon landscape">
<a href=""><img width="150" height="150" src="http://placehold.jp/24/666666/eeeeee/150x150.png" class="attachment-thumbnail size-thumbnail" alt=""></a>
</dt>
</dl>
<br style="clear: both">
</div>

<h3>横2列</h3>
<div id="" class="gallery gallery-columns-2 gallery-size-thumbnail">
<dl class="gallery-item">
<dt class="gallery-icon landscape">
<a href=""><img width="150" height="150" src="http://placehold.jp/24/eeeeee/000000/150x150.png" class="attachment-thumbnail size-thumbnail" alt=""></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon landscape">
<a href=""><img width="150" height="150" src="http://placehold.jp/24/999999/000000/150x150.png" class="attachment-thumbnail size-thumbnail" alt=""></a>
</dt>
</dl>
<br style="clear: both">
</div>

<h3>横1列</h3>
<div id="" class="gallery gallery-columns-1 gallery-size-thumbnail">
<dl class="gallery-item">
<dt class="gallery-icon landscape">
<a href=""><img width="150" height="150" src="http://placehold.jp/24/eeeeee/000000/150x150.png" class="attachment-thumbnail size-thumbnail" alt=""></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon landscape">
<a href=""><img width="150" height="150" src="http://placehold.jp/24/999999/000000/150x150.png" class="attachment-thumbnail size-thumbnail" alt=""></a>
</dt>
</dl>
<br style="clear: both">
</div>

<h2>画像／left／center／right／指定なし</h2>

<h3>画像／left</h3>
<img class="alignleft size-thumbnail" src="http://placehold.jp/24/999999/000000/240x120.png" alt="" width="150" height="150">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<h3>画像／center</h3>
<img class="aligncenter size-thumbnail" src="http://placehold.jp/24/999999/000000/240x120.png" alt="" width="150" height="150"> テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<h3>画像／right</h3>
<img class="alignright size-thumbnail" src="http://placehold.jp/24/999999/000000/240x120.png" alt="" width="150" height="150">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<div id="attachment_123" class="wp-caption alignnone"><img class="size-full" src="http://placehold.jp/24/eeeeee/000000/420x300.png" alt="代替えテキスト"><p class="wp-caption-text">キャプションが入ります。キャプションが入ります。キャプションが入ります。キャプションが入ります。キャプションが入ります。キャプションが入ります。</p></div>

<h2>表</h2>
tableタグ

<table>
<thead>
<tr>
<th>項目名が入ります。</th>
<th>項目名が入ります。</th>
</tr>
</thead>
<tbody>
<tr>
<th>見出しが入ります。</th>
<td>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</td>
</tr>
<tr>
<th>見出しが入ります。</th>
<td>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</td>
</tr>
<tr>
<th>見出しが入ります。</th>
<td>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</td>
</tr>
<tr>
<th>見出しが入ります。</th>
<td>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</td>
</tr>
</tbody>
</table>
HTMLだけですがCSSも後で作ります…！