ブログカードとテキストリンクの作り方

「THE THOR」リンクの貼り方を解説。ブログカード・テキストリンク

  • 2021年10月3日
  • 2021年10月3日
  • THOR
 
ハテナザウルス
THORでリンクってどうやってはればいいの?
 
ヒラメキザウルス
THORのブログカードの使い方、テキストリンクの貼り方を解説するよ~!

webサイトでは、本や新聞とは違ってリンクがあります。

リンクが張ってあることで、読者は他にも知りたい情報を得られたりと便利な機能ですよね。

ブログ内でのリンクは、SEO対策としても重要です。

ブログをはじめたばかり方や、THORへテーマを変更したばかりの方で、リンクの貼り方が分からない方がいるのではないでしょうか。

この記事では、リンクってどうやって貼るの?という方へ向けて、

THORでのブログカードの使い方と、テキストリンクを貼る方法を解説します。

ブログカードの使い方

ブログカードの機能を使うことで、おしゃれなリンクを貼ることが出来ます。

ブログカードとは?

以下のようなものです。

関連記事

 ハテナザウルス初心者でも簡単におしゃれなサイトを作れる方法ってないのかな~。 ヒラメキザウルスTHORの「デザイン着せ替え機能」で簡単にできるよ!おしゃれなサイトを簡単に作たいと思う方は多い[…]

デモサイトをインストール

「アイキャッチ画像」と「本文」が表示されますね。

このブログカードのおかげで、リンク先がどんな内容の記事なのか一目で分かりますね。

読む人の目にも留まりやすく、ぜひ読んでもらいたいと思う場面で有効です。

 
ハテナザウルス
ブログカードを上手く使って、読者の注目を集めるってわけだね。

THORでブログカードを設置する方法

それでは、ブログカードを設置する手順を解説します。

THORではCocoonと違って、ブロックエディターにブログカードの機能がありません。

「クラシックエディター」を使います。

「クラシックエディター」を開く

「ショートコード」から「ブログカード」または「サイトカード」を開きます。

  • ブログカード(外部サイトリンク)
  • サイトカード(内部サイトリンク)

リンク先が外部リンクか内部リンクかで使い分けしましょう。

ショートコードからブログカードを選択

ショートコードが表示されます。

以下のように「url=」の後にリンク先のURLを入力します。

リンク先のURLを入力する

以上の手順で、ブログカードのリンクが作れます。

 
ハテナザウルス
URLをコピペして、そのまま貼り付ければいいんだね。

「関連記事」を別の表記に変更する方法

「関連記事」の部分を好きな表記にすることが出来ます。

例えば、「合わせて読みたい」にしたい場合には以下の通りにします。

「=関連記事」と書いてある部分を「=(好きな表記)」に書き換える。

関連記事を変更できる
 
ハテナザウルス
文字を書き換えるだけでいいんだね。

クリックしたとき、別のタブで開く方法

サイトを別のタブで開くことが出来ます。

リンク先が別のタブで開かれることで、元のページは残ったままになります。

これにより、自分のサイトが閉じられることがないので、サイトの回遊率が上がったり、記事を最後まで読んでもらえる可能性が高まります。

外部リンクを貼る際に設定するのをおすすめします。

「target=blank」と入力する

target=blankを入力する

実際に「別のタブで開く」か「同じタブで開く」かの違いを比べてみましょう。

target=blankあり(別のタブで開く)

関連記事

 ハテナザウルスTHORのブロックエディターじゃ物足りないよ~ ヒラメキザウルスブロックエディターの機能を拡張するプラグインを紹介します!。「THE THOR」のブロックエディターの機能に物足[…]

SnowMonkeyEditorアイキャッチ画像

target=blankなし(同じタブで開く)

関連記事

 ハテナザウルスTHORのブロックエディターじゃ物足りないよ~ ヒラメキザウルスブロックエディターの機能を拡張するプラグインを紹介します!。「THE THOR」のブロックエディターの機能に物足[…]

SnowMonkeyEditorアイキャッチ画像

テキストリンクの使い方

テキストリンクでリンクを張る方法を解説します。

テキストリンクはブログカードと違って、テキストだけのリンクです。

トールでブログ道トップページはこちら(テキストリンク)

テキストリンクの場合では、文章の途中でもリンクと分かる形で自然に入れることが出来ます。

例えば、クリックしてもらいたい部分はブログカードでリンクをはるが、優先順位の低いリンクはテキストリンクにする、等の使い分けが出来ます。

文章に溶け込みやすいリンクで汎用性が高いです。

 
ヒラメキザウルス
シンプルで使いやすいですね。

テキストリンクを設置する手順

テキストリンクはブロックエディターで設置することが出来ます。

ブロックに文字を入力する(ここの文字がリンクとして表示されます)

ツールバーの「リンクボタン」をクリック

リンクボタン

リンク先のURLを入力します。

新しいタブで開きたい場合は「新しいタブを開く」で設定できます。

URLを入力する画面

出来たら、矢印(↩)をクリックすれば完了です。

テキストリンクの色をカスタマイズする方法

テキストリンクの色は「THORのカスタマイズ設定」で変えることが出来ます。

WordPressの「外観」>「テーマ」>「基本設定」>「基本スタイル」とすすみます。

基本スタイル設定の画面

「投稿内テキストリンク色を指定」

ここでリンクの色を好きな色に変えることが出来ます。

投稿内テキストリンク色の設定画面

リンクの文字色は自分のサイトのイメージに合わせて好きな色に変えられます。

ただし、テキストリンクの色と言えば、青色が一般的ですね。

Google検索で出てくるリンクの色は「#1a0dab」です。

 
ハテナザウルス
青色は直感的にリンクだって分かりやすいね。
Googleのテキストリンクの色

全体のまとめ

この記事では、リンクってどうやって貼るの?という方へ向けて、

ブログカードの使い方と、テキストリンクの貼り方を解説しました。

ブログカード

読者の目に留まりやすくて、目立つ。

クラシックエディター>ショートコード>サイトカード(内部リンク)orブログカード(外部リンク)

ショートコードのタグを変えることで、関連記事の表記を変えることができる。

リンク先を別のタグで開かせたい場合には「target=blank」を入力する。

テキストリンク

文章に溶け込みやすく、汎用性が高い

ブロックエディターで作成

ブロックに文字を入力(この文字がリンクとして表示される)

ツールバーのリンクボタンをクリック

URLを入力して「↩」で完了。

リンクの色はカスタマイズ>基本設定>基本スタイルで変えることが出来る

リンクの色には青色が使われていることが多い

Googleは(#1a0dab

当ブログで使用中のテーマ「THE THOR」はこちら