4月30日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

[Cocoon] リンクの種類と入れ方 ~ URLの挿入手順

[Cocoon] リンクの種類と入れ方 ~ URLの挿入手順
アイキャッチ画像は

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

「リンク」はURLのことです。

読者がリンク(URL)をクリックすると、そのページへ移動できます。

2種類に大別できます。

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

外部リンク:他のブログ・サイトのURL
(自分が運営する「他のブログ・サイト」のURLも外部リンクになります。)

いくみ
いくみ

「見え方」と「挿入方法」はどちらも同じです。

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

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

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

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

テキストタイプ:

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

URLそのまま:

 https://blogstudynotes.com/

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

 https://blogstudynotes.com/

いくみ
いくみ

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

ラベル無しのブログカードタイプでリンクを挿入する方法

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

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

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

いくみ
いくみ

これだけで、できています!

投稿画面上では、URLを入れたとき、こうなるときと、

Cocoon リンクの挿入方法 ブログカードタイプ

こうなるときがあります。

Cocoon リンクの挿入方法 ブログカードタイプ

「このコンテンツは埋め込むことができません」というメッセージが心配になる方もいらっしゃると思いますが、[リンクに変換]ボタンを押すと、こうなります。(ちなみに、そのままにしておいても、ちゃんと表示されます。)

 

 

両方とも、下書き画面の見た目で表示されるわけではありません。

ブログ上では、きちんとブログカードにおさまります。

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

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

ラベル有りのブログカードタイプでリンクを挿入する方法

1.投稿画面で[Enter]キーを押して新しいブロックを作ります。「文章を入力、または・・・」の、「文」という漢字の左側にマウスポインターを合わせてみてください。

以下のように、プラスアイコンが現れるのでクリックします。

WordPressブロックの追加アイコン

または、ブロック上辺の真ん中あたりにマウスポインターを合わせてもOK。
同じくプラスアイコンがでます。クリック。

WordPressブロックの追加アイコン

2.スクロールバーを下げて、[Cocoonブロック]のをクリック。メニューを表示させます。

Cocoon リンクの挿入方法 ブログカードタイプ ラベル有り、Cocoonブロック

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

Cocoon リンクの挿入方法 ブログカードタイプ ラベル有り、ブログカード

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

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

ラベルの種類は以下の9種類です。

Cocoon リンクの挿入方法 ブログカードタイプ ラベルの種類

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

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

ChromeからURLをコピーすると、貼り付けたときに、自動で前後にスペースが入ります。そのせいで、ブログカードとして表示されず、普通のURLになってしまいます。

この場合、編集画面で、URLの前後からスペースを削除してください。すると、ブログカードタイプで表示されます。

(これがチョット面倒なので、EdgeやIEなどの別ブラウザからURLをコピーするのがおススメです。)

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

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

テキストタイプでリンクを挿入する方法

1.お好みのテキストをブロックに入力します。

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

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

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

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

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

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

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

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

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

URLをそのまま表示させたいとき

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

2.お目当てのリンクをそのブロックにコピー。すると以下のようにリンクがテキスト状態になります。(例として、URLの前にスペースを入力してあります。)

 https://blogstudynotes.com/

3.テキスト状態のリンクを選択して、リンクアイコンをクリック。

Cocoon リンクの挿入方法 URLをそのまま挿入

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

スペースや文字をとってしまうと、「ブログカード」になります。何かしら入力しましょう。

使用例です。

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

リンクを無効にする方法

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

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

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

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

私は、グローバルメニューを変更したことで無効になったURLを記載するときに利用しました。

使用例はこちらの記事にあります: グローバルメニュー名(カテゴリーURL)変更のお知らせと手順

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

おわりに ~ 外部リンクのマナー

ブログを始めるときに、意外と分からなかったのが、リンクに関するマナーです。

いくみ
いくみ

外部リンクを挿入するときは、事前にお伺いをたてて、許可をとるのかな・・・?

というのを検索していました。

「ブログ界の公式マナー」みたいのは存在していないようなので(そりゃそうか)、私の理解ですケド、

許可なしで大丈夫そうです。

リンクを貼ってもらうことを「被リンク」というのですが、被リンクの数が多いほど、Googleからの評価もあがるそうです。

なので、余程不適切だったり、変な紹介をしない限り、お相手にとってはプラスになることです。

「外部リンクとして挿入したいブログ・サイト」は質が高く、自動的に、読者数も多いブログ・サイトですよね。(初心者の方のブログでも挿入させていただいたのもありますが。)

そうすると、「リンクを貼っても良いでしょうか」という問い合わせは、おそらく負担になります。

ということで、むしろ、お伺いを立てないほうが良いだろうというのが私の推測です。

サーチコンソールで、自分のブログリンクを貼ってくれたサイトは分かるようになっています。

なので、もし、「リンクをしないでほしい」という事情があれば、お相手があなたにコンタクトをとるのは可能です。

そのようなことは珍しいだろうとは思いますが、そういう意味でもコメント欄かコンタクトフォームは用意しておきましょう。

いくみ
いくみ

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

コメント

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