【重要】THE THORでサイトカード・ブログカードを作成する方法を解説

【重要】THE THORでサイトカード・ブログカードを作成する方法を解説
悩んでいる人
THE THORのサイトカードとブログカードの違いは?
THE THOR(ザ・トール)でサイトカードの設定方法がわからない

 

こんな悩みを解決します。

 

けいみー
こんにちは!けいみーです。この記事は5分で読めます!

 

✔ 記事の内容
  • THE THORのサイトカード・ブログカードの違い
  • THE THORでサイトカード・ブログカードを作成する方法
  • THE THORでサイトカード・ブログカードのカスタマイズ方法

 

✔ 記事の信頼性

Keimii Blog

 けいみー(@keimii41

僕は2020年2月から副業でブログを始めて、5ヶ月目に月間17,000PV、収益は月2.5万円ほど。

 

今回は、THE THOR(ザ・トール)でサイトカード・ブログカードを設定する方法を丁寧にご紹介します。

 

THE THOR(ザ・トール)では「ショートコード」を使ってボタン一つで作成することができます。

 

本記事を読むことでTHE THOR(ザ・トール)でサイトカード・ブログカードの作成方法を知ることができ、別の記事へ誘導できるようになるので、ぜひ最後までご覧ください。

 

\ 僕が最短で収益化できたテーマ /
当サイトで愛用中

 

 

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

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

 

THE THOR(ザ・トール)には、サイトカードとブログカードがあります。

 

簡単に言うと、「別のリンクへ誘導するカード」です。

 

けいみー
良くサイトで見る「合わせて読みたい記事」といったものですね。

 

サイトカードとブログカードの違いは、内部リンクと外部リンクです。
  1. サイトカード→内部記事リンク
  2. ブログカード→外部記事リンク

 

 他のWordPressテーマではまとめて「ブログカード」と言いますが、THE THORではわかりやすいように分けて設定されています。

こんな感じ。

 

✔ サイトカード
関連記事

悩んでいる人THE THORを紹介するASPはどこ?THE THORはアフィリエイトで紹介できる? こんな悩みを解決します。 けいみーこんにちは!けいみ[…]

【最新版】THE THORをアフィリエイトできるASPと手順を解説

 

✔ ブログカード
サラリーマン戦略

THE THOR(ザ・トール)を買おうか迷っているけど、価格がいくらか気になっていませんか?本記事では、THE THOR…

 

それぞれリンクを押してみてください。

 

サイトカードは内部リンクなのでタブはそのままで開き、ブログカードは外部に新しいタブで開きます。

 

SEO対策として記事の回遊率をあげるのであれば、内部記事リンクである「サイトカード」を使うのがベストです。

 

用途に合わせて使い分けましょう。

 

THE THORでサイトカード・ブログカードを作成する方法

THE THORでサイトカード・ブログカードを作成する方法

 

THE THOR(ザ・トール)でサイトカード・ブログカードを作成する方法を解説します。

 

THE THOR(ザ・トール)では、サイトカード・ブログカードを作成するのはめちゃくちゃ簡単です。

 

✔ サイトカード・ブログカードの作成手順

  1. ビジュアルエディタで挿入部分を決める
  2. ショートコードをクリック
  3. カードを選択(画像参照)
  4. URLをコピペする

これだけです。

 

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

 

実際にショートコードから挿入すると、このように出てきます。

 

THE THORでサイトカード・ブログカードを作成する方法

 

どちらも「url=」の後に表示させたいページのURLを貼り付けるだけです。

 

ちなみに、サイトカードの「関連記事」の部分を好きな文言に変更することができます。

 

例えば、「あわせて読みたい」や「おすすめ記事」なども良いですね。

 

 

サイトカード・ブログカードの設定は以上です。

 

THE THOR(ザ・トール)では、魅力的なサイトカードやブログカードが、簡単に設定できてしまうんですよね。

 

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

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

 

THE THOR(ザ・トール)でサイトカード・ブログカードのカスタマイズ方法をご紹介します。

 

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

 

影を付けたことで立体感と、自分のサイトに合った色に変えてみました。

 

とはいえ、僕の場合の1例ですのでこれが全てではありません。

 

✔ カスタマイズのポイント

  • 枠線の色
  • 影の色
  • 文字の色
  • 背景色

 

下のコードをそのままコピペすることで、当ブログと同じようなデザインに変えることができます。

 

.content .sitecard {
border: 1.5px solid #d16477;
box-shadow: 5px 5px 5px #a9a9a9;
}

.content .sitecard__subtitle{
color: #ffffff;
background-color: #d16477;
}

.content .blogcard {
border: 1.5px solid #d16477;
box-shadow: 5px 5px 5px #a9a9a9;
}

.content .blogcard__subtitle{
color: #ffffff;
background-color: #d16477;
}

 

それぞれの項目の色を変えることができるので、ぜひあなたのサイトにあった色に変えてみてください。

 

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

 

カラーコードはITSakuraというサイトを使えば一覧でわかりますよ。

 

THE THORでサイトカード・ブログカードのカスタマイズ方法

 

THE THORでサイトカード・ブログカードのカスタマイズ手順をご紹介します。

 

✔ カスタマイズ手順

  1. 外観→カスタマイズ
  2. 追加CSS
  3. コードをコピペ
  4. 公開

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

 

以上です。

 

「#〇〇〇〇」の部分を好きな色に変えるだけで、お好みの色に変更することができます。

 

変更する箇所は、赤枠の部分のみでOKです。

 

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

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

 

とはいえ、THE THORでは簡単にサイトカードとブログカードを設定できますし、デフォルトのシンプルなデザインだけでも十分です。

 

カスタマイズする余裕がある人のみで、無理してカスタマイズしなくてもOKですよ。

 

THE THORのサイトカード・ブログカードの設定方法:まとめ

THE THORのサイトカード・ブログカードの設定方法:まとめ

 

THE THOR(ザ・トール)のサイトカード・ブログカードの設定方法を解説しました。

 

サイトカードやブログカードは、読者にサイト内を巡回してもらうために必要な機能です。

 

読者にクリックしてもらえるようにうまく使っていきましょう。

 

THE THORでは、便利なサイトカードやブログカードが簡単に設定できるので、初心者でも扱える親切なWordPressテーマと言えますね。

 

\ 僕が最短で収益化できたテーマ /
当サイトで愛用中

 

 

最後までご覧いただきありがとうございました。

 

【重要】THE THORでサイトカード・ブログカードを作成する方法を解説
最新情報をチェックしよう!