フリーコンテンツブロックで登録情報表示ページを作成する方法

会員ページ等で、ログインしたユーザー自身の登録情報を表示するページを必要となるときがあります。
今回、フリーコンテンツブロックで登録情報表示ページを作成する方法をご紹介します。

登録情報表示ページのイメージ

ユーザーはまず認証エリアにログインします。
ログイン後のページ内から遷移した画面で、ユーザーの登録情報が閲覧できます。

作成・設定方法

認証エリアを作成する

ユーザーがログインする認証エリアを作成します。
詳しくはサポートサイトの「認証エリア」をご参考ください。
※既に設定済みの場合は追加の設定は不要です。

ページを作成する

認証エリアの中に認証「あり」のページを新規に作成します。
識別名がURLのディレクトリ名になるので、使用したい文言を設定してください。
※設定している場合は追加の設定は不要です。

ログイン後のページでリンクを追加する

ログイン後トップページ「body」タブの「＋」ボタンから、リンクを追加します。
「サイト内ページ選択」を選択し、「ページ選択」ボタンから登録情報表示のページを指定します。
リンクテキストに設定した値がリンクの文言となるので、使用したいものを設定してください。
※設定している場合は追加の設定は不要です。

フリーコンテンツブロックを追加する

ページの「body」タブの「＋」ボタンから、フリーコンテンツブロックを新規作成します。

追加したフリーコンテンツブロックの設定画面は「ブロック一覧」ボタンで開きます。

フリーコンテンツブロックのレイアウトを整える（ソース設定）

ソース設定の場合のサンプルコードは以下です。
「フリーコンテンツ」と「CSS」のタブに貼り付けて使用してください。
「${siteClient.record[xx]}」の「xx」にはフィールドIDを入れてください。

下記サンプルコードはレコードアイテムブロックのレイアウトを流用しています。

フリーコンテンツブロック

コピー

<div class="sp-record-item-container"> 
  <div class="sp-record-item-parts sp-html-parts"><p><span style="font-size: 1.5rem;">登録情報</span></p></div> 
  <!--/* 会員ID*/--> 
  <sp:record-item-field></sp:record-item-field> 
  <div class="sp-record-item-parts sp-record-item-field"> 
    <div class="sp-record-item-label">会員ID</div> 
    <div class="sp-record-item-data">
      <span class="sp-record-item-embedded" th:text="${siteClient.record[xx]}">Example</span>
    </div> 
  </div> 
  <!--/* 氏名 */--> 
  <sp:record-item-field></sp:record-item-field> 
  <div class="sp-record-item-parts sp-record-item-field"> 
    <div class="sp-record-item-label">氏名</div> 
    <div class="sp-record-item-data">
      <span class="sp-record-item-embedded" th:text="${siteClient.record[xx]}">Example</span>
    </div> 
  </div> 
  <!--/* メールアドレス */--> 
  <sp:record-item-field name="f05"></sp:record-item-field> 
  <div class="sp-record-item-parts sp-record-item-field"> 
    <div class="sp-record-item-label">メールアドレス</div> 
    <div class="sp-record-item-data">
      <span class="sp-record-item-embedded" th:text="${siteClient.record[xx]}">spiral@example.com</span>
    </div> 
  </div> 
  <!--/* 住所 */--> 
  <sp:record-item-field></sp:record-item-field> 
  <div class="sp-record-item-parts sp-record-item-field"> 
    <div class="sp-record-item-label">住所</div> 
    <div class="sp-record-item-data">
      <span class="sp-record-item-embedded" th:text="${siteClient.record[xx]}">Example</span>
    </div> 
  </div> 
  <!--/* 電話番号 */--> 
  <sp:record-item-field></sp:record-item-field> 
  <div class="sp-record-item-parts sp-record-item-field"> 
    <div class="sp-record-item-label">電話番号</div> 
    <div class="sp-record-item-data">
      <span class="sp-record-item-embedded" th:text="${siteClient.record[xx]}">Example</span>
    </div> 
  </div>
</div>

フリーコンテンツブロック - CSS

コピー

.sp-record-item-container {
  color:#333333;
  background-color:#ffffff;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  width:100%;
  margin:0 auto;
}

.sp-record-item-container .sp-record-item-parts {
  margin-bottom:0.5rem;
  padding-bottom:0.5rem;
}

.sp-record-item-container .sp-record-item-parts:last-child.sp-record-item-field { border-bottom:0; }

.sp-record-item-container .sp-record-item-field {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  border-bottom:1px solid #dddddd;
}

.sp-record-item-container .sp-record-item-field>.sp-record-item-label {
  font-size:1.15rem;
  font-weight:bold;
  padding:.25rem .5rem;
  word-break:break-all;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  color:#555555;
}

.sp-record-item-container .sp-record-item-field>.sp-record-item-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  padding:1rem;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

.sp-record-item-container .sp-record-item-field .sp-record-item-embedded { padding-left:.25rem; }

.sp-record-item-container .sp-record-item-data-selection {
  display:block;
  margin:.25rem 0;
  padding:.5rem .8rem .5rem 0;
  border-radius:0.25rem;
}

.sp-record-item-container .sp-html-parts p { margin:0; }

.sp-record-item-container .sp-record-item-no-item {
  margin:6.25rem auto;
  text-align:center;
  color:#808080;
}

.sp-record-item-field:first-child,
.sp-record-item-field-ie:first-child { padding-top:0 !important; }

.sp-record-item-field:last-child,
.sp-record-item-field-ie:last-child { border-bottom:none; }

.sp-file-info {
  padding-top:1em;
  padding-bottom:1em;
  line-height:1.5;
}

.sp-file-info:last-child { padding-bottom:0; }

.sp-form-file-bold-link {
  text-decoration:none !important;
  color:#3b7e9b;
  cursor:pointer;
  font-weight:bold;
}

.sp-form-file-size-label { color:#6c757d; }

.sp-text-truncate {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (min-width:768px) {
  .sp-record-item-container {
    font-size:initial;
    padding:3rem;
  }

  .sp-record-item-container .sp-record-item-field {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row nowrap;
    flex-flow:row nowrap;
  }

  .sp-record-item-container .sp-record-item-field>.sp-record-item-label {
    font-size:1rem;
    width:30%;
    padding:1rem;
  }

  .sp-record-item-container .sp-record-item-field>.sp-record-item-data {
    font-size:1rem;
    width:70%;
  }

  .sp-record-item-container .sp-record-item-field .sp-record-item-embedded { font-size:.9rem; }

  .sp-record-item-container .sp-record-item-data-selection {
    font-size:.9rem;
    margin:0 1rem 0 0;
    padding:0;
  }

  .sp-record-item-container .sp-record-item-data-selection-vertical {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-record-item-container .sp-record-item-data-selection-horizontal {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }
}

項目を表示する記述はフィールドタイプにより異なります。
以下を参考にして、見出し・項目の配置を調整してください。
なお、日時のフィールドタイプが認証レコード値に非対応のため、日付+時刻として下記に記載しています。
こちらも「${siteClient.record[xx]}」の「xx」にはフィールドIDを入れてください。

テキスト、メールアドレス、電話番号、整数、数値、日付、月日、時刻コピー

  <!--/* テキスト、メールアドレス、電話番号、整数、数値、日付、月日、時刻 */--> 
  <sp:record-item-field></sp:record-item-field> 
  <div class="sp-record-item-parts sp-record-item-field"> 
    <div class="sp-record-item-label">項目名</div> 
    <div class="sp-record-item-data">
      <span class="sp-record-item-embedded" th:text="${siteClient.record[xx]}">Example</span>
    </div> 
  </div>

テキストエリアコピー

  <!--/* テキストエリア   */--> 
  <sp:record-item-field></sp:record-item-field> 
  <div class="sp-record-item-parts sp-record-item-field"> 
    <div class="sp-record-item-label">項目名</div> 
    <div class="sp-record-item-data">
      <span class="sp-record-item-embedded">
        <th:block th:each="line, stat : ${siteClient.record[xx]?.lines}">
          <th:block th:text="${line}"/>
          <br th:unless="${stat.last}">
      </th:block>
      </span>
    </div> 
  </div>

セレクトコピー

  <!--/* セレクト  */--> 
  <sp:record-item-field></sp:record-item-field> 
  <div class="sp-record-item-parts sp-record-item-field"> 
    <div class="sp-record-item-label">項目名</div> 
    <div class="sp-record-item-data">
      <span class="sp-record-item-embedded">
        <span th:text="${siteClient.record[xx]?.label}">Item</span>
      </span>
    </div> 
  </div>

マルチセレクトコピー

  <!--/* マルチセレクト */--> 
  <sp:record-item-field></sp:record-item-field> 
  <div class="sp-record-item-parts sp-record-item-field"> 
    <div class="sp-record-item-label">項目名</div> 
    <div class="sp-record-item-data">
      <span class="sp-record-item-embedded">
        <th:block th:each="userValue, stat : ${siteClient.record[xx]}">
          <span th:text="${userValue.label}">Item</span>
          <span th:unless="${stat.last}">,</span>
        </th:block>
      </span>
    </div> 
  </div>

日付+時刻コピー

  <!--/* 日付+時刻  */--> 
  <sp:record-item-field></sp:record-item-field> 
  <div class="sp-record-item-parts sp-record-item-field"> 
    <div class="sp-record-item-label">項目名</div> 
    <div class="sp-record-item-data">
      <span class="sp-record-item-embedded">
        <span th:text="${siteClient.record[xx]}">2000/01/01</span>
        <span th:text="${siteClient.record[xx]}">12:00:00</span>
      </span>
    </div> 
  </div>