【マナブログコピー(Manablog Copy)】キレイなブログカードの設置方法【ビジュアルエディタにするとリンク消えます】
ブログを始めたばかりのひと「キレイなブログガードを僕も作りたいなぁ」
このような悩みに答えます。
下記のようなブログカードを自分のブログに設置するには、マナブさんが作ったサイト「より美しいHTMLをシェアしよう」すればOKです。
より美しいHTMLをシェアしよう｜ShareHtmlを、もっと綺麗にしたメーカー
ブログ記事内で他サイトリンクをサムネイル（アイキャッチ画像）付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。より美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。
このツールを使用することで上のようなブログカードを誰でもカンタンに作れるようになります。
この記事ではブログカードをキレイに作る手順と注意点を伝えます。
それではよろしくお願いします。
※まだManablog Copyを使っていない人は以下の記事を参考にどうぞ。
Manablogcopy(マナブログコピー)にテーマ切替を決意できた理由【購入手順付き】
僕はこれまで使っていた無料テーマCocoonからマナブログコピー(Manablog Copy)へのテーマの移行を決意しました。その記事ではこれまで有料テーマの購入を躊躇していたツッキーがマナブログコピーの購入を決意できた理由を記します。有料テーマにしようか迷っている・検討している方の参考になれば最高だなぁ
スポンサーリンク
【Manablog Copy】キレイなブログカードを設置する方法
キレイなブログカードを設置する4ステップ
下記の4ステップでブログカードの設置が可能です。
- 「ShareHtmlを、もっと綺麗にしたメーカー」のページを開く
- ブログのリンクを入力し、Enterを押す
- 「#CSSコード」をコピーして外観≫テーマエディタ≫style.cssに貼り付ける
- 「#HTMLコード」をコピーして、ブログのテキストエディタにペースト
つぎにそれぞれのステップを画像付きで説明しますね。
①「ShareHtmlを、もっと綺麗にしたメーカー」のページを開く
より美しいHTMLをシェアしよう｜ShareHtmlを、もっと綺麗にしたメーカー
ブログ記事内で他サイトリンクをサムネイル（アイキャッチ画像）付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。より美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。
②ブログのリンクを入力し、Enterを押す
③「#CSSコード」をコピーして外観≫テーマエディタ≫style.cssに貼り付ける
＃HTMLコードの下にある# CSSコードをWordpressで外観≫テーマエディタ≫style.cssに貼り付けましょう。
④「#HTMLコード」をコピーして、テキストエディタでブログにペースト
つぎに「#HTMLコード」をコピーして、記事にペーストすればOKです。
ここまでで下記のようなブログカードを作成することが可能です。
コスパ最強！1万円以下！Anker Soundcore Liberty Air 2の詳細レビュー【初めての完全ワイヤレスイヤホン】
「AppleのAirPods Proは素晴らしいイヤホンですが、値段が高い、、」と思うあなたにはAnkerのワイヤレスイヤホンがおススメです。僕が使っているコスパ良・ビジュアル良のワイヤレスイヤホン「Anker Soundcore Liberty Air 2」の詳細レビューを公開します。
注意点：ブログカードを貼った後でビジュアルエディタを使うとリンクが消える
「より美しいHTMLをシェアしよう」を使うブログカードの作成の注意点は下記の一点です。
ビジュアルエディタにすると、リンクがなぜか消えてしまうので、テキストエディタのみの使用になる
テキストエディタでブログカードのコードを貼った後で、ビジュアルエディタにすると、リンク先のないただのボックスになってしまいます。(以下のブログカード参考)
途中でリンクが消えていることに気づいたときは絶望しました、、、、
より美しいHTMLをシェアしよう｜ShareHtmlを、もっと綺麗にしたメーカー
ブログ記事内で他サイトリンクをサムネイル（アイキャッチ画像）付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。より美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。
必ずテキストモードで貼って、そのまま編集を続けるようにしましょう。ビジュアルモードにはいかないでください。
確認したい場合はプレビューで確認するようにしましょう。
今回の記事があなたの参考になれば嬉しいです。
※コメント、質問がある場合はツイッターからメッセージをいただくか問い合わせからコメントを頂ければ、返信させていただきます。よろしくお願いします。