【THE THOR】サイトカード・ブログカードの使い方|カスタマイズも紹介

知りたい人
記事の途中でよく見る
「あわせて読みたい」みたいなやつ。
わたしも作りたいです!

今回は、サイトカードとブログカードの使い方について解説します。

THE THORには「サイトカード」(内部リンク用)と、「ブログカード」(外部リンク用)という読者をブログ内の記事から他の記事へと誘導するための便利な機能が備わっています。

さらに本記事では、ディフォルトのデザインは少し地味なので、あなたのサイトに合った仕様にするカスタマイズする方法も併せて紹介します。

 
つるさん
コピペで変更できるように
しているので誰でもカンタン
にできますよ!

見た目にも良く、読者の方がスムーズにブログ内を行き来できるようにしてあげることで滞在時間も長くなります。

結果、読者満足度を高めることになりますので、上手く使いこなしましょう!

それではさっそく本編スタートです( ´∀` )

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

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

THE THOR(ザ・トール)にはプラグインが無くても「サイトカード」や「ブログカード」を設置する機能が標準装備されています。

例を載せておきます。

サイトカード

サイトカード

ブログカード

ブログカード

文中に出てくる「関連記事」とか「あわせて読みたい」など、記事上に表示された画像やタイトルをクリックするとリンク先のURLへ飛んでくれる機能です。

さっそく使い方を解説していきます。

ブロックを追加して「クラシック」を選択


【ショートコード】➡【ブログカードorサイトカード】を選択

【ショートコード】➡【ブログカードorサイトカード】を選択

  1. 【ブログカード(外部サイトリンク)のコード】

    blogcard url=

  2. 【サイトカード(内部サイトリンク)のコード】

    sitecard subtitle=関連記事 url= target=



ブログカードについては、 url= の後ろにリンク先のURLを入力すればOKです。

(例)blogcard url=https://www.google.co.jp



サイトカードはサブタイトルが「関連記事」で設定されています。
なので、何も変更しなければサイトカードの左上に「関連記事」と表示されます。

関連記事

サブタイトルを変更したい場合は、「関連記事」の部分を「あわせて読みたい」といった具合に新しく入力しましょう。

そうすれば、カンタンに書き換えが可能です。

サブタイトルを変更したい場合は、「関連記事」の部分を「あわせて読みたい」といった具合に新しく入力

✅target= の後ろには、「blank」を入力するかどうか決めます。

  • 「blank」を入力➡今、見ているページはそのままで新しいタブを開いて表示する。
  • 何も入力しない➡今、見ているページが切り替わって表示される。


「blank」を入力したサイトカードを設定した例です。
一度、下の内部リンクをクリックして確認してみてください。

試してみてね!

WordPressでブログを運営を始めたなら、テーマ導入も必須です。 自分でコードを書いたりできる方は別ですが、それ以外の方というか、 僕の記事でブログを始めた方なら、ついでにテーマも導入しましょう。 まだWordPre[…]



前ページとリンク先のページが両方開いた状態で見た方が良いこともあります。

 
つるさん
2つとも表示させるかは
戦略を考えた上で決定
するのが良いですね♪

サイトカードをCSSでカスタマイズする方法【コピペで簡単】

サイトカードをCSSでカスタマイズする方法

ここからは、CSSを使ったカスタマイズを紹介します。

ディフォルトのままでも十分に使えるのですが、みなさんのブログにもメインカラーがあって、それをサイトカードにも採用させたい人もいると思います。

これからカスタマイズの参考例を載せます。すべてコピペで簡単にマネできますので、気になる人は最後までお付き合いください( ´∀` )

ダッシュボードメニューから
【カスタマイズ】➡【追加CSS】をクリックしてコードを書き込める準備をお願いします。

追加CSS

「追加CSS」を使う理由は、確認しながら作業を進めることができるからです。

ということで、プレビュー画面を見ながらあなたにとってベストなカードを作成してくださいね!

サイトカードの色をカスタマイズする方法

まずは、サイトカードの色をカスタマイズする方法です。

以下のCSSコードをコピペしてください。

/*サイトカード(内部記事リンク)カスタマイズ*/
.content .sitecard {
border: 2px solid #1a4bd2;
}.content .sitecard__subtitle{
background-color: #1a4bd2;
color: #ffffff;
}



すると、このように表示されます。

変更後


変更点は5点です。

  1. 枠線の太さ
  2. 枠線の種類
  3. 枠線の色
  4. サブタイトルの背景色
  5. サブタイトルの文字色

CSSコードのどの部分でカスタマイズできるのか載せておきます。


③から⑤のカラーコードについては、下記のサイトを参照してください。

原色大辞典

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

サイトカードの抜粋文を表示させない方法

続いて、サイトカードのタイトル下に書かれた抜粋文を表示させない方法をご紹介します。

途中で見切れた抜粋文を表示させないことで、かなりシンプルなサイトカードになります。CSSコードをコピペしてください。

/*サイトカード:抜粋文を消す*/
.content .sitecard__contents .phrase {
display: none;
}



すると、抜粋文が消えました。

抜粋文を消す

サイトカードの画像の大きさをカスタマイズする方法

抜粋文を消すと、気になるのが画像のサイズです。

ディフォルトではアイキャッチ画像が正方形なので、僕のように文字が見切れて読めなくなってしまっています。

これを解消し、サイトカード内にキレイに収まるCSSコードは下記。

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



すると、アイキャッチ画像がすべて収まるサイトカードができました!

画像サイズ変更

※ブログカード(外部リンク)も同じコードです。
sitecard の部分を blogcard に変えるだけ。コピペして書き換えてください。


サイトカードのカスタマイズ【まとめ】

ここまで、

  • サイトカードの色
  • サイトカードの抜粋文の消去
  • サイトカードの画像のサイズ変更

について個別に解説してきました。
必要な部分だけコピペして、あなた好みのサイトカードを作ってください。

中には「僕とまったく同じ仕様で良い」という人もいるかもです。

その場合は、以下のCSSコードをコピペすれば今回紹介したすべてのカスタマイズが可能です。

/*サイトカード(内部記事リンク)カスタマイズ*/
.content .sitecard {
border: 2px solid #1a4bd2;
}.content .sitecard__subtitle{
background-color: #1a4bd2;
color: #ffffff;
}

/*サイトカード:抜粋文を消す*/
.content .sitecard__contents .phrase {
display: none;
}

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

【THE THOR】サイトカード・ブログカードの使い方|カスタマイズも紹介【まとめ】

【THE THOR】サイトカード・ブログカードの使い方|カスタマイズも紹介【まとめ】

今回は、THE THOR(ザ・トール)に標準装備された「ブログカード」と「サイトカード」の使い方から、CSSでカスタマイズする方法まで解説してきました。

特にサイトカードはよく使うので、覚えておくと便利です。

また、少しだけ見た目にもこだわると、読者からも見やすさや操作性が向上します。

今はCSSコードをそのままコピペして使っていただきましたが、プログラミングの知識が少しでもあるとより理解度が深まります。

しかも、この記事で紹介したCSSコードであれば無料で学習できます。
興味があれば下記の記事をご覧ください。

関連記事

プログラムの勉強に限らず、何か新しいことを始めるのに いきなり高額な出費からスタートするのは厳しくないですか? それが将来に大きなリターンになるかもしれないと分かっていても、 まずは無料でどんなものか試してみたいですよね[…]


この記事が少しでも役に立ったと感じたらシェアしてもらえると嬉しいです。

WordPressテーマ『THE THOR』
圧倒的にSEOに強く・抜群に上位表示されやすい究極のSEO最適化テーマ『THE THOR(ザ・トール)』であなたもインターネットビジネスを本格的に始めてみませんか?