【記事テンプレート】インタビュー記事
インタビュー記事でよくある、二人もしくは複数人の発言を対話スタイルで表現するテンプレートです。以下のコードをコピーしてご利用ください。
テキストのみのシンプルインタビュー記事のパターン
スピーカーを識別しやすくするため、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://theme.movabletype.net/lekumomedia/.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://theme.movabletype.net/lekumomedia/.assets/%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>