こんにちは、テンテンです。
今回は、THE THOR（ザ・トール）でサイトカードとブログカードの使い方とについて解説します。
デフォルトのデザインだと状態だと少し地味ということもあり、若干カスタマイズもしてみました。
コピペで使えるように最後には、プログラミングコードを添付しておきます。
また、色を変更したい方もいるかと思いますので、どのコードをいじって色変更をしたら良いかについても解説します。
THE THORでサイトカード・ブログカードの使い方を知ろう！
THE THOR（ザ・トール）では、デフォルトの機能でサイトカードとブログカードを使うことができます。
【参考例】
※サイトカードとブログカードは若干カスタマイズしているので、デフォルトの状態とは微妙に異なります。
サイトカードは、内部リンクを貼り付ける時に使うモノで、ブログカードは外部リンクを貼り付ける時に使うモノという形で認識しておきましょう。
一般的には、これらをまとめてブログカードと呼びますが、THE THOR（ザ・トール）では、使い分けがハッキリわかるようにこのようにしているのかと思います。
では、早速使い方について解説していきます。
①「ショートコード」→「ブログカードorサイトカード」を選択します。
・blogcard url= 【サイトカード（内部サイトリンク）のコード】
・sitecard subtitle=関連記事 url= target=
②URL＝URL入力します。
・sitecard subtitle=関連記事 url=https://tenten-blog.com/wordpress-restoration-company/ target=
プログラミングをちょっとでもかじっている方は、シングルコーテーションやダブルコーテーションは必要ないの？と思う方もいるかもしれませんが必要ありません。
ちなみに、シングル・ダブルコーテーションが入力しても表示されます。
※今、何を言っているかよくわからない方はスルーで良いです。
「関連記事」という文言を変更したい場合は、一度削除して新しく入力しましょう。
・sitecard subtitle=あわせて読みたい記事 url=https://tenten-blog.com/wordpress-restoration-company/ target=
③target=self or blankを入力します。
※以前まではなかったプログラミングコードです。
これは、内部リンクや外部リンクをクリックした際、新しいタブで開くか現在のタブのまま開くのか設定です。
(1)blank（新しいタブで開く）の参考例
こんにちは、テンテンです。 有料テーマであるTHE THOR（ザ・トール）で、オススメ・必須プラグインのご紹介と不要なプラグインについて解説させていただきます。 プラグイン一つとっても、か[…]
上記の記事は、blank(新しいタブで開く)で設定した例です。一度、こちらの内部リンクをクリックしていただければわかりますが、新しいタブが開きます。
(2)self（現在のタブで開く）の参考例
こんにちは、テンテンです。 今回は、WordPressの初期設定について解説していきます。 Tenten WordPressでブログ運営を始める際に、ほとんどの人がぶつか[…]
上記の記事は、self(現在のタブで開く)で設定した例です。一度、こちらの内部リンクをクリックしていただければわかりますが、現在のタブのままページが変わります。
基本的には、内部リンクを貼り付ける場合はタブは現在のタブで、外部リンクを貼り付ける場合は新しいタブで開くのが一般的ですが、工夫して使っていきましょう。
使い方自体の説明はこれで全てとなります。
ブログカード・サイトカードをカスタマイズしてみた
デフォルトのデザインでも十分に使えるのですが、当ブログでは赤をメインにしているので、若干ですがカスタマイズしております。
記事のはじめに、サイトカードとブログカードのカスタマイズ参考例を載せておりますので確認をしておきましょう。
一応、コピペでも使えるようにプログラミングコードをのせておきます。
【サイトカード・ブログカードのカスタマイズコード】
ではこちらのプラグラミングコードを「追加CSS」に貼り付けていきましょう！
通常、スタイルシートを書き換えていくのですが、デザインが崩れてしまい取り返しがつかなくなってしまうこともあるので「追加CSS」にこちらのコードを貼り付ける方法をオススメします。
すでにやり方がわかる方は、ここは読み飛ばしていただいて問題ありません。
では「追加CSS」に貼り付ける方法について解説します。
①「外観」→「カスタマイズ」に進みます。
②「追加CSS」に進みます。
③CSSのプログラミングコードを貼り付けます。
最後に「公開」して完了です。今回は、サイトガード・ブログカードのCSSをカスタマイズをしてますが、基本的にCSSでカスタマイズする際は、「追加CSS」を活用していきましょう。
色など若干デザインを変更したい方のために
色など若干デザインを変更したい方もいるでしょう。そんな方の為に、コードをいじる場所をお伝えさせていただきます。
まず、こちらのプログラミングコードは23行で構成しています。
１行目〜11行目が、「サイトカード（内部記事リンク）」のプログラミングコードで、13行目〜23行目が「ブログカード（外部サイトリンク）」のプログミングコードにしています。
例えば、「サイトカード」の色を変更していきたい場合、下記画像の数字の箇所【#〜;】部分を書き換えていきます。
CSSのカラーコードは、原色大辞典をご参考にください。あくまもで、参考なので他のサイトからでも問題ありません。
上記の画像で、どのプラグミングコードを書き換えたら、どこが変更されるのか数字で表していますので、ご参考にください。
ちなみにブログカードも同じ容量で変更することができます。一旦、サイトカードとブログカードは、同じカスタマイズにしています。
カスタマイズが完了したら、忘れずに「公開」をしてくださいね。
さいごに
今回は、THE THOR（ザ・トール）でサイトカードとブログカードの使い方とカスタマイズについて解説させていただきました。
特に、「サイトカード」の機能は頻繁に使うので、必ず使い方は覚えておきましょう！
デフォルトのデザインでも十分に使えるので、カスタマイズに関しては余裕がある方だけで問題ないです。まずは記事を定期的に更新していくことが最も重要です。
お互いに頑張っていきましょう！
最後まで読んでいただきありがとうございました。