長期放置後のカスタマイズに関するメモ。コメント欄非表示や問い合わせフォームなど

ブログをよく更新していた時期から1年弱ほど、ブログの更新が滞っていました。

その間 Blogger の仕様変更があったり、検索してみると QooQ カスタマイズの新情報が出ていたり、改めて自分のブログを見てみるとなんか変だ、と感じる点があったりして、気になる部分をここ数日で修正していました。

徒然記事なので、気になった点や考えたことを備忘録的にざっと書いてみます。

目次

• コメント欄について。
• 問い合わせフォームについて。
• リアクションボタンについて。
• アドセンス広告について。
• ページ表示速度について。
• 次の投稿・前の投稿の表示について。
• コード表示の「COPY」ボタンについて。

コメント欄について。

• コメント欄を埋め込みにしていると、iPhone からコメントできないらしいことに気づく（すごい大きいバグじゃない？）
• ポップアップにするとコメント可能らしい
  • しかしポップアップだと、返信リンクが表示されないようす（どこかのカスタマイズによるものかも？）
• ブログを立ち上げてからのコメント数は1件のみ
• アクセス数もコメント数も少ないし、もうコメント欄は非表示にしても問題ないだろう
• もし何かコメントがあれば、問い合わせフォームから送ってもらうことにしよう
• コメント欄を非表示に変更（済）

問い合わせフォームについて。

• 改めてテスト送信してみる
• 送信すると、フォーム下部に「ありがとうございました」的なコメントが表示されるが、この表示が地味でわかりにくい
• フォームは他ブログで紹介されていた JavaScript を使ったもので、自分ではフォームの挙動に関するカスタマイズはたぶん無理
• カスタマイズしやすい Google フォームに変えてみようか
  • ブログ立ち上げ当初は、外部ツール感が気になり Google フォームを使うのはやめた
  • しかし、アクセス数の多そうなブログや企業のアンケートで Google フォームを目にする機会も増え、もうこれは一般的なのかもと感じる
  • どうやら Google フォームの見た目はカスタマイズできるらしい。カスタマイズ方法を紹介しているブログも複数見つけた
• HTML、CSS の簡単な修正ならできるので、フォーム内容と見た目のカスタマイズが容易な Google フォームに変更（済）
  • 問い合わせ送信後、完了ページは Google フォームのページに遷移するが、仕方がない
  • 完了ページに、送信後のメッセージを表示することができる点は良い
• その後、サイト内に完了ページを設定できるカスタマイズを実施。結果的に、旧フォームより挙動が良くなった。気がする

リアクションボタンについて。

• コメントは少ないはずだし、問い合わせフォームから送ってもらうことにしても、漠然とした不安を感じる
  • コメント欄があればコメントしてくれたかもしれないかも？とか
• いつもカスタマイズの参考にさせていただいている、ふじろじっくさんのブログで紹介＆おすすめされていたリアクションボタンを導入してみようか
• 反応があったら嬉しいし、なかったら設置しただけ悲しいが、とりあえず試してみよう
• ふじろじっくさんのページでは、記事別に選択肢を変更できるカスタマイズ方法が載っていたが、選択肢は毎回同じで良いのでとりあえず全記事に簡単に設置して試してみたい
• しかし確認したところ、Blogger の標準ウィジェットとして用意されているリアクションボタンは、QooQ ではテーマ作成者より「使われないだろう」と判断され、関連記事表示用にコンバートされていた（！）
• そのため、レイアウト画面からの設定ではうまく表示できず
• 各種ブログを参考にし、なんとか表示用のコードを HTML 上に設置することに成功
  • 設置方法が正しいのかはちょっと不明だが、とりあえず現状はうまく表示できてるようす
  • しかしその直後、iPhone でカウントできないことが発覚。チェックをしても、リロードするとリセットされている
• Blogger のウィジェットは一旦中止し、顔のマークでリアクションを表せる ShareThis を導入。これで様子見してみる
• 追記：Blogger のリアクションウィジェットは、2021年3月22日頃に廃止されたようです

アドセンス広告について。

• 広告は、個別記事の記事下に表示させていたつもりだった
• しかし、固定ページ（お問い合わせやプライバシーポリシー）にも表示されていたようす
• 広告コードに、個別記事にのみ表示させるコードを追記して変更（済）

ページ表示速度について。

• 久しぶりに表示速度を測ってみると、モバイルがめちゃくちゃ遅い
  • スコアがページによって 40〜60 前後
  • パソコンは 80〜90 前後
• びっくり
  • 自分の iPhone でページ表示してみると、wifi 通信であればそこまで遅い感じはしないのだが
• 遅い原因は、画像関連とか、不要な JS とかのようす
• 画像に関しては、画像サイズ、画像の形式、遅延読み込みを修正すると良いようだ
  • しかしすでに掲載済みのものを変更するのは面倒なので、今後の投稿から変更することにする
• Blogger 高速化の方法を検索して、紹介されているものをいくつか試してみたが、結果的に大きな変更はしなかった
  • とりあえずカスタマイズで導入した一部 JS の読み込みを非同期に変更したが、大きなスコア変化はなし
  • Blogger で自動的に配信される CSS（css_bundle_v2）をインライン化したが、大きなスコア変化なし
  • Blogger で自動的に配信される JS（widgets.js）は、PageSpeed Insights は「使用していない」と言っているが本当に使用していないか確信が持てない、確かめるのが大変そう
• 高速化はしたいが... とりあえず今すぐ大きな効果が見込める変更は加えないことにする

次の投稿・前の投稿の表示について。

• 前後ページへのアクセスを加算しない、新しいスクリプトが登場していた
  • もともと使用していたスクリプトでは、前後ページへのアクセスが発生していた
  • しかも新スクリプトでは画像も表示できる仕様
• スクリプトを変更して、参考サイト紹介記事にも追記（済）

コード表示の「COPY」ボタンについて。

• ブログ内でのコード表示には highlight.js を使用
• ワンクリックでコードを選択できたり、コピーできる仕組みは知ってはいたがそこまで重要視しておらず、カスタマイズは未導入だった
• しかし今回、自分のブログでコードをコピーしようとしてみたところ、手間だった
  • 特にコードが長文の場合の選択が面倒
  • コードの表示ボックスをスクロール形式にしていたのも原因か
  • これじゃあ、コードを紹介しているわりに非常に使えないサイトであると実感
• ワンクリックでコードをコピーできるボタンを設置。参考サイトが複数あり、カスタマイズを含めて変更（済）