Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

WordPress記事ページのダミーデータHTML

5f19431ad2ab5e60e4fc3bdc942c3ed6.png

内容

毎回、制作で必要なのでメモ📝
デザインに無くとも各タグのスタイルはコーディングでよしなに最低限指定しておきたい。
こちらを突っ込んで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も後で作ります…!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
7
Help us understand the problem. What are the problem?