【Blogger】プレビュー画面でのクリックを有効にする
Blogger で記事を書くにあたり、投稿前に要素の見た目だけではなく挙動も知りたいときがあります。
しかし Blogger のプレビュー画面では、プレビュー部分に透明なフィルターのようなものが掛かっており、個別の要素をクリックすることができず地味にストレスです。
何かいい方法はないかと調べたところ、Blogger のプレビュー画面でクリックを有効にする方法を見つけたので紹介します。
プレビュー画面でクリックを有効にする
Google Chrome のデベロッパーツールでプレビュー画面を調べると、どうやら blogger-clickTrap というクラス名の div 要素がプレビュー部分全体を覆っていることがわかりました。
試しにデベロッパーツール上で blogger-clickTrap を display:none すると、要素がクリックできるように。
そこで、Blogger テンプレートに以下のコードを追加したところ、プレビュー画面でも要素のクリックが可能になりました。
<b:if cond='data:view.isPreview'>
<style>
.blogger-clickTrap{
display: none!important;
}
</style>
</b:if>blogger-clickTrap を非表示にすると起こる問題
プレビュー画面を覆っている blogger-clickTrap が消せた！ クリックやテキストのコピーができて最高！！
……と、一見メリットしかないように思えるこの方法ですが、Blogger を使っていくうちに 2 つほどデメリットを発見しました。
1 つ目は、プレビュー画面からブログ内の別ページに飛ぶと、Blogger の統計情報にアクセス数が加算されてしまうことです。
プレビュー画面を介さない通常のアクセスならば、管理画面の「統計情報」ページの「自分のページビューの追跡を管理」をクリックし、「このブログの自分のビューを追跡しない」にチェックを入れれば自分のアクセス数を弾けるのですが、プレビュー画面ではそうはいかないようです。
2 つ目は、プレビュー画面からブログ外のページのリンクを踏んでしまうと、相手方のアクセス解析にプレビュー画面の URL が参照元として残る可能性があることです。
プレビュー画面の URL が参照元に残っても、ブログの管理人以外に記事の内容がバレることはもちろんありません。
また、プレビュー画面の URL にはそれぞれ 19 桁のブログ ID や 投稿/ページ ID が含まれますが、これに関しても流出したところでそこまで問題はないと思います（多分）。
それでもなんとなーくそういうページがリファラに残ってしまうのはかっこ悪いので、1 つ目のデメリットも含めて、プレビュー画面でリンクを踏むときは気を付けましょう！！
※リンク誤クリック防止スクリプトを作成しました。詳しくは次項で！
リンク誤クリック防止スクリプト
前項で述べたプレビュー画面でリンクをクリックしてしまうと起こる問題を解決するスクリプトを作りました。
ブログをプレビュー表示したときのみ、ページにある a（リンク）タグの click イベントを無効化し、リンクの誤クリックを防ぎます。
</body> の上辺りに追加してください。
<b:if cond='data:view.isPreview'>
<b:comment>プレビュー画面での誤クリック防止</b:comment>
<script>//<![CDATA[
window.addEventListener('DOMContentLoaded', () => {
const a = document.querySelectorAll('a[href]');
for(let i = 0; i < a.length; i++){
a[i].addEventListener('click', (event) => {
event.preventDefault();
})
}
})
//]]></script>
</b:if>あとがき
Blogger のプレビュー画面が透明な要素で覆われていて、ページ上の個別要素のクリックや選択ができず不便だったので、どうにかしてみました。
プレビュー画面でクリックができなくて困ってるよーって方は、この方法を試してみてください！