Own products

  • 新規事業のアイディア創造機

Freebie

2016
02/29

WordPressの記事部分に使えるHTML雛形をつくってみた

この記事の読了時間:約1340

  • このエントリーをはてなブックマークに追加

WordPressのサイト制作案件とかしてて、投稿記事表示確認に使えるような、妥当なテストデータ / テンプレート / 雛形が無いかなーと。

絶対どっかにありそうなのに、探すと全然見つからないので、ならばいっそと自作しました。

WordPressデフォルトのビジュアルエディターとテキストエディターの両方で使われてるHTMLタグを筆頭に、おまけで一般的な table タグを、サイコーのフォーム生成プラグイン MW WP Form 用のテンプレートに添えて。

著作権は放棄しますので、お好きにお使いくださいませ☆

WordPressの記事部分HTML雛形

下記、マウスオーバーすると右上に出てくるメニューの左、「ソースを表示」をクリックすると本文だけポップアップしてコピペできますよ☆

<h1>これは h1 タグです。</h1>
<p>これは p タグです。私は今日初めてこの学習院というものの中に這入りました。もっとも以前から学習院は多分この見当だろうぐらいに考えていたには相違ありませんが、はっきりとは存じませんでした。中へ這入ったのは無論今日が初めてでございます。<br />さきほど岡田さんが紹介かたがたちょっとお話になった通りこの春何か講演をというご注文でありましたが、その当時は何か差支があって、岡田さんの方が当人の私よりよくご記憶と見えてあなたがたにご納得のできるようにただいまご説明がありましたが、とにかくひとまずお断りを致さなければならん事になりました。</p>

<h2>これは h2 タグです。</h2>
<p>これは p タグです。しかしただお断りを致すのもあまり失礼と存じまして、この次には参りますからという条件をつけ加えておきました。<br />その時念のためこの次はいつごろになりますかと岡田さんに伺いましたら、此年の十月だというお返事であったので、心のうちに春から十月までの日数を大体繰ってみて、それだけの時間があればそのうちにどうにかできるだろうと思ったものですから、よろしゅうございますとはっきりお受合申したのであります。</p>

<h3>これは h3 タグです。</h3>
<p>これは p タグです。ところが幸か不幸か病気に罹りまして、九月いっぱい床についておりますうちにお約束の十月が参りました。<br />十月にはもう臥せってはおりませんでしたけれども、何しろひょろひょろするので講演はちょっとむずかしかったのです。<br />しかしお約束を忘れてはならないのですから、腹の中では、今に何か云って来られるだろう来られるだろうと思って、内々は怖がっていました。</p>

<h4>これは h4 タグです。</h4>
<p>これは p タグです。そのうちひょろひょろもついに癒ってしまったけれども、こちらからは十月末まで何のご沙汰もなく打ち過ぎました。<br />私は無論病気の事をご通知はしておきませんでしたが、二三の新聞にちょっと出たという話ですから、あるいはその辺の事情を察せられて、誰かが私の代りに講演をやって下さったのだろうと推測して安心し出しました。</p>

<h5>これは h5 タグです。</h5>
<p>これは p タグです。ところへまた岡田さんがまた突然見えたのであります。<br />岡田さんはわざわざ長靴を穿いて見えたのであります。<br />(もっとも雨の降る日であったからでもありましょうが、)そう云った身拵えで、早稲田の奥まで来て下すって、例の講演は十一月の末まで繰り延ばす事にしたから約束通りやってもらいたいというご口上なのです。<br />私はもう責任を逃れたように考えていたものですから実は少々驚ろきました。<br />しかしまだ一カ月も余裕があるから、その間にどうかなるだろうと思って、よろしゅうございますとまたご返事を致しました。</p>

<h6>これは h6 タグです。</h6>
<p>これは p タグです。右の次第で、この春から十月に至るまで、十月末からまた十一月二十五日に至るまでの間に、何か纏ったお話をすべき時間はいくらでも拵えられるのですが、どうも少し気分が悪くって、そんな事を考えるのが面倒でたまらなくなりました。<br />そこでまあ十一月二十五日が来るまでは構うまいという横着な料簡を起して、ずるずるべったりにその日その日を送っていたのです。</p>
<p>This tag is 'p'. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. PneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>これは p タグです。あまり時間が長くなりますからこれでご免を蒙ります。</p>

<strong>これは strong タグです。bマークで挿入されます。</strong>
<em>これは em タグです。iマークで挿入されます。</em>
<a href="#">これは a タグです。linkマークで挿入されます。</a>
<blockquote>これは blockquote タグです。b-quoteマークで挿入されます。<br />blockquote = 囲まれた部分が引用・転載であることを表す。</blockquote>
<del>これは del タグです。</del>
<ins>これは ins タグです。</ins>
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=%E3%81%93%E3%82%8C%E3%81%AF+img+%E3%82%BF%E3%82%B0%E3%81%A7%E3%81%99%28300x250%29&w=300&h=250" />

<ul>
	<li>これは ul > li タグです。</li>
	<li>これは ul > li タグです。</li>
	<li>これは ul > li タグです。
		<ul>
			<li>これは ul > li > ul > li タグです。</li>
			<li>これは ul > li > ul > li タグです。</li>
			<li>これは ul > li > ul > li タグです。</li>
		</ul>
	</li>
</ul>
<ol>
	<li>これは ol > li タグです。</li>
	<li>これは ol > li タグです。</li>
	<li>これは ol > li タグです。
		<ol>
			<li>これは ol > li > ol > li タグです。</li>
			<li>これは ol > li > ol > li タグです。</li>
			<li>これは ol > li > ol > li タグです。</li>
		</ol>
	</li>
</ol>

<code>これは code タグです。code = プログラムのソースコードであることを表す。インライン要素なので、字下げや改行を含む場合は pre タグで囲む。等幅フォントはデフォルト。</code>
<hr />これは hr タグです(上下の2箇所)。<hr />
<pre>これは pre タグです。pre = 整形済みテキスト(preformatted text)をであることを表す。
スペースやタブ喉の字下げや改行が、書いたとおりに表示される。等幅フォントはデフォルト。
function sampleCode() {
	var hoge = '&lt;fuga&gt;';
	return true;
};</pre>

<h1>以下 table タグとその子要素です。</h1>
<table id="inquiry_table">
	<tr style="display:none">
		<th colspan="2">
お問い合わせありがとうございます。
下記フォームに必要事項・お問い合わせ内容を入力の上、【送信内容を確認】をクリックしてください。
お送り頂きました内容を確認のうえ、折り返しご連絡させて頂きます。

お問い合わせ後、自動返信メールをお送りしております。
しばらくたってもメールの返信が無い場合は、お客様によりご入力頂いたメールアドレスに誤りがある場合がございます。
その際は、お手数ですが当フォームより再度お問い合わせくださいませ。

※お問い合わせに関するご注意
お客さまの個人情報やお寄せ頂いた相談内容は、お問い合わせへの回答および対応上必要な手続きにのみ使用させて頂きます。また、お問い合わせ内容によっては、回答できない場合や回答にお時間を頂く場合がございます。あらかじめご了承ください。
		</th>
	</tr>

	<tr>
		<th>氏名<span>*必須</span></th>
		<td>[mwform_text name="inquiry_name" placeholder="山田 花子"]</td>
	</tr>
	<tr>
		<th>メールアドレス<span>*必須</span></th>
		<td>[mwform_email name="inquiry_mailaddress" placeholder="mailaddress@example.com"]</td>
	</tr>
	<tr>
		<th>電話番号</th>
		<td id="inquiry_tel_box">[mwform_tel name="inquiry_tel"]</td>
	</tr>
	<tr>
		<th>お問い合わせ内容<span>*必須</span</th>
		<td>[mwform_textarea name="inquiry_message" placeholder="ご意見、ご質問、ご要望等、ご自由にお書きください。"]</td>
	</tr>

	<tr style="display:none">
		<th colspan="2">
{inquiry_name} 様

この度は、お問い合わせありがとうございます。
お問い合わせを下記の内容で承りましたのでご連絡申し上げます。

改めてご連絡させて頂きますので、
今しばらくお待ち頂きますようお願い申し上げます。

---------------------------------------------------------------
■氏名 : {inquiry_name}
■メールアドレス : {inquiry_mailaddress}
■電話番号 : {inquiry_tel}
■お問い合わせ内容 : {inquiry_message}
---------------------------------------------------------------

---------------------------------------------------------------
このメールはシステムからの自動返信メールです。
このメールに対して返信することはできませんのでご了承ください。
		</th>
	</tr>
</table>
<div id="inquiry_submit_box" style="display:none">[mwform_backButton value="戻る"] [mwform_submitButton name="inquiry_submit" confirm_value="送信内容を確認" submit_value="送信する"]</div>

これをコピって、投稿画面のテキストエディターに貼り付ければ、使うHTMLタグはほぼほぼ網羅できるかと。

どやー!

デザイン作業とかしなきゃいけないタイミングに限って、ブログ書く意欲が湧くのよねーw

それではPhotoshopの旅に戻ります。。。

  • このエントリーをはてなブックマークに追加

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Favorite feeds

    Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate