簡単に設置できるブログカード「ShareHtmlを、もっと綺麗にしたメーカー」の導入方法
ブログの内部リンクを下記のようなカード風のリンク（ブログカード）の設置方法を説明致します。とくに目立たせたい場合に使用するとわかりやすいですよね。
使い方
① 上記「ShareHtmlを、もっと綺麗にしたメーカー」よりリンクURLを入力して下さい。
② プレビューとHTMLコードを確認します。
③ #HTMLコードをコピーして任意の記事HTML内に貼り付けます。
※このままではデザインが反映されません。
「CSS」の内容を自分のブログに登録する必要があります。
一度CSSをと登録してしまえば、以降はHTMLを貼り付けるだけです。
また、ツールで生成されるCSSコードに誤りがあるそうなので、公式から配布されている下記CSSコードを各ブログに貼りましょう。
/*-----ブログカード用 New Share HTML----*/
/*-----ブログカードNew Share HTML----*/
.link-box {
border:1px solid #e1e1e1;
padding:10px;
display:flex;
margin:30px;
}
.link-box:hover {
background-color:#f3f3f3;
-webkit-transition:background-color .35s;
transition:background-color .35s;
}
.img-box {
width:25%;
float:left;
}
.img-box div {
min-height:120px;
background-size:cover;
background-position:center center;
}
.text-box {
width:75%;
float:left;
padding-left:20px;
line-height:1.7;
margin:0;
}
.text-box .title {
font-size:18px;
font-weight:600;
color:#428bca;
padding:0;
margin:0;
}
.text-box .description {
font-size:15px;
color:#333;
padding:0;
margin:0;
}
.link-box{
margin: 20px;
}
@media only screen and (min-width:320px) and (max-width:479px) {
.img-box div {
min-height:80px;
background-position: right 53% bottom 35%;
}
.text-box {
margin-left:10px;
line-height:1.5;
padding:3px;
}
.text-box .title {
font-size:13px;
margin:0;
}
.text-box .description {
font-size:11px;
margin-top:5px;
}
.link-box{
margin: 0px;
margin-top: 0px;
}}
/*new Share HTML----*/ブログカード貼り付けの注意点
こちらは内部リンク専用として活用しましょう。
画像が表示されるので著作権の問題から、外部リンクを貼るのは控えた方が良いです。もしも載せたい場合、リンク先へ画像の表示が可能か確認して下さい。
