複業ブログの始め方はこちら>>

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

【重要】THE THORでサイトカード・ブログカードを作成する方法を解説
悩んでいる人
THE THORのサイトカードとブログカードの違いは?
THE THOR(ザ・トール)でサイトカードの設定方法がわからない
こんな悩みを解決します。
✔ 記事の内容
  • THE THORのサイトカード・ブログカードの違い
  • THE THORでサイトカード・ブログカードを作成する方法
  • THE THORでサイトカード・ブログカードのカスタマイズ方法

    ✔ 記事の信頼性

    Keimii Blog

     けいみー(@keimii41

    僕は2020年2月から副業でブログを始めて、1年で月間30,000PV、収益は月13万円ほど。

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

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

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

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

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

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

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

    けいみー
    良くサイトで見る「合わせて読みたい記事」といったものですね。
    サイトカードとブログカードの違いは、内部リンクと外部リンクです。
    1. サイトカード→内部記事リンク
    2. ブログカード→外部記事リンク

       他のWordPressテーマではまとめて「ブログカード」と言いますが、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でサイトカード・ブログカードのカスタマイズ

        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テーマと言えますね。

            最後までご覧いただきありがとうございました。
            運営者情報
            よかったらシェアしてね!

            コメント

            コメントする

            目次
            閉じる