こんにちは、阿木人です。
WordPressテーマのCocoonを使った外部リンクの貼り方です。
結構簡単に出来るので、設定も合わせて覚えておきましょう。外部リンクを示すアイコンの設定もCocoonなら超簡単に設定できますよ。
この記事では特に初心者の方向けとして画像を入れつつ、なるべく分かり易く説明してみたいと思います。
※Cocoonで内部リンクを貼る方法が知りたい方はこちらの記事↓
外部リンクってどんなやつ？
外部リンクとは、参考として確認してもらいたいWebページや、おすすめのサイトや記事の紹介などをしたい時に使えます。
自分のサイト内に飛ぶリンクは内部リンク。自分のサイト外に飛ぶリンクが外部リンクですね。
Cocoonの外部リンク設定
まずはCocoonの外部リンクの設定から確認しましょう。
外部リンクを別タブで開かせる設定
まずは「Cocoon設定」→「Cocoon設定」を選択します。
するとCocoonで設定できる色んな項目のタブが出てくるので、「本文」を選択します。
「本文」タブの中に、「外部リンク設定」があります。
その「外部リンク設定」項目の中で細かい設定をしていきます。
好みではありますが、「外部リンクの開き方」を「新しいタブで開く(_blank)」に設定しましょう。別に設定しなくても良いですが、大体のWebサイトは外部リンクを開く時は別タブで開かせていると思います。
ここを新しいタブで開くにしておかない場合、同じタブ内でページ遷移が行われます。つまりユーザが自分のサイトに帰ってくるのが若干面倒orそのまま帰ってこない確率(離脱率)が上がり、機会損失になります。
「追加rel属性」内の「target=”_blank”の際はnoopenerを追加」項目のチェックボックスにはチェックを入れておいた方が良いです(アフィリエイトの収益に影響が出る可能性がある)。
ここまで出来たら、忘れずに「変更をまとめて保存」をクリックして設定内容を保存しましょう。 これで外部リンクを別タブで開かせる方法の設定は以上です。
なお、外部リンクにアイコンを付けたい方は次の項目も続けて設定して下さい。
外部リンクにアイコンを付ける
Cocoonなら簡単に外部リンクを示すアイコンも表示させることが可能です。
同じく、「外部リンク設定」の中に、「アイコン表示」項目があるのでチェックを入れます。
「アイコン」の項目で、表示させたいアイコンのフォントが選べるのでお好みのアイコンを選択。
ここでも忘れずに「変更をまとめて保存」で設定内容を保存しましょう。
Cocoonで外部リンクを貼る方法
ここまでが設定でした。
次からは実際に、投稿画面でどうやれば外部リンクが貼れるのかを説明していきます。
外部リンクの場合も、内部リンクと同様に「テキストリンク」か「ブログカード」でリンクさせることが可能です。
以下、テキストリンクとブログカードのサンプルです↓ ※実際にリンク貼ってあるので、クリックすると外部サイト(Cocoonの公式サイト)に飛びます。
テキストリンクのサンプル↓
ブログカードのサンプル↓
テキストリンク(外部リンク)を貼る方法
サンプルとして、「Cocoon | WordPress無料テーマ」という文字にリンクを貼ってみます。
リンクさせたい文字を書き範囲選択して→「リンク」ボタンをクリック。
クリックすると「URLをペーストするか入力して検索」という検索窓が出ます。
検索窓に、リンク先のURLを貼って右の矢印ボタン(適用)を押せば完了です。
（※ここで自分のサイト内のURLを貼ると内部リンクになります。詳しくは「【初心者向け】Cocoon(コクーン)で内部リンクを貼る方法」を参照）
こんな感じになるはず。↓
編集画面だとアイコンが表示されませんが、プレビューを見ると、ちゃんと設定したアイコンが表示されます。↓
ブログカード(外部リンク)を貼る方法
テキストリンクを作る方法とほぼ同じです。
文字列の範囲選択をせずに「リンク」ボタンをクリック。以下テキストリンクの作り方と同じです。
編集画面とプレビュー画面↓↓↓
上の編集画面に対応したプレビューを見てみると、こんな感じになります↓ ※編集画面だとURL表示ですが、ちゃんとブログカードが表示されます。
注意点としては、URLの前後(同じブロック)に文字など余計なものがあるとブログカードになりません。
以上がWordPressテーマのCocoon(コクーン)を使った外部リンクの貼り方です。ブログの質を上げる為に必要になる技術なので、是非覚えましょう。
内部リンクの貼り方はこちらの記事↓
リンクの貼り方に慣れてきてpv数も増えてアドセンスも貼ったが、更に収益を伸ばしたいという場合はアフィリエイトが必須↓
