THORアフィリエイトASPツールブログブログ運営プロフィール※当ブログでは商品・サービスのリンク先にプロモーションを含みます。THOR」には、サイトカード・ブログカードと呼ばれる、カード型のリンク設置機能があります。THOR」を初めて利用される方は、設置方法が分からないという方もおられるでしょう。本記事では、サイトカードとブログカードの設置方法について、詳細に解説します。CSSのコピペだけで簡単にできる、サイトカード・ブログカードのカスタマイズ方法についてもご紹介します。手順通り行えば、プログラミングの知識なしでカスタマイズが可能なので、是非参考にしてくださいね。THOR」では、自身のサイト内へのリンクであるサイトカード、外部サイトへのリンクであるブログカードを標準機能で利用できます。設置例としては、下記のようになります。サイトカードブログカードそして、サイトカードとブログカードを設置する流れとしては、下記の通りです。設置手順ショートコードを挿入URLの入力サブタイトルの変更(サイトカードのみ)ターゲットの指定(サイトカードのみ)順番に詳細を見ていきましょう。THOR」のサイトカードとブログカードを利用するには、ショートコードの挿入が必要です。サイトカード(内部記事リンク)」をクリックします。それぞれ下記ショートコードを挿入されるのを確認しましょう。url=]URLの入力ショートコードの設置が完了すれば、リンク先のURLを入力します。「url=」以降に、下記赤字部分のようにリンク先のURLを貼り付けてください。url=https://fit-theme.com/the-thor/]URLをダブルクォーテーション「""」で囲む必要はありません。他のWordPressテーマを見てみると、内部リンクは記事のIDを指定するケースが多いです。THOR」はドメイン名含め、URL全体を貼り付ける必要があるので、ご注意ください。URLを入力した結果、サイトカードとブログカードが表示されれば設置完了です。サブタイトルの変更(サイトカードのみ)次に、サイトカードのサブタイトル変更方法について、解説します。サブタイトルとは、サイトカードの左上に初期状態で「関連記事」と表示される項目です。変更したい場合は、「subtitle=関連記事」の部分を変更しましょう。例として、下記は「関連記事」を「あわせて読みたい」と変更したものです。target=]こちらも、テキストをダブルクォーテーション「""」で囲む必要はありません。ターゲットの指定(サイトカードのみ)最後に、サイトカードのターゲット指定方法について、解説します。ターゲットとは、リンク先のURLをクリックした際、別タブでリンク先を開くかどうかの指定となります。下記はターゲットを指定した例と指定していない例です。ターゲット指定ありのリンクターゲット指定なしのリンク別タブで開くリンクと開かないリンクであることがお分かり頂けるでしょう。サイトカードのリンク先を別タブで開く場合は、ショートコードの「target=」の後ろに「_blanc」と入力してください。target=_blanc]入力後、サイトカードのリンク先が別タブで開かれるか、確認しましょう。ブログカードについてはターゲット指定がされているので、クリックすると全て別タブで開くようになっています。サイトカードとブログカードの設置方法の解説は以上です。THOR」の標準機能であるサイトカード・ブログカードですが、デザインが地味と思った方もおられるのではないでしょうか?残念ながら、サイトカード・ブログカードはWordPressのカスタマイザーで、デザインを変更することはできません。CSSを利用することで、カスタマイズが可能となっています。THOR」のサイトカード・ブログカードをカスタマイズする方法と、コピペでできるカスタマイズ例をいくつかご紹介します。カスタマイズ方法・例CSSでカスタマイズする方法カラーを変更ボーダーを変更シャドウを付けるCSSでカスタマイズする方法CSSでサイトカード・ブログカードをカスタマイズするにあたり、CSSをどこにコピペすればよいのか解説します。カスタマイズ」へ遷移します。WordPressのカスタマイザーが開くので、画面下の「追加CSS」をクリックします。追加CSSの画面から、以降ご紹介するCSSを入力していきましょう。最初にご紹介するカスタマイズは、サイトカード・ブログカードのカラーを変更する方法です。カラーカスタマイズ後のカードイメージから見てみましょう。カスタマイズした項目は、ボーダー・サブタイトル文字・サブタイトル背景のカラーです。こちらを利用する場合は、下記CSSコードをコピペしてください。*/}なお、赤字の部分がカラーとなるので、ご自身のサイトカラーに合わせて変更も可能です。次に、サイトカード・ブログカードのボーダーを変更するカスタマイズです。下記は、ボーダーを破線にした例となります。ボーダーを破線にしたい方は、下記CSSをご利用ください。*/}「dotted」の部分がボーダーの種類となります。点線にしたい場合は「dotted」を指定しましょう。CSSには、他にも様々なボーダーの種類があるので、一度調べてみてくださいね。シャドウを付ける最後に、サイトカード・ブログカードにシャドウを付け、おしゃれなデザインにするカスタマイズです。サイトカード・ブログカードにシャドウを付けた例は下記の通りです。シャドウを付けたい方は、下記CSSをご利用ください。*/}CSSを利用したサイトカード・ブログカードのカスタマイズは以上となります。THOR」のサイトカード・ブログカード以外の機能詳細も知りたい方は、下記マニュアルで解説しています。THOR(ザ・トール)の使い方・カスタマイズ操作マニュアル【完全版】よろしければご覧くださいね。THOR」に標準機能で備わっているサイトカード・ブログカードの設置方法、カスタマイズ方法についてご紹介しました。他のWordPressテーマにもカード型のリンクを設置できる機能はありますが、ブログカードのような外部リンクへのカードを設置できるテーマは非常に少ないです。THOR」の大きなメリットの1つと言えるでしょう。WordPressのカスタマイザー画面からデザインの変更はできませんが、CSSを利用すればカスタマイズは可能です。本記事の内容を参考に、ご自身に合ったサイトカード・ブログカードへ仕上げてみてくださいね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。THOR」は多機能すぎて、何から設定すればいいのか分からない。目的の機能があるメニューを見つけられない。上記のような悩みを解消できる記事となっています。THOR」のメインビジュアルの設定方法が分からない。上記のような疑問を解決できる記事です。上記のような悩みにお答えします。THOR」と「Diver」どちらを購入しようか迷っている。THOR」にランキングを設置したいけど、どこから設定すればよいのか分からない。上記のような悩みをお持ちの方向けの記事です。