TSUCKY BLOG Written by ツッキー(Tsucky)

【マナブログコピー(Manablog Copy)】キレイなブログカードの設置方法【ビジュアルエディタにするとリンク消えます】

Manablog Copy

ブログを始めたばかりのひと「キレイなブログガードを僕も作りたいなぁ」

このような悩みに答えます。

下記のようなブログカードを自分のブログに設置するには、マナブさんが作ったサイト「より美しいHTMLをシェアしよう」すればOKです。

このツールを使用することで上のようなブログカードを誰でもカンタンに作れるようになります。

この記事ではブログカードをキレイに作る手順と注意点を伝えます。

それではよろしくお願いします。

※まだManablog Copyを使っていない人は以下の記事を参考にどうぞ。

スポンサーリンク

【Manablog Copy】キレイなブログカードを設置する方法

キレイなブログカードを設置する4ステップ

下記の4ステップでブログカードの設置が可能です。

  1. 「ShareHtmlを、もっと綺麗にしたメーカー」のページを開く
  2. ブログのリンクを入力し、Enterを押す
  3. 「#CSSコード」をコピーして外観≫テーマエディタ≫style.cssに貼り付ける
  4. 「#HTMLコード」をコピーして、ブログのテキストエディタにペースト

つぎにそれぞれのステップを画像付きで説明しますね。

①「ShareHtmlを、もっと綺麗にしたメーカー」のページを開く

下記にブログカードを置いておきます。

②ブログのリンクを入力し、Enterを押す

リンクを貼ってEnterを押す

③「#CSSコード」をコピーして外観≫テーマエディタ≫style.cssに貼り付ける

#HTMLコードの下にある# CSSコードをWordpressで外観≫テーマエディタ≫style.cssに貼り付けましょう。

CSSコートをテーマエディタにペースト

④「#HTMLコード」をコピーして、テキストエディタでブログにペースト

つぎに「#HTMLコード」をコピーして、記事にペーストすればOKです。

HTMLコードの貼り付け

ここまでで下記のようなブログカードを作成することが可能です。

ツッキー
ツッキー
初心者の僕でもできるくらいカンタンでした!

注意点:ブログカードを貼った後でビジュアルエディタを使うとリンクが消える

「より美しいHTMLをシェアしよう」を使うブログカードの作成の注意点は下記の一点です。

ビジュアルエディタにすると、リンクがなぜか消えてしまうので、テキストエディタのみの使用になる

テキストエディタでブログカードのコードを貼った後で、ビジュアルエディタにすると、リンク先のないただのボックスになってしまいます。(以下のブログカード参考)

途中でリンクが消えていることに気づいたときは絶望しました、、、、

必ずテキストモードで貼って、そのまま編集を続けるようにしましょう。ビジュアルモードにはいかないでください。

確認したい場合はプレビューで確認するようにしましょう。

今回の記事があなたの参考になれば嬉しいです。

※コメント、質問がある場合はツイッターからメッセージをいただくか問い合わせからコメントを頂ければ、返信させていただきます。よろしくお願いします。

期間限定①Amazonのコンテンツギフトで文章力レベルアップ【音声は神】

人気記事①資産を爆増させる米国株投資ブログ【始め方・稼ぎ方まで徹底解説】

人気記事②Manablog Copyにテーマ切替を決意できた理由【購入手順付き】