2017-01-10

002 サンプルエントリー

コンテンツ css

段落

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

フォトライフ

左

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

右

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

ブロック

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大きい画像

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

罫線

h1見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h2見出し

h3見出し（*）

h4見出し（**）

h5見出し（***）

h6見出し

asin

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

「へんな会社」のつくり方 (NT2X)

作者:近藤淳也
翔泳社

Amazon

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

引用

本日（11月12日）から11月27日まで、はてなダイアリーの公開デザインコンテスト「公開デザイン祭2007秋」を開催します。
「公開デザイン祭2007秋」を開始しました - はてなダイアリー日記

リスト（ul,ol,dl）

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大賞1名：Amazonギフト券5万円分
入選9名：Amazonギフト券1万円分
- 大賞1名：Amazonギフト券5万円分
- 入選9名：Amazonギフト券1万円分

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大賞1名：Amazonギフト券5万円分
入選9名：Amazonギフト券1万円分
1. 大賞1名：Amazonギフト券5万円分
2. 入選9名：Amazonギフト券1万円分

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大賞1名: Amazonギフト券5万円分
入選9名: Amazonギフト券1万円分

テーブル

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

名前	色	個数
りんご	赤	1
みかん	だいだい	2

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

PRE

.XXX {
  width:999px;
  height:999px;
}

.propA, .propB, .propC {
  width:999px;
  height:999px;
}

#YYY {
  width:9px;
  height:999px;
}

2017-01-02

001 サンプルエントリー

コンテンツ css

段落
フォトライフ
- 左
- 右
- ブロック
- 大きい画像
- 罫線
h1見出し
- h2見出し
  - h3見出し（*）

段落

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

フォトライフ

左

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

右

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

ブロック

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大きい画像

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

罫線

h1見出し

h2見出し

h3見出し（*）

h4見出し（**）

h5見出し（***）

h6見出し

asin

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

「へんな会社」のつくり方 (NT2X)

作者: 近藤淳也
出版社/メーカー: 翔泳社
発売日: 2006/02/13
メディア: 単行本
購入: 62人クリック: 1,985回
この商品を含むブログ (1100件) を見る

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

引用

本日（11月12日）から11月27日まで、はてなダイアリーの公開デザインコンテスト「公開デザイン祭2007秋」を開催します。
「公開デザイン祭2007秋」を開始しました - はてなダイアリー日記

リスト（ul,ol,dl）

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大賞1名：Amazonギフト券5万円分
入選9名：Amazonギフト券1万円分
- 大賞1名：Amazonギフト券5万円分
- 入選9名：Amazonギフト券1万円分

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大賞1名：Amazonギフト券5万円分
入選9名：Amazonギフト券1万円分
1. 大賞1名：Amazonギフト券5万円分
2. 入選9名：Amazonギフト券1万円分

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大賞1名: Amazonギフト券5万円分
入選9名: Amazonギフト券1万円分

テーブル

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

名前	色	個数
りんご	赤	1
みかん	だいだい	2

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

PRE

.XXX {
  width:999px;
  height:999px;
}

.propA, .propB, .propC {
  width:999px;
  height:999px;
}

#YYY {
  width:9px;
  height:999px;
}

2012-05-11

マークアップ: HTML タグとフォーマット

css html コンテンツマークアップ

見出し

見出し壱

見出し弐

見出し参

見出し四

見出し五

見出し六

引用 (Blockquote) テスト

一行の引用。

ハングリーであれ、愚かであれ。

cite 参照を含む複数行の引用。

これは言語みたいなものだ。アルファベットすなわち音階を学び、文すなわちコードを学ぶ。そしてやがてホーンと即興で会話するようになる。即興で話すのはすばらしいことだと思うが、私には決して会得できないだろう。しかし音楽ともなれば、私は即座によろこんで会話する。そう、それがジャズ音楽のすべてだ。スタン・ゲッツ

2012-05-10

マークアップ: 画像の配置

css コンテンツマークアップ画像

画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっとうずめてみることです。さあ、はじめましょう。

画像の配置では、ユーザーが「指定なし」「右寄せ」「左寄せ」「中央揃え」の中から自分の好きなものを選べるようにする必要があります。さらに、「サムネイル」「中サイズ」「大サイズ」「フルサイズ」という選択肢の中から大きさを選べるようにするべきです。

画像配置 580x300

上記の画像は中央寄せになるはずです。

このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。

ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !

次は、とても大きな画像のテストです。そして、この画像には配置の指定がありません。

画像配置 1200x400

上記の画像は1200ピクセルもありますが、コンテンツエリアからはみ出る事はなく収まっています。

画像配置 300x200

そして今後は右寄せに移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです。

そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。

さて、これで終わりと思ったかもしれませんが、これからキャプションのテストに入ります !

[caption id="attachment_906" align="aligncenter" width="580"] 画像配置 580x300 580x300 画像のキャプション例。[/caption]

上記の画像は中央寄せになるはずです。キャプションにはリンクが含まれていますが、おかしな表示になっていないか確認しましょう。

[caption id="attachment_904" align="alignleft" width="150"] 画像配置 150x150 ちょっとしたキャプション[/caption]

このパラグラフの残りの部分は、150x150 サイズの左寄せ画像の回り込みをテストするためのつなぎです。

ご覧の通り、画像の上・下・右にスペースが必要です。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !

それでは、とても大きな画像のテストです。そして、この画像にも配置の指定はありません。

[caption id="attachment_907" align="alignnone" width="1200"] 画像配置 1200x400 とても大きな画像のコメント[/caption]

上記の画像は1200ピクセル幅ですが、コンテンツエリアからはみ出すべきではありません。コンテンツのフローを視覚的に邪魔しないかたちで、指定のエリア内に収まっている必要があります。

[caption id="attachment_905" align="alignright" width="300"] 画像配置 300x200 右側いるのほ良い気分です。[/caption]

そして今後は右寄せ画像に移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです

それでは、これで終わりです。画像配置のテスト、お疲れ様でした !

2012-05-09

マークアップ: テキスト配置

css コンテンツマークアップ

デフォルト

これは段落です。特別なテキスト配置処理が付いていない状態になっている必要があります。通常のテキストフローと同じように表示されるべきです。なにも特別なことはありません。ただ、愛とともに自由に流れるテキストだけ。完全に中立的で、どちらかの肩を持つこともなく、かといってどっちつかずの態度というわけでもない。それだけ。それだけです。ここにいることが好きで、片方のサイドを選ぶ必要を感じていない。そんな彼はほっといてあげてください。彼は彼のままで。私を信じて。

左寄せ

これは段落です。左寄せになっています。彼の視点はやや左寄りです。好きな色は緑。左寄せな彼はエコフレンドリーになりがちですが、実際にそうだというはっきりした証拠というのはとくにありません。彼は富を共有するのが好きですが、公平な配分については両端揃えの彼にお任せといったところです。

中央寄せ

これは段落です。中央寄せになっています。中央に寄っているというのはつまり、どっちつかずということです。意見がコロコロ変わったりします。自分の意見を決めるのに時間がかかります。どちらかのサイドを選びたいと思っているんです。本当に。意図はすばらしいんですが、実際には助けになるというより物事を必要以上に複雑にしてしまったりします。彼の気持ちを振り向かせられれば最高でしょう。中央寄せの彼は賄賂も受け取るらしいですよ。

右寄せ

これは段落です。右寄せになっています。彼の視点は右寄りなんです。他の人に何をどんなふうにすべきか指図されるのをいやがります。右派の彼はたくさんの銃を保有していて、狩りに繰り出すのが好きです。いいじゃないですか。球場5つ分くらいの距離からなかなかいい弾を撃つわけです。どんぴしゃに。すごいですよ。

両端揃え

これは段落です。左右両端揃えになっています。英語ではジャスティファイドと呼ばれていますがジャスティン・ティンバーレイクとは関係ありません。普通、両端揃えの彼はかなり厳格です。すべてがあるべき場所にぴったりと収まっていないと気が済まず、他の配置のようにばらばらだったりはしません。だから彼の方がいいなんて言ってるわけではないんですよ。でもまあ確かに、エリート気取りの態度だなって感じることはありますけど。

2012-05-05

マークアップ: 特殊記号を含むタイトル ~`!@#$%^&*()-_=+{}[]/;:'"?,.>

html タイトルマークアップ

タイトルに特殊記号を含めた場合にも、レイアウトや機能に悪影響が出ないようにする必要があります。

投稿タイトル内の特殊記号は minify された JavaScript を使用している際に問題を引き起こす場合があることが確認されています。特に管理画面での投稿編集に影響が出やすいので注意しましょう (例: メタ・ボックス、メディアアップロードなど) 。

ラテン文字テスト

これは、テーマで使われているフォントで基本的なラテン文字が表示できるかどうかのテストです。

!	"	#	$	%	&	'	(	)	*
+	,	-	.	/	0	1	2	3	4
5	6	7	8	9	:	;	>	=	<
?	@	A	B	C	D	E	F	G	H
I	J	K	L	M	N	O	P	Q	R
S	T	U	V	W	X	Y	Z	[
]	^	_	`	a	b	c	d	e	f
g	h	i	j	k	l	m	n	o	p
q	r	s	t	u	v	w	x	y	z
{	\|	}	~

2012-05-01

マークアップ: マークアップ付きのタイトル

css html タイトルマークアップ

以下を確認してください。

投稿タイトル内の「付き」という文字が斜体で表示され、「マークアップ」が太字になる。
投稿タイトルマークアップはブラウザウィンドウ・タブのタイトルには表示されない。

2012-03-15

テンプレート: アイキャッチ画像 (縦)

未分類極端な例画像

この投稿は、テーマが対応している場合、アイキャッチ画像を表示すべきです。

正方形ではない画像の場合、特別なスタイリング上の問題が発生することがあります。

これは縦向きのアイキャッチ画像テスト向けの投稿です。

2012-03-15

テンプレート: アイキャッチ画像 (横)

未分類極端な例画像

この投稿は、テーマが対応している場合、アイキャッチ画像を表示すべきです。

正方形ではない画像の場合、特別なスタイリング上の問題が発生することがあります。

これは横向きのアイキャッチ画像テスト向けの投稿です。

2012-03-15

テンプレート: More タグ

コンテンツ未分類

このコンテンツは more タグです。

この文のすぐ後は、「続きを読む」ボタンが表示されます。

2012-03-15

テンプレート: 抜粋 (ユーザー定義)

コンテンツ未分類

これは投稿の内容です。単独ページで見た際にはユーザーが定義した抜粋ではなく、これが表示されるべきです。

2012-03-14

テンプレート: 抜粋 (自動生成)

コンテンツ未分類

これは投稿の内容です。単独ページで表示する場合、自動生成の抜粋ではなく、これが表示されるべきです。アーカイブの目次のページは、この内容から自動生成された抜粋が表示するべきです。テーマで定義されたフィルターに依存し、テーマごとに自動抜粋の長さは変わるでしょう。デフォルトの自動抜粋の長さは55語です。したがって、自動抜粋のテストのためには、この投稿は55語以上でなければなりません。

レイアウトの問題が出ないことを保証するために、ぜひ自動生成の抜粋の整形をテストしてください。また、<code>excerpt_length</code> や <code>excerpt_more</code> などすべてのフィルターが適用され、正しく表示されることを確認してください。

【訳注】日本語の場合、WP Multibyte Patch の利用を強くお奨めします。抜粋の量を「語数」ではなく「文字数」にするなど多くの補助機能が提供されます。詳しくは WP Multibyte Patch をご覧ください。

!	"	#	$	%	&	'	(	)	*
+	,	-	.	/	0	1	2	3	4
5	6	7	8	9	:	;	>	=	<
?	@	A	B	C	D	E	F	G	H
I	J	K	L	M	N	O	P	Q	R
S	T	U	V	W	X	Y	Z	[
]	^	_	`	a	b	c	d	e	f
g	h	i	j	k	l	m	n	o	p
q	r	s	t	u	v	w	x	y	z
{	\|	}	~

!	"	#	$	%	&	'	(	)	*
+	,	-	.	/	0	1	2	3	4
5	6	7	8	9	:	;	>	=	<
?	@	A	B	C	D	E	F	G	H
I	J	K	L	M	N	O	P	Q	R
S	T	U	V	W	X	Y	Z	[
]	^	_	`	a	b	c	d	e	f
g	h	i	j	k	l	m	n	o	p
q	r	s	t	u	v	w	x	y	z
{	\|	}	~

!	"	#	$	%	&	'	(	)	*
+	,	-	.	/	0	1	2	3	4
5	6	7	8	9	:	;	>	=	<
?	@	A	B	C	D	E	F	G	H
I	J	K	L	M	N	O	P	Q	R
S	T	U	V	W	X	Y	Z	[
]	^	_	`	a	b	c	d	e	f
g	h	i	j	k	l	m	n	o	p
q	r	s	t	u	v	w	x	y	z
{	\|	}	~