【ﾏﾅﾌﾞﾛｸﾞｺﾋﾟｰ】ﾘﾝｸｶｰﾄﾞの設定&貼る方法【ﾌﾞﾛｸﾞｶｰﾄﾞ】
おめでとうございます。この記事にたどり着いたということはもう既に問題が解決したも同然。後は下まで読み進めてゆくだけですね。おめでとうございます。
さて、この記事では、Wordpress有料ﾃｰﾏ『Manablog Copy（ﾏﾅﾌﾞﾛｸﾞｺﾋﾟｰ）』で、ﾌﾞﾛｸﾞ記事内にﾘﾝｸｶｰﾄﾞ（またの名をﾌﾞﾛｸﾞｶｰﾄﾞ）を貼る方法について解説しています。
複雑なカスタマイズ、プログラミング……不要。
なぜなら———
だれでも簡単にリンクカード（ブログカード）を設置できる、神ツールが存在するから。
ツールの使い方からブログへの設置方法まで、この記事を見ながら一緒にやっていきましょう。
MOKUJI.
リンクカードは、コピペで作れる。
おそらく———このような現象に陥っていませんか。
「ブログ記事の『編集画面』では、（リンクカードが）ちゃんと表示されてる」
「でも（プレビューや本番URLで）実際に確認すると表示されてない……」
と———こんなふうに、うまく表示されず、引用みたいなテキストリンクが表示されてしまう。
「こんな時、どうすればリンクカードを表示させることができるのか？」
結論：リンクカードをコピペで作って貼り付ければいい。
『ShareHtmlを、もっと綺麗にしたメーカー』という神ツールを使えばいい。
『manablog』運営者であるマナブ氏が作り上げた『ShareHtmlを、もっと綺麗にしたメーカー』を使えば、ほぼ一瞬で目的達成できます。
ほぼ一瞬で、しかも無料で、リンクカードが出来上がります。
『ShareHtmlを、もっと綺麗にしたメーカー』の使い方。
まずは———リンクカードを一瞬で作れる神ツールが置いてあるサイトへ行こう。以下のリンクから行けます。
行くと、こんなページになってる。
じゃあ———早速つかってみる。
とても簡単です。
「ここにURLを入力するだけ～～～～」のとこにURLを入力するだけ。
すると———「プレビュー」「HTMLコード」「CSSコード」が出現。
まず———「CSSコード」をコピーする。
コピーをしたら———WordPressの［外観］→［テーマエディター］→「スタイルシート（style.css）」の順にクリック。
そして———コードを貼り付けましょう。コピーしたものを「ペ」してください。
※CSSのコピペは1回でOK。今後ﾘﾝｸｶｰﾄﾞをつくる時に生成されるCSSコードは全く同じものだから無視してかまわない。
貼り終わったら———HTMLコードをコピーしておきましょう。
リンクカードが生成されたら、あとは貼り付けるだけ。
これでリンクカードの設定（生成）は、おしまい。
あとは———前述でコピーしたHTMLコードを、記事に貼りつけるだけ。
まずは———ワードプレスで「カスタムHTML」をクリック。
すると———「HTMLを入力するブロック」が出現。
そこに前述でコピーした「リンクカードのHTMLコード」を貼り付ける。
以上でリンクカードの貼り付け、設置作業は、おしまい。
保存して確認してみると……
綺麗にリンクカードが表示された！
ﾘﾝｸｶｰﾄﾞのｽﾏﾎ表示が気に食わない人へ
実は———そのまま貼り付けると、「スマホ表示」が、ちょっと見づらい。
現状———左に画像、右にテキストというレイアウトになっている。これはPCだと見やすいんだが、肝心なスマホで見づらくなる。
スマホは幅が狭いから、画像は小さくなるし、テキストも縦長になるから読みにくくなる。
ということで———スマホでも見やすくなるようにｶｽﾀﾏｲｽﾞしてみた。横並びをやめて、縦にした。
ｶｽﾀﾏｲｽﾞしたコードは以下に貼っておくので、どうぞ持っていってください。（前述の「style.css」にコピペしたコードとぜんぶ取り替えてください）
サンプル画像とコードは以下。
以外コード。コピペしてください。
.link-box{
border:1px solid #e1e1e1;
padding:24px 28px 34px 28px;
max-width:88%;
margin:0 auto;
margin-bottom:16px
}
.link-box:hover{
background-color:#f3f3f3;
-webkit-transition:background-color .35s;
transition:background-color .35s
}
.img-box{
width:100%
}
.img-box div{
min-height:180px;
background-size:cover;
background-position:center center
}
.text-box{
width:100%;
line-height:1.5;
margin:0;
font-weight:500
}
.text-box .title{
font-size:20px;
color:#428bca;
padding:0;
margin:16px 0 12px 0
}
.text-box .description{
font-size:14px;
color:#333;
letter-spacing:1.2px;
margin:0;
padding:0
}
@media only screen and (max-width:480px){
.link-box{
padding:12px 14px 17px 14px;
max-width:94%
}
.img-box div{
min-height:80px
}
.text-box .title{
font-size:16px;
line-height:1.75
}
text-box .description{
font-size:12px;
line-height:1.75
}
}以上で———『リンクカードの設定＆貼る方法』は、おしまい。
このように『ShareHtmlを、もっと綺麗にしたメーカー』を使えばリンクカードを簡単につくれる。
もし同じようにつまづいてる人がいたらこの記事を教えてあげてください。『Manablog Copy（マナブログコピー）』の情報は、まだまだ希少。我々で全知識を全共有して、初心者さんが背負う悩みや問題を1つずつ潰してゆこうではないか。
それでは、しばしの別れ！