【マナブログコピー】リンクカードの設定&貼る方法 | んざわいうじのたわごと.

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

かゆいところに手が届く?

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(マナブログコピー)』の情報は、まだまだ希少。

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

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