【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 イベントを無効化し、リンクの誤クリックを防ぎます。ただし、ページ内リンクと download 属性があるリンクは通常通りクリックできます。
</body> の上辺りに追加してください。
<b:if cond='data:view.isPreview'>
<b:comment>プレビューでの誤クリック防止</b:comment>
<script>//<![CDATA[
window.addEventListener('load', () => {
const a = document.querySelectorAll('a[href]:not([href^="#"]):not([download])');
for(let i = 0; i < a.length; i++){
a[i].addEventListener('click', (event) => {
event.preventDefault();
})
}
})
//]]></script>
</b:if>あとがき
Blogger のプレビューが透明な要素で覆われていて、ページ上の個別要素のクリックや選択ができず不便だったので、どうにかしてみました。
プレビューでクリックができなくて困ってるよーって方は、この方法を試してみてください！