MovableType.net 逆引き辞典

応用

記事の投稿者の名前とプロフィール画像を表示したエリアを作成する

記事の投稿者情報は、下記MTタグで取得できます。

使用するMTタグ

  • mt:AuthorName … プロフィール設定の「ユーザー名」を表示する
  • mt:AuthorDisplayName … プロフィール設定の「表示する名前」を表示する
  • mt:AuthorURL … ユーザーのプロフィール設定で入力した「ウェブサイト URL」を取得
  • mt:AuthorUserpic … 登録ユーザーのプロフィール画像を表示する為のimg要素を取得
  • mt:AuthorUserpicURL … 登録ユーザーのプロフィール画像 URLを取得
  • mt:AuthorEmail … ユーザーのプロフィール設定で入力した「メールアドレス」を取得

これらを組み合わせて、投稿者情報の表示エリアを作っていきます。
「アーカイブ・テンプレート」の「アーカイブタイプ」「記事」の中で下記記述を追加できます。

記述・出力サンプル

「ユーザー名」、「img要素」を表示

<div>
      <h1><$mt:AuthorName$></h1>
      <$mt:AuthorUserpic$>
    </div>

ユーザー名

プロフィール画像の img タグに id や class などを記述したい場合は<$mt:AuthorUserpicURL$>を使用します。

「img要素」をmt:AuthorUserpicURLで表示

実際にブログ運用する際は、プロフィール画像の設定が無い場合も想定できます。
そんなときはmt:ifでデフォルト画像を表示するよう振り分けをしておくことで、空欄になってしまうことを防げます。
また、ユーザー名をクリックすると同ユーザーの記事一覧ページにリンクされると理想的です。
下記に実用的な例をご紹介します。

実用例

<div>
  <p>この記事の筆者</p>
  <div>
    <figure>
      <img src="<mt:If tag='AuthorUserpicURL' square="1"><$mt:AuthorUserpicURL$><mt:Else>https://movabletype.net/dict/images/hanaicon.png</mt:If>" width="90" height="90">
    </figure>
    <div>
      <h1><a href="<$mt:ArchiveLink archive_type='Author'$>"><$mt:EntryAuthorDisplayName$></a></h1>
      <p>メールアドレス:<a href="mailto:<$mt:AuthorEmail$>"><$mt:AuthorEmail$></a></p>
    </div>
  </div>
</div>

出力

この記事の筆者

ユーザー名

メールアドレス:●●●@sample.com

※スタイルシートは別途用意してください。

関連ページ