ミニマリストアローンのブログ

【Manablog Copy カスタマイズ】ブログカードの作成方法【2つ紹介】

BLOG

Manablog copyをカスタマイズしたい人「Manablog copy(マナブログコピー)でブログカードを作って、オシャレに見せたい…!でもやり方がわかりません。」

こういった疑問に答えていきます。

本記事では、WordPressテーマ『Manablog Copy』で使うブログカードの種類を、2パターン紹介していきます。

まずは、完成イメージをご覧ください。

パターン①

パターン②

【Manablog Copy カスタマイズ】アドセンス広告の位置ズレを修正する方法

Manablog Copyをカスタマイズしたい人「Manablog Copy(マナブログコピー)でアドセンスを貼ると、なぜか位置がズレている…。このままだと見栄えが悪いから、綺麗に設置する方法が知りたいな。」←こういった悩みに答えていきます。

» 詳細を読む

これらのブログカードの作成方法を紹介していきます。
ぜひ、自分のブログにも実装してみてください。

スポンサードサーチ

Manablog Copyでブログカードを作成する方法【2つ紹介】

下記を順番に解説します。

  • パターン①を実装したい場合
  • パターン②を実装したい場合

パターン①を実装したい場合

より美しいHTMLをシェアしよう ShareHtmlを、もっと綺麗にしたメーカーというツールを使います。

ブログカード作成ツール画面
ツールを開いたら、記事のURLを入力。

ブログカード作成ツール画面
入力したら、HTMLコードが生成されるので、それをテキストエディタにコピペすれば完成です。

ちなみに、同時にCSSコードも生成されますが、それは無視してOK

パターン②を実装したい場合

下記のソースコードを参考にしてください。

<div class="col-xs-12 article_box">
<div class="col-xs-12 col-sm-4">
<img src="ここにアイキャッチ画像のリンク" class="img-responsive" >
</div>
<div class="col-xs-12 col-sm-8">
<h3>ここに記事タイトル</h3>
<p>ここに記事の説明を入力</p>
</div>
</div>
<p><a href="ここに記事のリンクを入力" class="green_link">&raquo; 詳細を読む</a></p>
<div style="clear:both;margin-bottom: 60px;"></div>

ブログのリンクをそれぞれ設定し、テキストエディタに貼り付ければ完成です。

以上。

Manablog Copyに関する記事まとめ

Manablog Copyについて知りたい人向けに「【ワードプレステーマ】Manablog Copyのレビュー&カスタマイズまとめ」にまとめました。

【ワードプレステーマ】Manablog Copyのレビュー&カスタマイズまとめ

「WordPressテーマ、「Manablog Copy(マナブログコピー )」を徹底的にレビューした記事と、その他カスタマイズ方法をまとめた記事となっています。カスタマイズ方法を知りたい方は、ぜひご覧ください。

» この記事を読む

人気記事Amazonアソシエイトに落ちる?【もしもアフィリエイトで解決します】

人気記事【2019年】ミニマリストが買ってよかった物&手放してよかった物

スポンサードサーチ