ここあです。
THE THORには「サイトカード」（内部リンク用）という
読者をブログ内の記事から他の記事へと誘導するための
便利な機能が標準で備わっています。
ただ、私はサイトカードの機能を有効活用するため
トップページでも使用しているのですが、
デフォルトのデザインだけで使用すると、
サイトカードを1つ表示させるだけで、こんな感じになるんですね＾＾；
もちろんサイトカードは
記事内に１つだけ表示させる分には全然良いのですが、
私のようにサイトカードやブログカードを無理矢理
数を並べて使おうとすると（笑）
もう少し「サイトカードをシンプルにしたい！」
どうしてもそんな欲が出てきてしまいます。
なので、そんなサイトカードを
「極限までシンプルにしたデザイン」が今の状態。
↓サイトカードのカスタマイズ後
サイトカードもきちんとカスタマイズすれば
見た目もスッキリしてとても美しくなります。
おかげで使い勝手もすごく良いです。
ということで、今回はTHE THORのサイトカードを
「段階的に」カスタマイズする方法について
解説させていただきますので
THE THORのサイトカードに関して不満があるあなたは
私の記事をぜひ参考にしていただき、
あなたのサイトに一番しっくりくる状態まで
ぜひカスタマイズしてみてくださいね。
THE THORのサイトカードを表示させる方法
まずはお約束、THE THORの標準機能でもある
「サイトカードの表示方法」から念のためお伝えさせていただきます。
なので、すでに「サイトカード」の使い方が分かっている
あなたは読み飛ばしてくださいね。
THE THORにはショートコードという機能があるのですが
サイトカードはそこから選択し、表示させることが可能です。
ショートコードから「サイトカード（内部記事リンク）」を選択すると
このような［sitecard subtitle=関連記事 url= target=］
テキストコードが表示されます。
テキストコードはそれぞれ
- sitecard subtitle：サイトカードのサブタイトル
- url：リンク先のURL
- target：ページ移動
これらを意味しています。
なので、デフォルト設定ではサブタイトルが
「sitecard subtitle = 関連記事」となっているため
何も変更しなければ、サイトカードは「関連記事」と表示されます。
ということで、もしもサブタイトルを変更したい場合は
「sitecard subtitle = 関連記事」の部分を
「sitecard subtitle = おすすめ記事」などと
再入力して表示させたい言葉に変更してくださいね。
そうすると、サブタイトルの表示が以下のように変わりますので。
「url=」に関しては、あなたが内部リンクで他に読んでもらいたい
記事のURLを入れてください。
例えば、こんな感じでリンク先のURLを丸ごと入れましょう。
「url = https://affirepo.com/kingdom-media/」
「target =」は記事のページ移動です。
例えば、そのまま空欄にしていれば、サイトカードをクリックした時点で
今、見ているページが切り替わります。
そして、「target = blank」とblankを入力すれば、
今、見ているページはそのままに新しいリンク先のページが開き、
リンク前の記事、リンク先の記事が「両方とも開いた状態」で
読者の方に見てもらうことができます。
この「target =」に関して私がおすすめする使い方は
アフィリエイトに関する紹介記事など、読者さんに対して
- 前のページには戻らず次のページを集中して見て欲しい！
- 他のページは絶対に見て欲しくない！
こんな時には
何も入力をせずにそのまま完全にページを移動させます。
逆にリンク前のページも見ないと
- 「読者さんが分かりにくい！」
- 「リンク前のページも併せて一緒に見て欲しい！」
そう思う場合は
「target = blank」とblankを入力し、
別ページとしてリンク先ページが開くようにし、
きちんと2ページとも見てもらえるようにしています。
ということで、「target =」に関しては、
何となく移動させるのではなくきちんと戦略を考えた上で、
空欄にするのか「blank」を入力するのかを決めるようにしてくださいね。
念のため注意点としてお伝えさせていただきますが、
この［sitecard subtitle=関連記事 url= target=］ショートコードは、
あくまでも［ ］内でのみ適用されます。
ですから、ショートコードに入力する際には必ず、追加するテキストが
［sitecard subtitle=関連記事 url=https://affirepo.com/kingdom-media/ target=blank］
上記のように必ず［ ］内に収まるよう入力してください。
THE THORをCSSでカスタマイズする方法
THE THORのサイトカードカスタマイズは
CSSを使って行います。
なので、サイトカードをCSSでカスタマイズする場合は
ダッシュボードメニューから、
外観 → カスタマイズ → 追加CSSをクリックし
以下の部分に私がお伝えするCSSコードをコピペしながら
調整するようにしてくださいね。
上記「追加CSS」にコードをコピペしながら作業するメリットは
実際にプレビュー画面を見ながら設定できますので
すごく分かりやすいということです。
ということで、ぜひプレビュー画面を見ながら
あなたが「ベストだ！」と思うサイトカードを作ってください＾＾
THE THORのサイトカードをカスタマイズする方法
それではTHE THORのサイトカードをカスタマイズ する方法について
順番に解説していきます。
今回、段階的にとお伝えしたのは、デフォルトのデザインから
少しずつデザインが変わっていくからです。
ということで、あなたにベストなデザインを探してください＾＾
サイトカードの色を変える方法
それではまずシンプルにサイトカードの色を変更する方法です。
サイトカードの色を変更する場合は以下のCSSコードをコピペしましょう。
- 追加CSSにコピペ
- .content .sitecard {
border: 1px solid #e8efff;
}.content .sitecard__subtitle{
background-color: #e8efff;
color: #555;
}
そうするとこのように、サブタイトルの色と罫線の色が変わります。
なので、サブタイトルの背景色を変更したい場合は、以下のコード
background-color: #e8efff;の「 #e8efff」のカラーコードを
あなたの好きな色に変更してください。
また、罫線の色を変更する場合は、以下、
border: 1px solid #e8efff;の「 #e8efff」のカラーコードを
あなたの好きな色に変更すればOKです。
また、border: 1px solid #e8efff;の「1px」を、
2pxや3pxにすることで罫線の太さを変えられますし、
border: 1px solid #e8efff;の「solid」を
「dotted」に変えることで、点線にできます。
※サンプルは見やすくするため点線の色を黒に変更しています。
サイトカードの抜粋文を無くす方法
続いて、「サイトカードの抜粋文がいらない！」というあなたは
以下のコードでサクっと消しちゃいましょう！＾＾
- 追加CSSにコピペ
- .content .sitecard__contents .phrase {
display: none;
}
上記コードをコピペすると、
サイトカードに表示されていた抜粋文が消えてなくなり
以下のようになります。
サイトカードの画像を小さくする方法
サイトカードの抜粋文を消して見えなくすると、
次に気になるのが「画像サイズ」。
なので、もう少しサイトカードの枠内に綺麗に収まるよう
画像サイズも調整しましょう。
以下のCSSコードをコピペすれば、綺麗にサイトカードに収まります。
- 追加CSSにコピペ
- .eyecatch .eyecatch__link img {
object-fit: contain;
}.eyecatch-11::before {
padding-top: 55%;
}
かなりシンプルでコンパクトにまとまったサイトカードになりました。
サブタイトルのデザインを変える方法
正直、サイトカードはここまでカスタマイズできれば十分なんですが、
もうワンランク上のデザインに変更したいというあなたは
以下のCSSコードをコピペしましょう。
- 追加CSSにコピペ
- .content .sitecard {
position: relative;
overflow: initial;
border: 1px solid #e8efff;
}.content .sitecard__subtitle{
position: absolute;
font-size: 0.8em;
padding: 0 0.5em;
background-color: white;
transform: translateY(-50%) translateX(1em);
color:#548dff;
}.content .sitecard__contents {
margin-top: 0rem;
margin-bottom: 0rem;
}.content .sitecard .eyecatch {
margin-top: 0rem;
margin-bottom: 0rem;
}
そうすると、サイトコードのサブタイトルが私と同じように
もう少しだけスッキリとさせることができます。
なお、上記サブタイトルの色を変えたい場合は
color:#548dff; ←サブタイトルの色はここで変更
}
囲み罫の色を変更したい場合は、
border: 1px solid #e8efff;←囲み罫の色はここで変更
}
上記、2箇所のカラーコードを
あなたの好きな色のカラーコードに変更してくださいね。
罫線の太さを変える方法はもう分かると思いますので、
あえてお伝えはしませんよ（笑）
サイトカードの背景色をホバーさせる方法
最後にサイトカードの背景色をホバーさせる方法についても
簡単に解説させていただきます。
ホバーさせるというのは簡単に言うと、
あなたがサイトカードにマウスのポインタを乗せた時に
今、ここのサイトカードを選んでますよと
視覚的に分からせるということです。
実際、私のサイトカードの上にマウスを乗せてもらえば分かりますが
マウスを乗せた瞬間、背景色が以下のように変わります。
このマウスを乗せた時に、色が瞬間的に変わる方法を
今回、最後におまけとしてお伝えさせていただきます。
サイトカードの背景色をマウスホバーで変更したい場合は
以下のCSSコードをコピペしてください。
- 追加CSSにコピペ
- .content .sitecard:hover {
background-color:#f3f7ff;
}
そうすると、あなたのサイトカードにマウスを乗せた瞬間
サイトカードの背景色が変わります。
なお、ホバー時の背景色を変える場合は、
CSSコード内にあるbackground-color:#f3f7ff;カラーコード
「#f3f7ff」の色をあなたの好きな色に変えてください。
サイトカードのフォントに関しては人ぞれぞれ設定が異なりますので
今回は外部の形状に関するカスタマイズ方法のみ
お伝えさせていただきましたので、予めご了承ください。
全てのCSSコードをまとめたいあなたへ
ここまでサイトカードのカスタマイズを
分かりやすくするため個別にお伝えしてきましたが
あなたはマウスホバーまでのカスタマイズを
全て一気にやりたいと思うかもしれません。
そんな場合は、以下のCSSコードをコピーしていただければ
マウスホバーまでのカスタマイズが全てできます。
- 追加CSSにコピペ
- object-fit: contain;
}.content .sitecard {
position: relative;
overflow: initial;
border: 1px solid #e8efff;
}.content .sitecard__subtitle{
position: absolute;
font-size: 0.8em;
padding: 0 0.5em;
background-color: white;
transform: translateY(-50%) translateX(1em);
color:#548dff;
}.content .sitecard__contents {
margin-top: 0rem;
margin-bottom: 0rem;
}.content .sitecard .eyecatch {
margin-top: 0rem;
margin-bottom: 0rem;
}.content .sitecard:hover {
background-color:#f3f7ff;
}
ですので、私と全く同じサイトカードにしたいというあなたは
上記コードをコピペしてくださいね。
※フォントの設定までは入れてませんので、あらかじめご了承ください。
ただし、色の変更方法などはこれまでに解説してきた
個別の設定方法を参考にカスタマイズしてください。
THE THORのサイトカードをカスタマイズする方法まとめ
今回は、THE THORに実装されている標準機能、
内部リンク用の「サイトカード」に関する
カスタマイズ方法について解説させていただきました。
とは言え、サイトカードに限らず
デザインで最も重要なのは「見やすさ」と「使いやすさ」。
なので、今回は、できるだけネットユーザーに見やすくなるよう
極限までシンプルにする方法をご紹介しました。
そもそもデザインというのはただ「自分さえ良ければいい」という
自己満足なモノであってはいけません。
特にブログの場合は、自分が書いた記事を不特定多数の人
言い換えるなら世界中の他人に読んでもらうわけですから、
自分以外の人が読みやすく分かりやすいかということに
きちんと配慮する必要があります。
もちろん、デザインで自分の個性や世界観を見せるというのも大事ですが
ただ、ブログでビジネスをしようと考えるのであれば
いくら個性が大事とは言え、アーティスティックで分かりにくいサイトよりも
シンプルで分かりやすいサイトの方がよっぽど親切だし喜ばれます。
ですから、ブログデザインにしても記事にしても
あなたが誰のためにブログを運営して、誰のために記事を書いているのか
そして誰のためにデザインするのか
それらをきちんと考えた上で、
記事を書いたりデザインするようにしてくださいね。
そもそもデザインというのは、アートではありませんし
アートであってはダメなんです。
デザインはあくまでも多くの人に機能的に、そして
分かりやすく快適に見てもらうためにするものです。
だから、逆に言うとデザインのせいで
「見にくい、読みにくい、分かりにくい」となっていたら
それは「デザイン本来の役目を果たしていない」ということになります。
そういう意味で、あなたがこれからブログのデザインをする時にも
自分がどう思うかではなく「他人がどう思うか」をしっかりと考えながら
「見やすく分かりやすいブログデザイン」を意識して運営していただけたらと思います。
ということで、
最後までお読みいただきありがとうございました。
