【Blogger】コメント欄を改造してみた

2022/04/24 ｜2024/07/10 ｜2

当ブログのコメント投稿方式は、とある理由から「埋め込み」は使わず、フルページ(もしくはポップアップウィンドウ)を選択していました。

そのとある理由というのは、埋め込みのコメントフォームは iOS 端末からコメント送信ができない不具合があること。フォームに書き込みは出来るが、いざ [送信] を押すと送信できないどころかフォーム内のテキストも消えてしまうというたちの悪さ…

聴き放題で愉しむ「クラシック音楽！」
68　Blogger使いはコメント欄カスタマイズを！
Blogger使いの方、標準ではiOS経由でコメント出来ないのをご存知でしょうか。iPhone等で書き込み可能にする簡単な方法と、まず知られていないペリコリさんのチェロ・ソナタを。
https://music-masic.blogspot.com/2020/03/68blogger.html

これは結構前から指摘されている不具合ですが、何故か一向に修正される気配がなし。(コメントできる場合もあるらしいし、ひょっとしたら最新の iOS なら問題ないのかもしれませんが)

突如新仕様の埋め込みフォームが現れた

先日、コメント周りのカスタマイズをしていた時に、設定で久し振りに「埋め込み」に切り替えたら、見慣れた埋め込みフォームと全然違うフォームになっていた！

ウィジェットバージョン1と2を混ぜたような仕様？でプレビューボタンがなくなってる。デザインは v1 よりスッキリしていい感じ。

ウィジェットバージョン1

ウィジェットバージョン2

そしてこれが謎の新デザイン？

みんな変わってるのかなと気になって Japanese Bloggers Info 等で他の Blogger ブログをチェックしてみたら、うち以外で新フォームに変わっている所は見当たらず。一部のユーザー限定でテストしてるのかな？

早速試してみる

試しにコメントを入れてみたところ、PCからは問題なく送信成功。スマホを持ってないのでタッチデバイスでの検証は出来ませんが、先述の iOS コメントできない問題も改善されてる可能性あり？
仮にそうだとしたら、埋め込みフォームにしてみるのもありかもしれないなと。フルページだとスマホでも問題なくコメントできるものの、UI が完全に PC 仕様になっているために、レスポンシブじゃないとか文字が小さくて見づらいとかで使い勝手が悪いらしいしw(←これも改善してほしい)

ちなみにテーマ(テンプレート)を変えてみたら、ウィジェットバージョンに係わらず同じ新フォームになっていた。ということは今後は新旧バージョン共通になるのかも。

問題点としては、v1 のように白背景が当てられてなく透明なため、ダークテーマだと文字が見えなくなってしまうこと。ウィジェットバージョン2の公式テーマにしている場合に限りダークモードに変更可能なようです。

1枚目:Notable
2枚目:シンプル
3枚目:JetTheme
新仕様のコメントフォーム、公式のウィジェトバージョン2 以外はダークテーマに出来ない。 pic.twitter.com/CpPYxFcpxt
— ふじやん (@fujiyanx) 2022年4月19日

公式のシンプル(Dark)テーマでこれじゃ流石に問題ですよね？(^^;

Blogger フォーラムにもこんなスレッドが上がってました。

私のブログにコメントを投稿することは不可能です。 https://simlignon.blogspot.com/ - Bloggerコミュニティ

コメントフォームが見えなくなって困ってるという投稿です。ちなみに CSS で明色の背景を当ててやれば見えるようにはなりますが、ユーザー側で対処しなけりゃいけないなんておかしな話です。

あっという間に旧仕様に戻った

ダークテーマで見えない問題はすぐに修正されるだろうと思っていたら、その前に旧フォームに戻ってしまいましたw

新フォームに変わったことに気づいてから1日足らず…検証する暇がほとんど無かったけど大丈夫。カスタマイズに関して抜け目のない私は、そのわずかな間に新フォームに関する最低限のデータだけはしっかり収集済みでしたw

新フォームの場所

以前、コメント通知に関する記事で埋め込みフォームの直リン URL について書きましたが、新フォームは URL が異なっていました。つまり旧フォームとは別の場所にあって両方使用可能ということ。

記事:
https://www.blogger.com/comment/frame/[BlogID]?po=[記事ID]
固定ページ:
https://www.blogger.com/comment/frame/[BlogID]?pa=[ページID]

この記事の場合はこちら → https://www.blogger.com/comment/frame/5377390612546612653?po=1325882069717527982

併用させてみる

設定で「コメントの場所」を「埋め込み」にすると(現時点では)旧フォームになりますが、<iframe> で新フォームの直リンを埋め込んでやれば、新フォームが使えるようになるのです。

そこで当ブログでは、設定はこれまで通り「フルページ」でコメントページのリンクを置いて、その上に新フォームを埋め込んで併用させてみることにしました。

もし埋め込み新フォームでもコメント出来なかったとしても、これまで通りのフルページの選択肢も残しておけば安心だし、うちではコメントの削除は別ページでしか出来ないという理由もあるので。

カスタマイズについて

明色の背景を当ててあるためダークモードでは浮いてしまうので、普段は隠しておいて、ボタンを押すと出現するという仕様にしてあります。JetTheme やバグ取りの日々さんなんかはそういう仕様ですよね。うちではチェックボックスと <label> で実現しています。

参考までに簡単な導入手順は書いておきますが、今回のカスタマイズはかなりイレギュラーで Blogger 側で想定外なやり方ななためはっきり言って非推奨です。今後どんな支障が出るかわからないので、真似しないほうが無難ではありますが、どうしてもやりたいという方は自己責任でお願いします！

QooQ の導入例

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。もしくはテスト用の環境(別ブログ)を用意してそちらで試されることをおすすめします。

まず設定にて「コメントの場所」を「フルページ」または「ポップアップウィンドウ」にしてください。※これにより「返信」ボタンは表示されずスレッド表示には出来ませんのでご注意ください。

① <p class='comment-footer'> から </p> までを以下のコードと入れ替えます。

<p class='comment-footer'>
  <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
      <b:include data='post' name='comment-form'/>
      <b:else/>
      <data:post.noNewCommentsText/>
    </b:if>
    <b:elseif cond='data:post.allowComments'/>
    <b:if cond='data:blogCommentMessage'>
      <span class='comment-message'><data:blogCommentMessage/></span>
    </b:if>
    <input id='embed-form-open' type='checkbox'/>
    <label for='embed-form-open' id='embed-form-button'>
      <data:postCommentMsg/> (埋め込みフォームが開きます)
    </label>
    <b:with value='data:view.isPost ? "?po=" : "?pa="' var='param'>
      <iframe class='embed-form' expr:data-src='data:blog.bloggerUrl path ("comment/frame/" + data:blog.blogId + data:param + data:post.id)' expr:height='data:cmtIframeInitialHeight' width='100%'/>
    </b:with>
    <span class='comment-message'>埋め込みフォームからコメントできない場合はこちらのリンクからどうぞ</span>
    <a class='comment-page-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' rel='noopener' target='_blank'>
      <data:postCommentMsg/> (別ページが開きます)
    </a>
  </b:if>
</p>

② こちらの CSS を追記します。

p.comment-footer {
  margin: 0!important;
}
.comment-page-link {
  text-decoration: none!important;
  text-align: center;
  font-size: 16px;
  color: #fff!important;
  display: block;
  margin-top: 1em;
  background: #007bbb;
  border-radius: 1em;
  padding: 5px;
  line-height: 1.4;
}
.comment-page-link:hover {
  text-decoration: none!important;
  background: dodgerblue;
  color: #fff!important;
}
#embed-form-button {
  text-align: center;
  font-size: 16px;
  display: block;
  margin: 3em 0 2em;
  background:#007bbb;
  border-radius: 1em;
  padding: 5px;
  transition: .3s;
  position: relative;
  color: #fff;
}
#embed-form-button::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: calc(50% - 30px);
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  border-top: 24px solid #007bbb;
  transition: .3s;
}
#embed-form-button:hover::after {
  border-top-color: dodgerblue;
}
#embed-form-button:hover {
  cursor: pointer;
  background: dodgerblue;
}
.comment-page-link,
#embed-form-button {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: 600px;
}
iframe.embed-form {
  height: 300px;
  margin: 3em 0 2em;
}
.comment-message {
  display: block;
  text-align: center;
  margin-top: 3em;
}
.embed-form {
  display: none;
}
#embed-form-open:checked ~ .embed-form {
  display: inline;
}
#embed-form-open:checked ~ #embed-form-button {
  display: none;
}
input[type="checkbox"] {
  display: none;
}

③ </body> の上にこちらの JS を置きます。

<script src='https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@2/dist/defer.min.js'/>
<script>/*<![CDATA[*/
  Defer.dom('iframe.embed-form');
/*]]>*/</script>

テーマを保存して完了です。

旧フォームを埋め込む場合

もし新フォームが使えなくなったとしてもとりあえず旧フォームと入れ替えるという対処は可能です。

HTML コードの <b:with> の所を下記コードと入れ替えてください。

<b:with value='data:view.isPost ? &quot;&amp;postID=&quot; : &quot;&amp;pageID=&quot;' var='param'>
<iframe class='embed-form' expr:data-src='data:blog.bloggerUrl path (&quot;comment-iframe.g?blogID=&quot; + data:blog.blogId + data:param + data:post.id)' expr:height='data:cmtIframeInitialHeight' width='100%'/></b:with>

JavaScript に関して

埋め込みフォームにすると読み込みが重くなり PSI スコアがガタ落ちしてしまうのがネックだったのですが、こちらで紹介されている defer.js を導入することで解決できました。

after work lab
外部のJavaScriptやCSSを遅延読み込みする方法 - after work lab
はじめに defer.jsで外部のJavaScriptやCSSの遅延読み込みが出来たので、忘れないように備忘録としてまとめてみました。 defer.jsについて興味がある方は参考にご覧下さい。 defer.jsとは defer.jsはShin氏が2019年...
https://www.heavy-peat.com/2022/02/defer.html

最後に

タッチデバイス、特に iOS からコメント出来るのかどうかが非常に気になっていますので、宜しければコメントして頂けると幸いですm(_ _)m

もし問題があるような場合は元の通常仕様に戻します。

2022/04/25 追記: デフォルトで白背景が付きました

透明背景問題に関しては修正されたらしく、旧フォームのようにデフォルトで白背景が当てられるようになったようです。CSS での上書きもできなさそうなのでコードの当該箇所を削除しました。

2022/04/27 追記: 正式リリース？

多数のブログで新フォームに変わったとの報告が。というわけでどうやら正式リリースされたようですが、まだ要修正な問題は残っているようですね。

とりあえずうちのイレギュラーな設置状態の新フォームは、これまでと変化なく問題なく使えるようです。

旧フォームも今のところはまだ使えるようです。

ふじやん闇に隠れて生きるブロガラーです。
Bloggerer in the Dark.
テーマは一日にして成らず。

Blogger

#QooQ #カスタマイズ #コメント欄

コメントを投稿

ログインせずにコメントされる場合は、匿名ではなく
名前/URL で何かしら名前を入れて頂けると
他の匿名さんと区別できるので助かります。
URL は空白でも構いませんが、入力いただくと
アバターの代わりにサイトのファビコンが表示されます。埋め込みフォームが開きます埋め込みフォームでコメントできない場合はこちらからどうぞ。別ページに移動します

2 件のコメント (新着順)

ふじやん