THE THOR サイトカードを作る

WordPressの道

WordPressの道

スクリーンショット 2023-10-06 6.12.45.png

THE THORでショートコードという機能を使って内部記事リンクを作成してみます。標準で使えるのですから役立てましょう。サイトカードはそこから選択し、表示させることが出来ます。他のテーマでも標準機能で付いていると思うのですが、無ければプラグイン導入すれば同じ事が出来るでしょう。

1 内部記事リンクを作成
2 おわりに

内部記事リンクを作成

記事中表示したい箇所にポインターを表示させます。

サイト_01.png

ショートコードから「サイトカード（内部記事リンク）」を選択するとこのような［sitecard subtitle=関連記事 url= target=］テキストコードが表示されます。

テキストコードはそれぞれ
　sitecard subtitle：サイトカードのサブタイトル
　url：リンク先のURL
　target：ページ移動
これらを意味しています。

デフォルト設定ではサブタイトルが「sitecard subtitle = 関連記事」となっているため何も変更しなければ、サイトカードは「関連記事」と表示されます。
もしもサブタイトルを変更したい場合は「sitecard subtitle = 関連記事」の部分を「sitecard subtitle = おすすめ記事」などと再入力して表示させたい言葉に変更出来ます。

「url=」に関しては、あなたが内部リンクで他に読んでもらいたい記事のURLを入れます。
「url = https://hasegawa-blog.com/onnsen-gourmet01/」
「target =」は記事のページ移動です。
そして、「target = blank」とblankを入力すれば、リンク先の記事が「両方とも開いた状態」で読者の方に見てもらうことができます。
そのまま空欄にしていれば、サイトカードをクリックした時点で今、見ているページが切り替わります。
［sitecard subtitle=関連記事 url= https://hasegawa-blog.com/onnsen-gourmet01/ target=blank］
上記のように必ず［　　］内に収まるよう入力してください。また urlは前後に半角スペースを入れます。

これでデフォルトのサイトカードは出来上がりました。

THE THORのサイトカードをカスタマイズ

デフォルト（カスタマイズ）前
カスタマイズ後でしたので他の方のサイトカードを拝借しました。
サイトカード2.png

もうちょっと体裁よく、カスタマイズしていきます。

完成形
サイトカード.png

アイキャッチを左側に長方形で表示させ、右側には記事のタイトルのみ表示させます。抜粋文はいらないので表示させませんでした。
また、サイトカードには影をつけています。そして、カーソルが上に乗った時には、影をなくして少し透明にしています。このようなサイトカードをカスタマイズで作成していきます。
マウスホバーまでのカスタマイズをしてみました。

THE THORをCSSでカスタマイズする方法

見本は既にペーストされている状態です。

スクリーンショット 2023-07-12 14.27.48のコピー.png

コピー＆ペーストが終わりましたら、上段「公開」を選択して終了です。

前述の見本のカスタマイズです。

サイトカードをCSSでカスタマイズする場合はダッシュボードメニューから、外観 → カスタマイズ → 追加CSSをクリックし、以下の追加するCSSをコピー＆ペーストします。

追加するCSS

追加CSSに以下のCSSを貼り付けてください。

外観 > カスタマイズ > 追加CSS

/*--------------------------------------- 
 * サイトカードカスタマイズ 
 * ---------------------------------------*/
.content .sitecard__contents .phrase {
	display: none;
}	  
.eyecatch .eyecatch__link img {
	object-fit: contain;
}
.eyecatch-11::before {
	padding-top: 55%;
}
.content .sitecard {
	position: relative;
	overflow: initial;
	border: 1px solid #e1e1e1;
	box-shadow: 2px 2px #ddd;
	display: block;
	width: 100%;
	margin-top:3rem;
}
.content .sitecard__subtitle{
	position: absolute;
	display: block;
	font-size: 1.2rem;
	padding: 2px 15px;
	background-color: #04384c;
	border: solid 1px #04384c;
	color:#fff;
	top: -15px;
	left: 20px;
	border-radius: 3px 3px 3px 3px;
}
.content .sitecard__subtitle::before {
	font-weight: 900;
	color: #fff;
	transform: scale(.8);
	margin-right: .2em;
}
.content .sitecard__contents {
	float:right;
	width:70%;
	margin-top: 2rem;
}
.content .sitecard .eyecatch {
	float:left;
	width: calc(30% - 10px);
	margin-left: .1rem;
	margin-top: 2.5rem;
}
.content .heading a, .content .sitemap li a {
	color: #555;
	font-weight: 400;
	font-size:16px;
	padding-bottom: 10px;
}
.content .sitecard:hover{
	box-shadow: none;
	opacity: .8;
}
/*
 * 幅640px以下
 * ---------------------------------------*/
@media only screen and (max-width: 640px){
	.content .heading a, .content .sitemap li a {
		font-size: 11px;
	}
	.content .sitecard__subtitle{
		font-size: 1rem;
		padding: 2.5px 8px;
		top: -15px;
		left: 10px;
	}
	.content .heading a, .content .sitemap li a {
	padding-bottom: 1px;
	}
}

おわりに

CSSを貼り付けるとサイトカードのデザインが完成形と同じになったと思います。
先駆者の先輩方が使っているので、参考にしながら試行錯誤しました。良いブログの参考になればと思います。
是非ご活用ください。

最新情報をチェックしよう！

フォローする