サイト&ブログの作り方

AFFINGER6:ヘッダーカードの外部リンクを別窓で開く方法

2021年9月2日

  1. HOME >
  2. コラム >
  3. サイト&ブログの作り方 >

AFFINGER6:ヘッダーカードの外部リンクを別窓で開く方法

2021年9月2日

株式会社オンスピードから販売されている、WordPressの有料テーマ『AFFINGER6』。

このテーマでは、サイト上部に「ヘッダーカード」と呼ばれる画像リンクを最大4枚付けることができます。

AFFINGER6のヘッダーカード
『AFFINGER6』のヘッダーカード。

このヘッダーカード、自分の見せたいモノをアピールできるのでとても便利なのですが、デフォルトでは同窓でしかリンクを開けないんですよね~。
TwitterやNOTE、ほかのSNSのアドレスを貼り付けたときに同窓で開いてしまうというのは、ユーザビリティ的にちょっと不親切だよな~と、わたしは思ったのでした。

たとえば、うちのサイトではヘッダーカードにオンラインショップ(BOOTH)へのリンクがあります。

AFFINGER6のヘッダーカードを外部リンクのときは別窓で開きたい
『AFFINGER6』のヘッダーカードを外部リンクのときは別窓で開きたい。

これが同窓で開いてしまうことによって、pixivまたはBOOTHに閲覧者が流れてしまうことは何としても避けたいところ!
いや、流れてしまってもいいんですけど(よくないけど!)、古いタブとして『あとりえ極星堂』も残しておいてもらって、「あ、極星堂の続きも見たいんだった~☆」って戻ってきてほしいじゃないですかー。
せめてそういう希望を残しておきたいじゃないですかー。

そんなわけで、その方法をご紹介いたします。
ヘッダーカードが外部リンクだったら別窓(別タブ)で、内部リンクだったら同窓というふうに開かせる方法です。

【AFFINGER管理】からコードを入力する

設定場所

【AFFINGER管理】>>【その他】>>【上級者向け】>>『コードの出力』

『headに出力するコード』の欄に、以下のコードを入力してください。

入力するコード

<script>
 jQuery(function($){
	$('a[href^=https]').not('[href*="'+location.hostname+'"]').attr('target', '_blank');
});
</script>

以上です。

これでヘッダーカードのリンク先が外部リンクの場合のみ、別窓で開きます。

仕組み

『jQuery(ジェイクエリー)』という、JavaScriptライブラリを使っています。

『jQuery』とは、JavaScriptを普通に書くと長文すぎてややこしくなってしまうのを、短文でOKになるようにしてくれる超便利な仕組みです。
ある程度書きあがっている状態のJavaScriptを外部に置いておくことで、自分のサイトでは短いコードを書くだけでOKになります。
下描きをしてくれているスクリプトを、自分のサイトでペン入れするイメージ!

ですから、『jQuery』 を使用するためには、本来「この『jQuery』 を使います」とheadで読み込む必要があります。

が、『AFFINGER6』はデフォルトで『jQuery』を読み込んでくれています。
そのため、あらためて『jQuery』を読み込んだりしなくても、管理画面で上記コードを入力するだけで『jQuery』を使ったスクリプトがちゃんと動いてくれます。

参考にさせていただいたサイトさま

イラストレーター 鍋弓わた が表紙を描いた本

イラストレーター 鍋弓わた が描いた漫画(同人誌)

  • あとりえ極星堂 運営者
  • 新しいページ

鍋弓わた

こんにちは。近代史に強いイラストレーターの鍋弓わたです。
イラストや漫画を描くのが好きなので、一児の母になったいまも仕事に趣味にぼちぼち描いています。
サークル名『極星堂きょくせいどう』で同人活動もしています。
大阪生まれの奈良在住。

よりよい作品づくり、より楽しく生きるために自己肯定感を高める方法を模索中。
趣味は2003年からおこなっているウェブ制作。
気がつけば今年で18年目。

⇒もっと自己紹介

pixiv 小説家になろう

⇒お問い合わせ

-サイト&ブログの作り方
-,