【THE THOR】サイトカード・ブログカードの使い方【内部・外部リンク】

 
Ai
今回は THE THOR(ザ・トール)のサイトカード・ブログカードの使い方と簡単カスタマイズを紹介するよ!
こんな人にオススメ!
  • THE THORのサイトカード・ブログカードの使い方が知りたい
  • いまいち使い方が分からない
  • デザインをオシャレにカスタマイズしたい!
  • サイトカードとブログカードが表示されなくて困ってる。正しい使い方が知りたい!
別名、内部リンクと外部リンクだね!

みなさんこんにちは。

JonyとAi(@10to1_travel)です。

THE THOR(ザ・トール)のサイトカードとブログカードってショートコードを使って設置する必要があるので、初心者の人は戸惑いますよね。

そんな人のために使い方を超簡単に解説します。

さらに、後半ではデザインのカスタマイズ、サイトカードが表示されない時の対処法も紹介していきますね!

その前に、2つのカードの使い分け・役割を解説します!ここを理解しておかないと間違った使い方をしてしまい、アクセス数に大打撃を受けてしまう可能性がありますからね。

 
Jony
もう知ってる!って人はスキップしてサイトカードとブログカードの使い方から読んでやー!
関連記事

 Ai THE THORのブログカード(外部サイトリンク)をオシャレにカスタマイズするよ! 記事の内容 ブログカードについて知るTHE THORのブログカードをカスタマイズする(コピペだけ)ブログカードデザインを[…]

サイトカードとブログカードとは?

サイトカードとブログカードはリンクをカード化した要素です。

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

サイトカード(内部リンク)

サイトカード(内部リンク)とは、あなたのサイト内のページを繋ぐリンクのことです。簡単に言えば、同じサイト内で違う記事を貼ることですね。

内部リンクを設置することにより以下のメリットがあります。

  • クローラーがサイト内を巡回しやすくなる
  • ページの専門性が高まり評価が上がる
  • ユーザーのサイト滞在時間が増える

ブログカード(外部リンク)

ブログカード(外部リンク)とは、あなたのサイトと他サイトを繋ぐリンクのことです。「被リンク」とも呼ばれていますね。

簡単に言えば、あなたのサイトで他のサイトの記事を紹介すると言うことです。

外部リンクは少し難しいのですが、以下のメリットがあります。

  • 関連性の高い被リンクを貼ることによりユーザーにより良い情報を提供できる
  • 他のサイトに被リンクされる(発リンク)とあなたのサイトの評価が上がる

あなたが外部リンクを貼るメリットはユーザーの満足度が上がることです。

ユーザーがあなたのサイトから外部リンクに行ってしまうかもしれませんが、その代わりユーザーは「このサイトでは自分が欲しかった情報が集まってる!またブックマークしとこう!」となり、リピーターになってくれる可能性があります。

一方で、あなたのサイトが他サイトから被リンクされると、他のサイトからのアクセスが増える、Googleがあなたのサイトを高く評価する、ドメインパワーが上がり検索上位を狙いやすくなると言うメリットがあります。

理想は他サイトがリンクしたくなるような記事を作成することですね!

 
Ai
サイトカード・ブログカードの役割が分かったところで、本題の使い方を紹介していくね!

THE THOR サイトカード・ブログカードの使い方

それでは本題の THE THOR(ザ・トール)のサイトカードとブログカードの使い方を紹介していきます。

手順は簡単です。

サイトカードとブログカードの使い方
  • 手順1.
    ショートコードを挿入する
    ショートコードを使ってカードを設置します。
  • 手順2.
    コードにURLを入力する
    ショートコード内に表示したい記事の URLを入力します。

※THE THOR(ザ・トール)はクラシックエディタ推奨のため、サイトカード・ブログカードを使いたい場合は旧エディターを使用します。ブロックエディタでショートコードを使う場合は旧エディターを呼び出す必要があります。

手順1. ショートコードを挿入する

まず手順1では、クラシックエディターのショートコードから《サイトカード》《ブログカード》を選びます。

ショートコードを挿入する

手順2. コードにURLを入力する

貼り付けたコード内に設置したい記事の URLを貼り付けます。

コードにURLを入力する

【ブログカード(外部サイトリンク)のコード】
・blogcard url=ここにURL

【サイトカード(内部サイトリンク)のコード】
・sitecard subtitle=関連記事 url= ここにURL target=

※実際のショートコードは [ ]で囲われてます。当記事ではコードを紹介するために [ ]を消してます。

ここにURLの部分に https:から始まる URLをまるっと貼り付ければ OKです。

 
Jony
ちなみに、シングルコーテーション( ” )ダブルコーテーション( “” )囲う必要はないで!一応囲っても表示はされるけどな!これはプログラミングかじってる人の疑問やから、今何言ってるか分からん人は無視してくれい!

これで設置は完了です。簡単ですね!

「あれ!?この手順通りにしたのにサイトカード・ブログカードが表示されない!?」って人は THE THORのサイトカード・ブログカードが表示されない!原因と解決策をご覧ください!

ユーザーにもっとサイト内を巡回してもらうには、設置したリンクをクリックしてもらう必要があります。

そのひと工夫も THE THOR(ザ・トール)では可能です。いくつか追加オプション機能がありますので、そちらをご紹介します。

「関連記事」を「合わせて読みたい」に変更する方法

デフォルトの状態だと、カードのタイトルが「関連記事」になっています。

サイトカード「関連記事」を任意のテキストに変更する方法

もちろんそれでも良いのですが、例えば「合わせて読みたい」や「この記事もオススメ」などのタイトルに変更したい人もいると思います。

方法は簡単です。

sitecard subtitle=関連記事 url= ここにURL target=

※実際のショートコードは [ ]で囲われてます。当記事ではコードを紹介するために [ ]を消してます。

関連記事の部分を好きなタイトルに変更するだけです。

例)

sitecard subtitle=合わせて読みたい url= ここにURL target=

これでタイトルを変更することができます。

サイトカード「関連記事」を任意のテキストに変更する方法

これでも十分なのですが、サイトカードを「新しいタブで開く」こともできます。

例えば、あなたがサイトを読んでる時、「この関連記事も読みたいけど今のページもキープしときたい。でもクリックしたらページが切り替わってしまう。どうしよう」って経験ありませんか?

そんなユーザーのために、内部リンクを別のウィンドウで開いて表示させる方法です。

 
Ai
ユーザービリティの向上に役立つと思うからぜひ試してみてね!

サイトカードを新しいタブで開く方法

さっそく、サイトカードを「新しいタブで開く」方法を紹介します。

サイトカードを新しいタブで開くには blankと言うコードを追記するだけで OKです。

blankは簡単に言うと別のタブで開くよう命令するプログラミングコードのことです。

sitecard subtitle=関連記事 url= ここにURL target= blank

※実際のショートコードは [ ]で囲われてます。当記事ではコードを紹介するために [ ]を消してます。

上記のように target=の後ろに blankと入力します。

これで設定は完了です。

以下が blankコードありと無しのサイトカードです。試しにクリックしてみてください。

blankあり(新しいタブで開く)

関連記事

みなさんこんにちは。 THE THORユーザーの JonyとAi(@10to1_travel)です。 THE THOR(ザ・トール)には手順を解説するためのステップフローボックス(タイムライン)の機能がありません。 […]

blankなし(ページが切り替わる)

関連記事

みなさんこんにちは。 THE THORユーザーの JonyとAi(@10to1_travel)です。 THE THOR(ザ・トール)には手順を解説するためのステップフローボックス(タイムライン)の機能がありません。 […]

 
Ai
ちなみにブログカードデフォルトで新しいタブで開かれるよに設定されてるので、設定は不要です!

これで THE THOR(ザ・トール)のサイトカード・ブログカードの使い方は終了です。

簡単でしたね。

ここからはサイトカードとブログカードのデザインをもっと自分らしくしたい人のために、カスタマイズの方法をご紹介していきます。

THE THOR サイトカード・ブログカードをカスタマイズ

THE THOR(ザ・トール)のサイトカードとブログカードのデザインをカスタマイズします。

CSSが分からない人のためにコピペだけで使えるカスタマイズを紹介しています!

  • コメントを非表示にする
  • タイトルの色を変更する
  • サブタイトルの色を変更する
  • 枠線の色・太さ・種類を変更する
  • 背景色を変更する
  • アイキャッチ画像サイズを変更する

THE THOR(ザ・トール)の追加CSSを使ったカスタマイズ方法が分からない人は以下の記事をご覧下さい。

関連記事

みなさんこんにちは。 THE THOR(ザ・トール)のデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ!】ってタイトルありますよね。 でも コピペってどこに?追加 CSSって[…]

※カスタマイズは自己責任でお願いします。

サイトカード・ブログカードの抜粋を非表示にする

サイトカード・ブログカードの抜粋文を非表示にします。

サイトカード・ブログカードのコメントを非表示にする
 
Jony
正直、文章途中で途切れてるし、記事の頭の文章しか表示されないから全くいらんねんな。

以下のコードをコピーして「追加CSS」に貼り付ければ OKです。

サイトカードとブログカード別に CSSを紹介します。

/*サイトカードのコメント非表示*/
.content .sitecard__contents .phrase{
display: none;
}
/*ブログカードのコメント非表示*/
.content .blogcard__contents .phrase{
display: none;
}

タイトルの色を変更する

h1タイトルの色を変更する方法です。

サイトカード・ブログカードのタイトルの色を変更する

あまり需要がありませんが、例えば、カード背景を黒にしたいときにタイトルを白に変えることができるので有効ですね。

サイトカードとブログカード別に CSSを紹介します。

/*サイトカードのタイトル色*/
.content .sitecard .heading a{
color:#ea4f4f;/*カラー*/
}
/*ブログカードのタイトル色*/
.content .blogcard .heading a{
color:#ea4f4f;/*カラー*/
}

color:#ea4f4f;の #から始まる 6ケタのカラー番号を好きな色に変更してご使用ください。

カラー番号は原色大辞典さんがとても参考になります。

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…

サブタイトルの色を変更する

カード左上に設定されてるサブタイトルの色を変更するカスタマイズ方法です。

サイトカード・ブログカードのサブタイトルの色を変更する

サイトカードとブログカード別に CSSを紹介してます。

/*サイトカードのサブタイトル*/
.content .sitecard__subtitle{
background-color:#ea4f4f;/*背景色*/
color: #ffffff;/*文字色*/
}
/*ブログカードのサブタイトル*/
.content .blogcard__subtitle{
background-color:#ea4f4f;/*背景色*/
color: #ffffff;/*文字色*/
}

上記と同様、#から始まる 6ケタのカラー番号を好きな色に変更してご使用ください。

サブタイトルの色を変したら、カードの枠線も同じ色に合わせた方がデザインがまとまります。なので次は枠線のデザインをカスタマイズしてみましょう!

枠線の色・太さ・種類を変更する

サイトカード・ブログカードの枠線の色、太さ、種類を変更するカスタマイズです。

サイトカード・ブログカードの枠線の色・太さ・種類を変更する

サイトカードとブログカード別に CSSを紹介します。

/*サイトカードの枠線*/
.content .sitecard {
border: 2px solid #ea4f4f;/*太さ・種類・カラー*/
}
/*ブログカードの枠線*/
.content .blogcard {
border: 2px solid #ea4f4f;/*太さ・種類・カラー*/
}

以下のように、太さ・種類・カラーと半角スペースで区切りながら書き込みます。

border: 2px solid #ea4f4f;

太さ・種類・カラーの順番で解説していきます。

ボーダーの太さ

ボーダーの太さは ○pxで指定します。数値が大きくなるほど線が太くなります。

サイトでは基本的に 1〜5px内で使用されることが多いです。

ボーダーの種類

solid一本線(デフォルト)
double二重線
dashed破線
dotted点線

ボーダーのカラー

ボーダーの色は #から始まる 6桁のカラー番号で指定します。変更したいカラー番号を入力してください。

例えば、カラーコードを変えると以下のようになります。

  • color:#ff7f50;
  • color:#1e90ff;
  • color:#674196;

背景色を変更する

カードの背景色を変更します。

サイトカード・ブログカード別に CSSを紹介してます。

/*サイトカードの背景色*/
.content .sitecard {
background-color:#fffff9;
}
/*ブログカードの背景色*/
.content .blogcard {
background-color:#fffff9;
}

上記と同様、#から始まる 6ケタのカラー番号を好きな色に変更してご使用ください。

アイキャッチ画像サイズを変更する

コメントを非表示にすると気になるのがアイキャッチ画像のサイズですね。

THE THOR(ザ・トール)のデフォルトではアイキャッチは正方形になってます。しかし、それでは私たちのようなアイキャッチだと文字が切れて見にくくなってしまいます。

サイトカード・ブログカードのアイキャッチ画像サイズを変更する

そんな悩みを解決する CSSコードは以下の通りです。

/*サイトカードの画像サイズ*/
.eyecatch .eyecatch__link img {
object-fit: contain;
}
.eyecatch-11::before {
padding-top: 55%;
}

ちなみに私たちのサイトでは、.eyecatch .eyecatch__link img{object-fit: contain;}を設定すると画像が上手く変更されませんでした。

アイキャッチが上手く表示されない時は、上記を消してみてください。

全ての CSSを設置した結果【完成図】

ちなみに上記の CSSを全て設置すると以下のようになります。

かなりコンパクトになったので見やすくなりましたね。好きな色に変更してご使用ください。

/*サイトカードのサブタイトル*/
.content .sitecard__subtitle{
background-color: #ea4f4f;/*背景色*/
color: #ffffff;/*文字色*/
}
/*サイトカードの枠線*/
.content .sitecard {
border: 2px solid #ea4f4f;/*太さ・種類・カラー*/
}
/*サイトカードの背景色*/
.content .sitecard {
background-color:#fffff9;
}
/*サイトカードのコメント非表示*/
.content .sitecard__contents .phrase{
display: none;
}
/*サイトカードの画像サイズ*/
.eyecatch-11::before {
padding-top: 55%;
}
/*サイトカードのタイトル色*/
.content .sitecard .heading a{
color:#ea4f4f;/*カラー*/
}

サイトカード・ブログカードが表示されない!原因と解決策

上記の方法でサイトカード・ブログカードを設置したのにプレビュー画面に表示されない問題を解決します。

理由は単純なことですが、実は、けっこうやってしまうミスなのです。

原因は以下の 4つです。

  • URLを貼り付ける場所が違う
  • URLの貼り方が違う
  • URLの前後に半角スペースを入れる
  • サイトカードとブログカードの使い間違い

原因の解説と解決策を紹介していきます。

URLを貼り付ける場所が違う

これが一番多い失敗です。

単純に URLの貼り付ける場所が違っています。

× 間違い
sitecard subtitle=関連記事 url= target= https://10to1travel.com/

◯ 正解
sitecard subtitle=関連記事 url= https://10to1travel.com/ target=

サイトカードの場合は記事の URLは url=の後ろです。target=の後ろに貼っても表示されません。

URLの貼り方が違う

続いてもよくある間違いです。

url=を消して URLを貼り付けてしまうパターンです。

× 間違い
sitecard subtitle=関連記事 https://10to1travel.com/ target=

◯ 正解
sitecard subtitle=関連記事 url= https://10to1travel.com/ target=

url=は消さず、そのまま後ろに URLを設置しましょう。

URLの前後に半角スペースを入れる

これは私たちの体験談ですが、そのまま URLを貼り付けても表示されませんでした。

原因は URLの前後のスペースでした。URLを半角スペースで挟むと表示されましたので、試してみてください。

× 間違い
sitecard subtitle=関連記事 url=https://10to1travel.com/target=

◯ 正解
sitecard subtitle=関連記事 url= https://10to1travel.com/ target=

よく見ると URLの両橋に半角スペースがあります。

サイトカードとブログカードの使い間違い

最後はおっちょこちょいなミスで、単純にサイトカードとブログカードを貼り間違えてるケースです。

私たちの場合はちゃんと表示されましたが、人によってはアイキャッチ画像が表示されなかったりするそうです。

サイトカードを使いたい場合は、しっかりサイトカードを使用しましょう。

× 間違い
blogcard url= https://10to1travel.com/(自サイト) target=

◯ 正解
sitecard subtitle=関連記事 url= https://10to1travel.com/ target=

THE THOR サイトカード・ブログカードの使い方:まとめ

今回は THE THOR(ザ・トール)のサイトカードとブログカードの使い方とカスタマイズ方法をまとめました。

内部リンクと外部リンクは検索上位を狙う上でも特に重要な SEO対策のひとつです。

ユーザーの満足度、サイト巡回率を上げるためにも、しっかりと使いこなしましょう!

もっとサイトカードとブログカードのデザインをオシャレにしたい人は、以下の記事をご覧ください。

関連記事

 Ai THE THORのブログカード(外部サイトリンク)をオシャレにカスタマイズするよ! 記事の内容 ブログカードについて知るTHE THORのブログカードをカスタマイズする(コピペだけ)ブログカードデザインを[…]

記事(Coming soon)

最後まで読んでいただきありがとうございます。

おわり