Clematis デモサイト

インタビュー記事でよくある、二人もしくは複数人の発言を対話スタイルで表現するテンプレートです。以下のコードをコピーしてご利用ください。

テキストのみのシンプルインタビュー記事のパターン

スピーカーを識別しやすくするため、4色の人型マークを用意しています。

スピーカー01スピーカー名を、<span class="speaker01">で囲むと、人型マークとスピーカー名とコロンが表示されます。

スピーカー02<span class="speaker02"> のパターンです。

スピーカー03<span class="speaker03"> のパターンです。

スピーカー04<span class="speaker04"> のパターンです。

<p><span class="speaker01">スピーカー01</span>スピーカー名を、<code><span class="speaker01"></code>で囲むと、人型マークとスピーカー名とコロンが表示されます。</p>
<p><span class="speaker02">スピーカー02</span><code><span class="speaker02"></code> のパターンです。</p>
<p><span class="speaker03">スピーカー03</span><code><span class="speaker03"></code> のパターンです。</p>
<p><span class="speaker04">スピーカー04</span><code><span class="speaker04"></code> のパターンです。</p>

スピーカーアイコン＆吹き出しアリのリッチなインタビュー記事のパターン

丸く切り抜かれたユーザーアイコンとその下に名前、横に吹き出しと発言が出てくるスタイルです。

デザイナー
たなか

dt class="moderator" の方は、モデレータとなり左に吹き出しが出ます。

発言は段落ごとにpでくくりましょう

エンジニア
さとう

dt のみの場合は、右に吹き出しが出ます。アイコンは必ず正方形にしてください。

<dl class="conversation">
	<dt class="moderator">
		<div class="userpic"><img src="https://omdemo.movabletype.io/.assets/seihoukei.png" alt="" />
		<p class="name">デザイナー<br />たなか</p>
		</div>
	</dt>
	<dd>
	<p>dt class="moderator" の方は、モデレータとなり左に吹き出しが出ます。</p>
	<p>発言は段落ごとにpでくくりましょう</p>
	</dd>

	<dt>
		<div class="userpic"><img src="https://omdemo.movabletype.io/.assets/thumbnail/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99-640wri.png" />
	<p class="name">エンジニア<br />さとう</p></div>
	</dt>
	<dd>
	<p>dt のみの場合は、右に吹き出しが出ます。アイコンは必ず正方形にしてください。</p>
	</dd>
</dl>