編集

Blogger『Contempo』古い情報メモ

2022/04/26 ｜2022/05/03

古い情報です。調べ直すと新しく更新されていたので役立たないかもなのです。

なので、これは個人的なメモです。

*ツイッターカード

これがガラリと変わってるらしい。簡単な設定で設定できる。となってましたが、古いまま設定しています。

新しいテンプレートでは最初から組み込まれている部分もあるらしいので、全ての要素を書く必要はないようです。

参考サイト：BloggerにTwitter Cardsを設定する方法

テーマ→HTMLの設定から　</head>　の手前に

<meta content='summary_large_image' name='twitter:card'/>
<meta content='@ついったーID' name='twitter:site'/>
<meta content='@ついったーID' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content=画像URL' name='twitter:image'/>
<meta content='画像URL' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>

青色部分はカードの種類。「summary」か「summary_large_image」で設定します。

紫色部分はフェイスブックなどTwitter以外用につけているので、要らない人は外してもいいと思います。

*ブログカード

この設定は新しいバージョンでは一切、反映されませんでした。古いバージョンで使う事で元の通り反映させたので、新しいテンプレートでは役立たない情報です。

ブログカードはそこまで必要とも思えないので、拘らなくてもいいのかもしれない。

画像の関係で使えるのは『自分のブログ内リンク』だけ、その他へのリンクは普通にリンクを這った方が無難です。

「ShareHtmlを、もっと綺麗にしたメーカー」を使って、ブログカードの設定。

ブログカードとはこんな感じのもの

テーマ→カスタマイズ→詳細設定→CSSを追加。

もしくはテーマ→HTMLの編集→『　]]></b:skin>　』の前に置く。

/*-----リンクカード----*/
.link-box {
border:1px solid #ffcc00;
padding:10px;
display:flex;
margin:10px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
}
.link-box:hover {
background-color:#f3f3f3;
-webkit-transition:background-color .35s;
transition:background-color .35s;
}
.img-box {
width:35%;
float:left;
}
.img-box div {
min-height:150px;
background-size:cover;
background-position:center center;
}
.text-box {
width:65%;
float:left;
padding-left:20px;
line-height:1.7;
margin:0;
}
.text-box .title a{
font-size:18px;
font-weight:600;
color:#428bca;
padding:0;
margin:0;
}
.text-box .description a{
font-size:15px;
color:#777777;
padding:0;
margin:0;
}

@media only screen and (max-width:767px) {
.img-box div {
min-height:80px;
}
.text-box {
margin-left:2px;
line-height:1.5;
}
.text-box .title {
font-size:11px;
margin:0;
}
.text-box .description {
font-size:9px;
margin-top:5px;
}
}