「リンクを踏んだら、元のページが消える」
「戻るのが面倒で、読む気が切れる」
「……地味にストレス」
リンクをクリックした時の操作感は、意外と重要です。
「Ctrl +クリック」すれば新タブで開けますが、
全員が知っているかと言えばそうではないかなと。
ブログをご覧いただく時のストレスは、なるべく排除したいと思っています。
※空と海が繋がっているように見える
原則として「新タブ」で開くようにしている理由
冒頭で書いた通り、
「閲覧ページが更新されるのは、操作感が悪いから」
です。
細かいことからもしれませんが、
- リンクを踏む
- 元のページが消える
- 戻るのが面倒になる
- 「まぁいいや」で離脱
みたいな状況は少しもったいないと思うのです。
新タブで開けば、そのタブを閉じるだけで元ページに戻れますので。
（ちなみに「Ctrl+W」でページを閉じられます。Excelとかもですが。）
私のブログ設定3選
さて、ブログを運営していればリンクを貼る機会は多いものです。
私が行っている3選を紹介したいと思います。
①ブログ記事に貼る関連リンク
1つはブログ記事に記載するもの。
関連記事のブロックを選択し、
特定のURLを記載し、リンクを追加します。
次に「リンクを編集」を押下し、
「新しいタブで開く」にチェックをいれればOKです。
②ヘッダーメニュー
ブログのヘッダーメニューについても、新タブにしたいもの。
ダッシュボードから「外観→メニュー」を開き、
「表示オプション」から
「リンクターゲット」にチェックを入れます。
すると、各メニュー項目内で、
「リンクを新しいタブで開く」
で出てくるため、チェックを入れていけばOKです。
③記事内メニュー
少し特殊なのは記事内メニュー。
このブログ記事にも表示されていますが、こういったものです。
これは「Advanced Ads」というプラグインを入れて、以下のようなコードを書いています。
<div class="servicemenu">
<div class="item first-link">
<a href="https://free-to-blog.com/profile/">宮本 大樹のプロフィール</a>
</div>
<div class="section-title"><strong>【新着情報｜出版＆セミナー情報】</strong></div>
<div class="item">◇Kindle本</div>
<div class="item">
<a href="https://www.amazon.co.jp/dp/B0GHZSW9JG">■ 『習慣化の技術』</a>
</div>
・・・・このままだと新タブで開くことはできないのですが、以下のコードで設定をしています。
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.servicemenu a').forEach(function (link) {
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener noreferrer');
});
});
</script>要は広告で設定している.servicemenu内のリンクを、
すべて強制的に「別タブで安全に開く」といった設計にしています。
例外：新タブにしていないもの
例外として新タブで開かないようにしているものもあります。
それは、「記事内リンク」です。
※このように記事内で飛ぶもの
これを新タブにするとかえって見づらくなると思うからです。
記事内の動きかも把握しづらいと感じます。
※新タブにするとこんな感じ
リンクの動作については、自由に操れるようになっておくとユーザビリティ向上に繋がります。
では、また次回。
編集後記
◇日記
昨日は、朝一でメルマガ・YouTube・ブログを。
（前日のディズニーで少し遅めに起床）
日中は三男を見つつ、Kindle出版・税理士業などを。
◇ブログネタ経緯
ヘッダーメニューを整理していた時のメモから。
◇1日1新
Kindle出版フローの整理整頓
（ようやく再現性のある形にできてきました）
