Blogger テンプレート QooQ カスタマイズ 05

お問い合わせフォームの設置

Bloggerにgoogleフォームでお問い合わせページを設置します。

ぶろなびくんの記事を参考にしました。

Bloggerにgoogleフォームでお問い合わせページを設置する

Bloggerの基本的な操作やカスタマイズ、CSSを用いたデザインについてまとめています。

blogger-nav.blogspot.com

googleフォーム作成

(説明しようとしている私だけが難解に陥っているだけで、実際の作成は簡単です。ゴメンナサイ...)

私の場合、幅と高さを調整は width="600" height="900" でちょうどよかったです。

これは、あとでも、投稿エディタのHTMLビューで再調整できます。

「お問い合わせ」用のページを作成

googleフォームのHTMLコードを取得したら、次はBloggerにて「ページ」→新規作成ボタンで「お問い合わせ」用のページを作成して投稿エディタのHTMLビューにて張り付けます。

この『ページ』のタイトルは、パーマリンクの関係からとりあえず『Contact』にするといいです。

お問い合わせページにコメントフォームがあるとおかしいので、コメントフォームを非表示にします。

そして、公開ボタンを押せばページ作成は完了です。

なお、公開したあとであればパーマリンクも設定されているので、タイトル名を変更しても大丈夫です。

ナビゲーションのメニューに表示

次にナビゲーションのメニューに表示するために、「レイアウト」→ナビゲーションの編集で「表示するページ」の「お問い合わせ(Contact)」にチェックをいれればお終いです。

本当は連絡フォーム(ガジェット)を利用すれば、もっと簡単なのですが、現在、使用不可らしいです。

独自ドメインでは動くようなのですが、blogspot.com の場合はダメみたいです。そのためページに移植したものも不可らしいです。

ブログカードを表示

mocaさんの記事を参考にしました。

Blogger＊ブログカードを表示する簡単な方法

Bloggerでブログカードを表示させる方法です。 ちなみに「ブログカード」とは、このような カード型のリンク のことです↓ 別のページへリンクをはりたいとき、Bloggerの投稿画面からはこのような文字だけのリンクを作成することができます。 → Bloggerで...

moca-memo.blogspot.com

<iframe class="hatenablogcard" style="display:block;width:100%;height:155px;margin:12px 0;
max-width:680px;" title="%title%" src="https://hatenablog-parts.com/embed?
url=リンク先のアドレスをコピペします" frameborder="0" scrolling="no"></iframe>

記事の更新日を表示

コピペでかんたんQooQカスタマイズ！最終更新日を表示する

bloggerテンプレートQooQに最終更新日を表示するカスタマイズ！

blo-mas.blogspot.com

<p id='single-header-date'><data:post.dateHeader/><span id='single-header-update'></span></p>
<script>
var pub_date =new Date("<data:post.timestampISO8601/>");
var up_date  =new Date("<data:post.lastUpdatedISO8601/>");
</script>
<script>
//<![CDATA[
var pub_y = pub_date.getFullYear();
var pub_m = ("0"+(pub_date.getMonth()+1)).slice(-2);
var pub_d = ("0"+pub_date.getDate()).slice(-2);

var up_y = up_date.getFullYear();
var up_m = ("0"+(up_date.getMonth()+1)).slice(-2);
var up_d = ("0"+up_date.getDate()).slice(-2);
 
if(pub_y == up_y && pub_m == up_m && pub_d == up_d){
}else{
    var up_text ="　更新：" + up_y + "年" + up_m + "月" + up_d + "日";
    document.getElementById("single-header-update").innerHTML = up_text;
}
//]]>
</script>

この一行を消すっ！
<p id='single-header-date'><data:post.dateHeader/></p>