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で固定ページへ表示させるようにする
3.追加した連絡フォームを固定ページに表示させる
「ページ」の「新しいページ」を選択し固定ページを作成する。
固定ページ編集画面の左メニューから「ページ設定」の「閲覧者のコメント」を「許可しない(既存のバックリンクを表示しない)」にする。これを設定しておかないと、お問い合わせのページにコメントが表示されてしまう。
後で使うので、控えておこう!
4.「連絡フォームを」固定ページへ表示させる
「テーマ」の「HTMLの編集」からコードを修正する。
]]></b:skin>
を探します。見つけたら下記のように変更します。
]]></b:skin>
<b:if cond='data:blog.url == "つくった固定ページURLをコピーする"'>
<style>
#Blog1{
display:none;
}
</style>
</b:if>
注意!! 「つくった固定ページURLをコピーする」部分を変更することを忘れずに!
「ウィジェットへ移動」から「ContactForm1」を選択する。
下記の場所へ移動するのでハイライトした2行目、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>
下記の2箇所にコードを追加する
<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 件のコメント :
コメントを投稿