[Cocoon] リンクの種類と作り方 ~ URLの挿入手順まとめ

[Cocoon] リンクの種類と作り方 〜 URLの挿入手順まとめ

「リンク」とは、クリックすると別のページに移動できる URL のことです。

この記事では、リンクの種類と作り方をやさしく解説します。

リンクには、大きく分けてふたつの種類があります。

内部リンク:自分のブログやサイトへのURL

外部リンク:他のブログやサイトへのURL

いくみ
いくみ

「見た目」と「挿入方法」は同じです。

リンクの見た目は?3つのタイプ

Cocoonでは、リンクの見た目には以下のタイプがあります。

ラベル無しのブログカード:

ラベル有りのブログカード:

ここにラベルがありますね。

テキストリンク:

あぁ、ブログ。初心者の学習ノート

URLそのまま

 https://blogstudynotes.com/

また、「リンク」にはなりませんが、URLをテキスト情報として記載することも可能です。

https://blogstudynotes.com/

いくみ
いくみ

それぞれの挿入手順をご紹介します。

ラベル無しのブログカード

1.お目当てのURLをコピー。

2.投稿ページで、新しいブロックに貼り付け。

3.記事を[保存]して、プレビューを確認します。

いくみ
いくみ

これだけで、ブログカードになります!

✅ 以下のように「このコンテンツを埋め込めませんでした」と出ても、気にしなくて大丈夫です。そのまま公開しても、[リンクへ変換]を選択してもOKです。どちらにしてもブログカードに表示されます。

埋め込みURL、[リンクへ変換]

✅ 以下のように、下書き上ではURLだけに見えることもありますが、ブログ上ではブログカードのおさまります。

この方法だと結果は以下のようになります。

ラベル無しのブログカード例:

[WordPress] 水玉(ドット柄)のブログ/サイト背景 ~ CSSか画像設定で
CSSか画像を使って、ブログやサイトの背景を水玉(ドットパターン)にする方法です。

ラベル有りのブログカード

1.ブロックの右辺にプラスサインが表示されています。クリック。

以下のようになります。

WordPress ブロックメニューの選択

2.ここで、[ブログカード]メニューがリストされていたらクリック。なければ、ブロックの検索ボックスブログカードと入力してエンターキーを押してください。

3.[ブログカード]をクリック。

WordPress Cocoonブログカードでリンク設定

4.こうなりましたね。このブロックを選択した状態だと、右サイドに[スタイル設定]というセクションが表示され、そこで[ラベル]を選択できます

Cocoon リンクの挿入方法 ブログカードタイプ ラベルの選択
いくみ
いくみ

Cocoonには以下のように、ラベルの種類もたくさんあります!

ここで[なし]を選択すると、先ほどの「ラベル無しのブログカードタイプ」と同じ結果になります。

5.ラベルを選んだら、ブログカードのボックスに、URLを貼り付けます。

6.[保存]ボタンを押すと、プレビューで確認できる状態になっています。

「あわせて読みたい」ラベル使用例

テキストリンク

1.任意のテキストをブロックに入力します。

記事タイトルでも良いですし、キーワードでもOKです。

2.お目当てのURLをコピー。

3.入力しておいた1.のテキストを選択

4.選択した状態で2.でコピーしたURLを貼り付けます。
右クリックメニューの[貼り付け]か、Ctrl キーを押しながら Vキーを押すとできます。

または、

入力したテキストを選択してリンクアイコンをクリック。

WordPress Cocoonリンク設定 テキストタイプ

以下のフィールドにURLを貼り付け、矢印マークをクリックするかエンターキーを押すと設定完了です。

WordPress Cocoonリンク設定 テキストタイプ 新しいタブで開く設定

✅ 「新しいタブで開く」設定もできます。チェックを入れると、読者がリンクをクリックしたときに新しいタブでページが開きます。ページを離れずにいられるので親切です。

5.[保存]ボタンを押して、プレビューで確認。

テキストタイプのリンク例(タイトル以外の言葉を使用):

当ブログの「エラー3部作」:エラー報告事前策対応策、公開中です!

テキストタイプのリンク例(記事タイトルを使用):

HTMLサイトマップの作り方 ~ 正攻法とアナログ法”の目次3-2番で、Cocoonのコピーボタンを有効利用して、記事タイトルのテキストリンクを作る方法を書いています。

URLそのまま

1.新しいブロックにスペースでも文字でもいいので、何か入力します。

2.お目当てのリンクをそのブロックにコピー。(例として、URLの前にスペースを入力してあります。)

 https://blogstudynotes.com/

これで、URLそのままで、リンクにすることができます。

何も入力せず URL を貼ると自動でブログカードになるので、URL 表示にしたい場合はひと工夫です。スペースや文字を入力しましょう。

使用例です。

当ブログのURL: https://blogstudynotes.com/

リンクを無効にする方法

リンクURLをただの「テキスト」として表示させたいときは、リンクを選択して、リンクアイコンをクリックすれば、ただのテキストに戻ります。

Cocoon リンクを無効にする方法、テキストとして表示

「リンクを解除」しても、ブロックにURLのみだと、実際の画面では再びリンクに戻ってしまいます。

同じブロック内に、スペースや文字があると、「解除されたまま」で、URLをテキストとして表示できます。

手順の例では、すべて内部リンクを使っていますが、外部リンクも同じ方法で挿入できます

ピンバックと通知、モデレートのこと

内部リンクを貼ったときや、どなたかが、自分のブログを被リンクしてくれたとき、自分宛に「ピンバック承認待ちです」「モデレートしてください」といったメールが届くことがあります。

最初はびっくりしますが、通知設定をオフにすれば問題なし!

その機能をオフにする設定が以下のページに分かりやすくあったので、参考にされてください。通知がきたときの対応も載っています。

初期設定だと、自分が誰かのリンクを貼ったときにも、同じようにピンバックが送られているのですが、それをオフにする設定も上のページにあります。

外部リンクのマナー

外部リンクを貼るとき、許可が必要かな?と悩むことがありますが、多くの場合は不要でしょう。

リンクを貼ってもらうことを「被リンク」というのですが、被リンクの数は、Googleからの評価にもつながるそうです。

むしろリンクされることで相手の評価も上がることが多いので、お互いにメリットがあります。

とはいえ、お相手が被リンクを望まない旨を伝えたい場合もあるかもしれませんから、やはりコメント欄やコンタクトフォームを用意しておくと安心ですよね。

いくみ
いくみ

内部でも外部でも、記事の流れで読者にとって有効な情報をリンクしていきましょう!

記事内リンク

記事内で好きなセクションにジャンプするリンクを作ることもできます。

詳しい手順はこちらで紹介しています👇。

まとめ:リンクで記事をもっとわかりやすく!

リンクをうまく使うと、記事が読みやすくなり、読者がほしい情報にすぐたどり着けます。

内部リンクも外部リンクも、記事の流れを意識して、自然に貼っていきましょう!

さらに、リンクを「ボタン」や「画像」に設定する方法もまとめています👇。

  • リンクを「ボタン」にしたい。
  • リンクを「画像に設定」したい。

アイキャッチ画像は

Marcela LukášíkováによるPixabayからの画像

コメント

タイトルとURLをコピーしました