新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。新機能、カスタムフィールドの「メンバー」を使って、詳細なユーザー情報を表示しよう!新機能、カスタムフィールドの「メンバー」を使って、詳細なユーザー情報を表示しよう!2018.08.08機能紹介デザイン運用saoriツイート先日、カスタムフィールドに新たなシステムオブジェクト、「メンバー」が追加されました。このカスタムフィールドを作成すると、メンバーのユーザー情報にフィールドが追加されます。SNSのURLや、プロフィール文など、独自でユーザー情報を追加できるようになりますよ。ブログやメディアサイトなどで執筆メンバーが複数いる場合に「各執筆者のサイトやSNSを表示させたい!」という場合にこのフィールドが有効です。Media」上で「メンバー」のカスタムフィールドを活用して、記事の終わりにユーザ情報を表示させるカスタマイズをしてみましょう!サンプルコードも紹介しているので是非一緒に試してみてください。Media」の記事の終わりにユーザー情報を表示させる流れメンバーのカスタムフィールドを作る記事のテンプレートを編集するCSSを編集するサンプルコードメンバーのカスタムフィールドを作るまずはカスタムフィールドを作成します。サイトの編集画面から、カスタムフィールド>新規に移り、必要事項を入力していきます。システムオブジェクトをメンバーにするのがポイントです!記事の終わりに表示させたい内容を考え、今回は以下の6つを設定しました。ウェブサイト用メールアドレスウェブサイト用プロフィール画像メールの表示facebookアカウントtwitterアカウント表示プロフィール設定については上記の画像を参考にしてください。ウェブサイト用プロフィール画像、ウェブサイト用表示名、ウェブサイト用メールアドレスは、アカウント内で設定されているものとは別のものを使いたい場合のために用意しました。メールアドレスはメンバーで設定されているので、表示/非表示を切り替えるチェックボックスで対応します。入ったユーザー情報の画面にカスタムフィールドが追加されています。これでカスタムフィールドの準備が完了しました!記事のテンプレートを編集する続いて、カスタムフィールドに対応できるようにテンプレート側を編集します。執筆者情報を記事の終わりに表示させたいので、デザイン>テンプレートから記事のテンプレートを開きます。カスタムフィールドに対応するMTタグを考えます。プロフィール、facebookアカウント、twitterアカウントはフィールドに「入力があれば内容を表示」させます。identifier="識別子">〜</mt:If>を使って対応します。ウェブサイト用表示名とウェブサイト用プロフィール画像には「フィールドに入力があれば内容を表示し、なければユーザ情報に入っている内容を表示」させることにしましょう。elseで分岐させて対応します。メールアドレスは「チェックボックスにチェックがあれば内容を表示」という仕組みがいいですね。ne="0">〜</mt:If>で対応しましょう。SNSやメールについては入力情報はリンク先のURLとして使用し、実際表示される内容はアイコンにすると自然なデザインになります。最終的なソースコードは以下のようになりました。これで、記事テンプレートの編集は完了です!CSSを編集する編集したテンプレートに対応するCSSを記述します。テンプレート>スタイルシートに、以下を追記しましょう。}}CSSを保存し、カスタムフィールド内に情報を入力してみましょう...記事のおわりに、メンバーの紹介がつきました!リンク先はカスタムフィールドで設定したURLになっているはずです。Media」のユーザー情報の表示が完成です!CSSはお好みでアレンジしても良いでしょう。以上が新機能、メンバーのカスタムフィールドを使ったユーザー情報の表示の手順でした。Media」以外のテーマで同じようにカスタマイズできます。作成したウェブサイト毎に14日間無料で利用可能です。制作者向けポータルお問い合わせ・FAQ。