【マナブログコピー】リンクカードの設定&貼る方法

web

WordPress有料テーマ『Manablog Copy(マナブログコピー)』で、ブログ記事内にリンクカード(またの名をブログカード)を貼る方法について解説してゆく。

複雑なカスタマイズ、プログラミング……不要。

なぜなら———

だれでも簡単にリンクカード(ブログカード)を設置できる、神ツールが存在するから。

ツールの使い方からブログへの設置方法まで、この記事を見ながら一緒にやっていきましょう。

リンクカードは、コピペで作れる。

『Manablog Copy(マナブログコピー)』で使うリンクカードは、コピペで作れる。

おそらく———
このような現象に陥っていませんか。

「ブログ記事の『編集画面』では、(リンクカードが)ちゃんと表示されてる」
「でも(プレビューや本番URLで)実際に確認すると表示されてない……」
ブログ記事編集画面ではリンクカードが表示されてる。
ブログ記事の『編集画面』で表示されるリンクカード
リンクカードにはならず、引用みたいなテキストリンクになってる。
実際、表示されるリンクカード

と———
こんなふうに、うまく表示されず、引用みたいなテキストリンクが表示されてしまう。

「こんな時、どうすればリンクカードを表示させることができるのか?」

結論:リンクカードをコピペで作って貼り付ければいい。

『ShareHtmlを、もっと綺麗にしたメーカー』という神ツールを使えばいい。

『ShareHtmlを、もっと綺麗にしたメーカー』というツールを使えばいい。

『manablog』運営者であるマナブ氏が作り上げた『ShareHtmlを、もっと綺麗にしたメーカー』を使えば、ほぼ一瞬で目的達成できます。

ほぼ一瞬で、しかも無料で、リンクカードが出来上がります。

『ShareHtmlを、もっと綺麗にしたメーカー』の使い方。

『ShareHtmlを、もっと綺麗にしたメーカー』の使い方——

まずは———
リンクカードを一瞬で作れる神ツールが置いてあるサイトへ行こう。
以下のリンクから行けます。

『ShareHtmlを、もっと綺麗にしたメーカー』

行くと、こんなページになってる。

『ShareHtmlを、もっと綺麗にしたメーカー』のトップページ。
(2020/08/26/19:12現在のもの)

じゃあ———
早速つかってみる。

とても簡単です。

「ここにURLを入力するだけ~~~~」のとこにURLを入力するだけ。

すると———
「プレビュー」「HTMLコード」「CSSコード」が出現。

『ShareHtmlを、もっと綺麗にしたメーカー』でURLを入力すると、「プレビュー」と「HTMLコード」などが出てくる。
『入力したURLのリンクカード』のプレビューとHTMLコード

まず———
「CSSコード」をコピーする。

コピーをしたら———
WordPressの[外観]→[テーマエディター]→「スタイルシート(style.css)」の順にクリック。

そして———
コードを貼り付けましょう。
コピーしたものを「ペ」してください。

※CSSのコピペは1回でOK。今後リンクカードをつくる時に生成されるCSSコードは全く同じものだから無視してかまわない。

貼り終わったら———
HTMLコードをコピーしておきましょう。

リンクカードが生成されたら、あとは貼り付けるだけ。

リンクカードが生成されたら、あとは貼り付けるだけ。

これでリンクカードの設定(生成)は、おしまい。

あとは———
前述でコピーしたHTMLコードを、記事に貼りつけるだけ。

まずは———
ワードプレスで「カスタムHTML」をクリック。
 

ワードプレスで「カスタムHTML」をクリック。
カスタムHTML

すると———
「HTMLを入力するブロック」が出現。

ワードプレスの「カスタム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(マナブログコピー)』の情報は、まだまだ希少。

我々で全知識を全共有して、無駄な悩みや時間を徹底的に潰していこう。

それでは、しばしの別れ。

広告