1.まずは、準備！レイアウトのメインに「ガジェットの追加」を表示させる。
編集画面上で
<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'> |
の箇所へ移動する。
移動したら、すぐ上の
↓↓このコード↓↓<b:section class='main' id='main' name='Main' showaddelement='no'><b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'> |
コードの最後「～ showaddelement='no'」を「yes」に変更する
↓↓このコード↓↓ showaddelement='no'から'yes'に変更<b:section class='main' id='main' name='Main' showaddelement='yes'><b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'> |
変更されると下記のように追加される。もし、表示されない場合は、リロードしたりログインしなおすと表示される。
2.「連絡フォーム」を追加する
「連絡フォームウィジェットを設定」ウィンドが開くのでタイトルを（今回は）「お問い合わせ」とする。
各記事を見てみると下記のように記事ページに追加された状態になっている。項目３と４で固定ページへ表示させるようにする
3.追加した連絡フォームを固定ページに表示させる
「ページ」の「新しいページ」を選択し固定ページを作成する。
固定ページ編集画面の左メニューから「ページ設定」の「閲覧者のコメント」を「許可しない（既存のバックリンクを表示しない）」にする。これを設定しておかないと、お問い合わせのページにコメントが表示されてしまう。
後で使うので、控えておこう！
4.「連絡フォームを」固定ページへ表示させる
「テーマ」の「HTMLの編集」からコードを修正する。
]]></b:skin> |
を探します。見つけたら下記のように変更します。
]]></b:skin> <!-- 変更を忘れずに --><b:if cond='data:blog.url == "つくった固定ページURLをコピーする"'><style>#Blog1{display:none; }</style></b:if> |
注意！！ 「つくった固定ページURLをコピーする」部分を変更することを忘れずに！
「ウィジェットへ移動」から「ContactForm1」を選択する。
下記の場所へ移動するのでハイライトした２行目、3行目の間と11行目と12行目の間に
<b:widget id='ContactForm1' locked='false' title='お問い合わせ' type='ContactForm'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> ・ ・ （中略 30行くらいある） ・ ・ <b:include name='quickedit'/> </b:includable></b:widget> |
下記の２箇所にコードを追加する
<b:widget id='ContactForm1' locked='false' title='お問い合わせ' type='ContactForm'> <b:includable id='main'> <!-- 追加するコード--> <b:if cond='data:blog.url == "つくった固定ページURLをコピーする"'> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> ・ ・ （中略 30行くらいある） ・ ・ <b:include name='quickedit'/> <!-- 追加するコード--> </b:if> </b:includable> </b:widget> |
項目3-3でつくった固定ページを表示させて下記のように表示されえれば良い。
注意！！ もし表示されない場合は、項目4-1と項目4-2でコピーしたURLを
「https://example.blogspot.jp/p/blog-****.html」
「https://example.blogspot.com/p/blog-****.html」
.jpを.comに変更すると良い。
5.固定ページを表示させて確認をする
「ページ」の「新しいページ」を選択し固定ページを作成する。
6.bootstrapを使い格好よくする
注意！！これよりbootstrapを一部使用していますので、bootstrapを組み込んでない場合はリンク先を参照し導入を行う！
注意！！ デフォルトの状態だと「ContactForm1」連絡フォームの横幅が.contact-form-widgetによりmax-widthが固定されているので初期化する。
リセットするために下記のコードを追加する。
まず、下記のコードを探す。
]]></b:skin> |
見つけたら下記のCSSを追加する。
.contact-form-widget {max-width:initial !important;}]]></b:skin> |
注意！！bootstrapを一部使用していますので、項目6-1よりbootstrapを組み込むように！
「テーマ」の「ウィジェットへ移動」から「ContactForm1」へ移動
下記の場所が表示されることを確認（項目4-2で修正した場所）
<b:widget id='ContactForm1' locked='false' title='お問い合わせ' type='ContactForm'> <b:includable id='main'> <!-- 項目4-2で追加したコード--> <b:if cond='data:blog.url == "つくった固定ページURLをコピーする"'> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> ・ ・ （中略 30行くらいある） ・ ・ <b:include name='quickedit'/> <!-- 項目4-2で追加したコード--> </b:if> </b:includable> </b:widget> |
上記の部分を
<b:widget id='ContactForm1' locked='false' title='お問い合わせ' type='ContactForm'><b:includable id='main'> <!-- 変更を忘れずに --> <b:if cond='data:blog.url == "つくった固定ページURLをコピーする"'> <b:if cond='data:title != ""'> <!--タイトル--> <div class="alert alert-info" role="alert"><h2 class="text-center"><data:title/></h2></div> </b:if> <div class='contact-form-widget'> <div class='form'> <form class='form-horizontal' name='contact-form'> <!-- 名前記入欄 --> <div class='form-group'> <label class='control-label col-xs-3 col-sm-2' for="InputText"><p class="text-left h4"><data:contactFormNameMsg/></p></label> <div class='col-xs-9 col-sm-10'> <input class='form-control' id="InputText" placeholder='名前' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/> </div> </div> <!-- メール記入欄 --> <div class='form-group'> <label class='control-label col-xs-3 col-sm-2' for="InputEmail"><p class="text-left h4"><data:contactFormEmailMsg/><span style='font-weight: bolder;'>*</span></p></label> <div class='col-xs-9 col-sm-10'> <input class='form-control' id="InputEmail" placeholder='e-mail' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/> </div> </div> <!-- メッセージ記入欄 --> <div class='form-group'> <label class='control-label col-xs-12 col-sm-12' for="InputTextarea"><p class="text-left h4"><data:contactFormMessageMsg/><span style='font-weight: bolder;'>*</span></p></label> <div class='col-xs-12 col-sm-12'> <textarea class='form-control' cols='25' id="InputText" placeholder='メッセージを記入' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='10'/> </div> </div> <!-- 送信ボタン --> <p/> <input class='btn btn-primary btn-lg col-xs-offset-4 col-xs-4' id='ContactForm1_contact-form-submit' type='button' value='送信する'/> <p/> <!-- システムメッセージ欄 --> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </div> </form> </div><!-- end class=contact-form-widge --> </div><!-- end class=form --> <b:include name='quickedit'/> </b:if></b:includable></b:widget> |
固定ページを表示させて下記のように表示されえれば良い。
うまく表示されない場合！！ ブラウザをリロードしてみる、bootstrapは正常に動作しているか？、コードの貼り付けを間違っていないか？などを試す。
0 件のコメント :
コメントを投稿