新テーマ「Owned Media」でメルマガ登録モーダルを作ろう！

saori

2018.05.10

デザイン

新テーマ「Owned Media」でメルマガ登録モーダルを作ろう！

先日公開した新テーマ「Owned Media」、ご覧になっていただけましたでしょうか？
管理画面からバナーやメルマガ登録フォームへとばすモーダルの設定ができるなど、オウンドメディアサイトとして必要な要素を揃えたテーマです。追加されたプッシュ通知機能を組み合わせて、更新しやすいサイトを目指しましょう！

ここでは「Owned Media」のカスタムフィールドに用意されたメルマガ登録フォームURLのおすすめ使用法を順序立ててご紹介していきます！

フォームを作る

まずは、フォームを作成していきます。
サイトの編集画面から、フォーム＞新規＞基本設定に移り、必要事項を入力します。
終わったら、項目変更タブに移動し、必要な項目を用意していきます。
メルマガ登録に使用するフォームなので、シンプルに「お名前」「メールアドレス」「コメント欄」があれば良いでしょうか。「お名前」と「メールアドレス」は必須項目としておきましょう。

■フォーム作成についての記事は以下の活用ブログでも詳しく紹介しています。

フォームのデザインをCSSで指定する

フォームのCSSはフォームの設定画面、「カスタムCSS」のフィールドから記述します。
デフォルトのデザインにあったCSSを用意しましたので、以下からコピー＆ペーストで適応してみましょう。

  iframe .pages-subtitle {
  height: 35px;
  color: #4d4d4d;
  font-size: 1.75em;
  margin: 0px 0 21px 0;
  border-bottom: 1px dotted #bababa;
  padding-left: 18px;
  position: relative; }
  iframe .pages-subtitle:before {
    content: "";
    display: block;
    width: 7px;
    height: 35px;
    background-color: #33336a;
    position: absolute;
    left: 0px; }
  @media (min-width: 768px) {
    iframe .pages-subtitle {
      height: 42px;
      font-size: 2em;
      margin: 0px 0 2rem 0;
      padding-bottom: 1rem; }
      iframe .pages-subtitle:before {
        width: 10px;
        height: 42px; } }

iframe {
border: 7px solid #e6e6e6;
padding: 21px; }

.container {
border: 7px solid #e6e6e6;
padding: 21px;
max-width: 100%;
margin-top: 42px;
width: 100%; }

.form-column:after {
content: " ";
display: block;
clear: both; }

.label {
padding: .2em 0em .3em;
font-size: 1em;
font-weight: 700;
line-height: 1;
color: #4d4d4d;
white-space: nowrap;
vertical-align: baseline;
width: 100%;
float: left;
display: inline-block;
border-radius: 0px;
text-align: left; }

.badge {
font-size: 80%;
padding: 3px 14px;
margin-left: 7px;
font-weight: normal;
background-color: #0059AB;
color: #ffffff;
border-radius: 0px;
line-height: normal;
box-sizing: border-box; }
.badge.badge-optional {
  display: none; }

.form-column {
position: relative;
border-bottom: 1px dotted #e6e6e6;
padding: 14px 0; }

input, textarea {
width: 100%;
display: inline-block;
float: none; }

textarea {
height: 140px; }

.input-group{
  position: relative;
  display: table;
}

.input-group label {
margin-right: 14px; }

.input-group label:last-child {
margin-right: 0px; }

.input-group input {
width: auto;
margin-right: 7px; }

.form-column-zip-code-jp .input-group input, .form-column-zip-code-jp .input-group .separator-zip-code-jp {
float: left;
margin-right: 7px; }

.form-column-file input {
border: 0px; }

.button-group {
text-align: center;
margin-top: 14px; }
.button-group .button {
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-transition: background-color 0.5s, color 0.5s;
  transition: background-color 0.5s, color 0.5s;
  background: none;
  border: 2px solid #ffffff;
  border-radius: 0px;
  font-size: 0.8em;
  padding: 8px 48px;
  color: #ffffff;
  text-decoration: none;
  border: 2px solid #0059AB;
  border-radius: 0px;
  color: #0059AB; }
  .button-group .button:hover, .button-group .button:active, .button-group .button:focus {
    border: 2px solid #ffffff;
    color: #0059AB;
    background-color: rgba(255, 255, 255, 0.9);
    opacity: 1; }
  .button-group .button .glyphicon {
    margin-right: 3px; }
  .button-group .button:hover {
    color: #ffffff;
    border: 2px solid #0059AB;
    background-color: #0059AB;
    opacity: 1; }
  .button-group .button .icon {
    font-size: 14px;
    margin-right: 3px; }
.button-group .help-block {
  font-size: 80%; }

/*over768px*/
@media (min-width: 768px) {
iframe {
  padding: 42px; }
.label {
  padding: .2em .6em .3em;
  width: 30%;
  float: left; }
input, textarea {
  width: 70%; }
.button-group {
  text-align: center;
  margin-top: 28px; } }