THE THOR（ザ・トール）のサイトカード、ブログカード設定

THE THORでブログカードを使い場合は、THORのショートコードを使います。

ブログカード（外部サイトへのリンク）

１．ショートコードを貼り付ける

群馬県の温泉宿めぐり

群馬県の温泉宿めぐり

全国有数の温泉県・群馬県の温泉めぐりを楽しんでます！実体験の情報を発信しています！…

２．外部サイトのURLを設定する

外部サイトのURLを入れるところは、下記です。

url=外部サイトのURL

サイトカード（内部記事リンク）

１．ショートコードを貼り付ける

２．内部記事のURLを設定する

外部サイトのURLを入れるところは、下記です。

３．新規ウィンドウで表示する場合

新規ウィンドウで開きたい場合、URLの後ろに　「target=blank」を追加します。

ブログカードの場合もこれでOKです。

表示がカード形式にならない場合

上記設定をしてもカード形式にならない場合は、「-」の後ろに半角スペースを追加します。

これでカード形式に表示される筈です。

ブログカード、サイトカードの表示形式をカスタマイズ

THE THORのカード形式は非常にシンプルです。そして画像は右側です。

この形式をもっとカッコ良くするには、下記のCSSを追加CSSに貼り付けます。

外観　>　カスタマイズ　>　追加CSS　への貼付けがうまくいかないときは、

外観　>　テーマファイルエディタ　style-user.css へ貼り付けてください。

/* --------- サイトカードのカスタマイズ --------- */
.content .sitecard{
position:relative;
}
.content .sitecard__contents .heading ::after{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: transparent;
}

/* --------- サイトカード設定 --------- */
.content .sitecard .heading a{
color:#555;
margin-left:10px;
margin-right:10px;
}
.content .sitecard .heading a:hover{
text-decoration:none;
}
.content .sitecard__contents .phrase{
display: none;
}
.content .sitecard
.eyecatch .eyecatch__link img {
object-fit: contain;
border:none;
}
.eyecatch-11::before {
padding-top: 55%;
}
.content .sitecard {
background-color:#fff;
position: relative;
padding-bottom:15px;
padding-right:10px;
padding-top:15px;
overflow: initial;
border-radius: 0px;
border:solid 3px #e5e5e5;
transition-duration:0.5s;
}
.content .sitecard:hover{
transition-duration:0.5s;
background:#F2F0E9;
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px);
 box-shadow: 5px 5px 13px 2px rgb(0 0 0 / 10%);
}
.content .sitecard__subtitle{
position: absolute;
font-size: 1.3rem;
padding: 0 0.5em;
background-color:#b2384e;
transform: translateY(-50%) translateX(2.3rem);
color:#fff;
letter-spacing:.1em;
border-radius: 0px ;
}
.content .sitecard__contents {
float:right;
width:70%;
margin-top:10px;
margin-bottom: 10px;
}
.content .sitecard .eyecatch {
float:left;
width: calc(30% - 10px);
margin-left: 5px;
margin-top: 1rem;
}
@media only screen and (min-width: 780px){
.content .sitecard__contents:after{
content:"クリックして読む";
font-size:11px;
color:#fff;
font-weight:bold;
background:#83ccd2;
padding:5px 10px;
text-align: center;
border-radius:5px;
width:30%;
margin-top:10px;
margin-left:10px;
position:absolute;
right:15px;
bottom:15px;
transition:.6s;
}
.content .sitecard__contents:hover:after{
background:#fcd69e;
color:#fff;
transition:.6s;
}
}
@media only screen and (max-width: 480px){
.content .sitecard .heading a{
font-size: 14px;
margin-right:-5px;
margin-left:-5px;
}
.content .sitecard .eyecatch {
width: calc(45% - 10px);
margin-left: -10px;
margin-top:10px;
}
.content .sitecard__contents {
width:100%;
margin-top:5px;
margin-bottom: 0px;
}
.content .sitecard__subtitle{
background-color: #f89174;
transform: translateY(-50%) translateX(0.7em);
font-size: 1.2rem;
}
.content .sitecard{
position:relative;
}
}