どうも!初めましての方は初めまして、初心者のWebサイト勉強のとみーです!
WordPress の無料テーマ Cocoon では、リンクを貼るときにブログカードを使うことができます。
通常のリンクと比べるとスタイリッシュなので、多くの方がお世話になっていますよね。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2021/08/o621_1.png)
とみーも愛用しています!
Cocoon に元々備わっている「Cocoon 設定」では
といった具合に内部リンクと外部リンクでブログカードの設定を変えることはできるのですが、残念ながら
個別のブログカードの開き方を
設定することはできない
ようになっています。
しかし、実際に使っていると
なんていう風に、内部リンク・外部リンクに関係なく個別の設定がしたくなるケースが意外と多くあります。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2021/06/o622_2.png)
実はそれ、コピペでできるんです!
カスタマイズ後のブログカードの動作イメージ
![現在のタブで開く](https://www.beginner-blogger.com/wp-content/uploads/2021/11/3688c90ad3cdad8ae198612b7be0d7d5-5.gif)
![新しいタブで開く](https://www.beginner-blogger.com/wp-content/uploads/2021/11/31a491ae351824b49e3f56e2dfef2cbf.gif)
今回のカスタマイズをすると、内部リンク・外部リンクに関係なく、1つ1つのブログカードについて
を決められるようになります。
見た目は同じですが、下のブログカードは開き方が異なります。
ブログカードの開き方を個別設定するコピペカスタマイズ方法
![コピペでカスタマイズ](https://www.beginner-blogger.com/wp-content/uploads/2021/10/133166bd0cae1860f36885d5816ff57d.png)
今回のカスタマイズは、次の2ステップで行います。
- STEP1Cocoon設定でリンクの開き方を設定
- STEP2JavaScriptコードをコピペする
javascript.js のバックアップを取っておこう
今回のカスタマイズでは、
というファイルを操作します。
そのため、万が一が起きても元に戻せるように、カスタマイズ前に忘れずにバックアップを取っておきましょう。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
1番簡単なのはファイルの中身をコピーして、メモ帳やテキストエディタに保存しておくやり方です。
STEP1:Cocoon 設定でリンクの開き方を設定
まずは、Cocoon 設定でリンクの開き方を設定します。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2021/08/o621_1.png)
次の2ステップで行いましょう!
- STEP1「ブログカード」タブを開く
管理画面サイドメニュー「
Cocoon設定」→「ブログカード」
- STEP2リンクの開き方を「新しいタブで開く」にする
「ブログカード」タブを開く
WordPress の管理画面サイドメニューの「Cocoon設定」を開きます。
![Cocoon設定](https://www.beginner-blogger.com/wp-content/uploads/2021/07/4dd9090381315073815eb552ef23f00d.png)
通常は「スキン」タブが開かれているはずなので、ここから「ブログカード」タブを開きます。
![Cocoon設定:ブログカードタブ](https://www.beginner-blogger.com/wp-content/uploads/2021/11/f700e52634a49e733069b9f85a63a4be.png)
リンクの開き方を「新しいタブで開く」にする
「内部ブログカード設定」の「リンクの開き方」の部分に注目します。
![内部ブログカード設定:リンクの開き方](https://www.beginner-blogger.com/wp-content/uploads/2021/11/4f4f39a8b3699fcba8e921853c316326-1.png)
「新しいタブで開く」にチェックを入れましょう。
同様に「外部ブログカード設定」についても行います。
![外部ブログカード設定:リンクの開き方](https://www.beginner-blogger.com/wp-content/uploads/2021/11/c48821bbfb08cca50e2c6078562bf609.png)
両方チェックが入れられたら、「変更をまとめて保存」をクリックしましょう。
![変更をまとめて保存](https://www.beginner-blogger.com/wp-content/uploads/2021/11/64b582c901d97bb69321c871aa2f7805.png)
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
この段階で、すべてのブログカードが新しいタブで開かれるようになります。
STEP2:JavaScript コードのコピペ
次に、JavaScript コードのコピペを行います。
- STEP1javascript.js を開く
管理画面サイドメニュー「外観」→「テーマエディター」→「javascript.js」
- STEP2javascript.js にコードをコピペする
javascript.js を開く
WordPress の管理画面サイドメニューの「外観」から「テーマエディター」を開きましょう。
![外観→テーマエディター](https://www.beginner-blogger.com/wp-content/uploads/2021/10/4443aaef64bac91a15fd09aec6e2d8a0.png)
初期設定では「Cocoon Child」が選択されており、「style.css」が開いてあるはずです。
![style.cssを開く](https://www.beginner-blogger.com/wp-content/uploads/2021/10/c47c77eabccbf6dcbd5b7c2dbacd3165.png)
今回使用するのは「javascript.js」です。
![javascript.jsを開く](https://www.beginner-blogger.com/wp-content/uploads/2021/10/38a49ae75fcda83a37086c2475f632cb-1.png)
javascript.js にコードをコピペする
$(function() {
$(".wp-block-cocoon-blocks-blogcard.current_tab a").attr("target", "");
});
コードのコピペは以上になります。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
最後に使い方を確認しましょう!
ブログカードを現在のタブで開かせる方法
上でも触れた通り、今の段階ではすべてのブログカードが
新しいタブ
で開かれるようになっています。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
そのため、新しいタブで開かせたいブログカードには何もしなくてOKです。
一方で現在のタブで開かせたいブログカードには、ブロックエディター上で少し細工を行う必要があります。
![ブログカード:ブロックエディター](https://www.beginner-blogger.com/wp-content/uploads/2021/11/f5711165c9e392338fb6eef4dedc3433.png)
ブログカードブロックをクリックしたときに画面右に表示される「高度な設定」をクリックします。
![高度な設定:追加CSSクラス](https://www.beginner-blogger.com/wp-content/uploads/2021/11/6d167657634555ada33c76884c90ee74.png)
すると「追加CSSクラス」という入力欄が現れるので、ここに「current_tab」と入力します。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2021/08/o621_1.png)
これで「current_tab」を付けたブログカードは現在のタブで開かれるようになります。
要するに、次のように使い分けるわけです。
まとめ
![お疲れさまでした](https://www.beginner-blogger.com/wp-content/uploads/2021/10/32e93eff8128e70eb6acc9414a2b0c24.png)
今回は、ブログカードの開き方を個別に設定するカスタマイズをご紹介しました。
のように用途に応じて使い分けると利便性が上がりそうですね。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2021/08/o621_1.png)
ぜひ参考にしてみてください!
今回のカスタマイズを導入してくださった方がいらっしゃれば、ぜひコメントや Twitter の方でお知らせください!記事内にてご紹介させていただきます!
コメント