アメブロ 1記事にリブログを簡単に2つ以上する方法

この記事を読むのに必要な時間は約 5 分です。

[アイキャッチモデル: 茜さやさん]

このブログは基本的に、メンタルセラピストやスピリチュアル系を仕事にしたい方で、ブログを書いている方でITが苦手な方を対象にしています。

この記事で伝えたいこと
  • 今回の記事はある程度HTMLのコードやCSSを理解している必要がある
  • アメブロのリブログを複数（2つ以上）する方法
  • 表示はできるが実際にリブログとして扱われるのは一つ目だけ

1記事に複数のリブログを貼りたい

1記事に複数のリブログを貼りたい。

もしかするとあなたもそう思ったことがあるかもしれない。

関連する記事をリブログをして貼り付ける事でブログの回遊率を上げる。

多くの人がやっている方法です。

ただ内容によっては2つ以上の記事を張り付けたいと思うこともあると思います。

普通にリブログするだけでは、一つしかリブログできません。

今回は、2つ以上の記事をリブログする方法お伝えします。


アメブロでリブログを複数（2つ以上）する方法

基本形として次のHTMLコードを使えば簡単にできます。

ためしに僕が使っているアメブロで一記事にリブログを2つしてみました。

ifreme のsrcを”https://ameblo.jp/s/embed/reblog-card/minmin-ybp2/entry-12568163381.html?reblogAmebaId=minmin-ybp2&isLightPreview=true”と実際のリブログされるときのURLを入力します。

すると実際の画面では

このように見えます。

※ただ、この方法、実際にはリブログをしたとカウントされるわけではありませんのであしからずご了承ください

すこし高度な設定

この方法でリブログした場合、PCで見る分にはリブログが2列に表示されてカッコいいんですが、スマホでみるとタイトルや説明が読みづらい　という欠点もあります。

そこでスマホの場合は、1列になるようにCSSを変えてみたいと思います。

まず2列にリブログするコードを上記のコードから以下のように変更します。

上記にあった　width=”49%”を消して代わりに　class=”reblog2column”を追加します

次に、デザイン変更から、CSSの編集画面のCSS蘭の一番最後に以下のCSSを追加します。

CSSを別にすることでPCでは2列に、スマホでは1列に表示されるようになります。

ただ、デザインがCSS編集用を使っている場合に限ります。

説明では2つですが３つ、４つやそれ以上にしたい場合は下記のようにすると増やしていくことができます。

奇数の場合は、最後のifreamの行を削除して使うようにしてください。
※ただ、この方法、実際にはリブログをしたとカウントされるわけではありませんのであしからずご了承ください

まとめ

如何だったでしょうか？機能としてのリブログが動くわけではありませんが、リブログされているように見せることができます。

それほど難しい方法ではないので是非、あなたも試してみてください。

またブログを書く上でHTMLタグの使い方や書き方を知っているのと知らないのとでは表現に差が出てくるので覚えてみてはいかがでしょうか？

HTMLタグについては次の記事がお勧めです。

【2019年度最新】ブログを書くなら知っておいた方がいいHTMLタグ14選
https://your-best-partner.site/for-it-solution/blog-html-tag.html
この記事を開いたという事は、あなたも仕事なり趣味なりでブログを書いているのだろうと思います。 しかし、HTML…

最後までお読みいただきありがとうございます。

今回の記事があなたの役に立ったなら幸いです。

質問疑問ございましたらコメント欄へお願いします。
 

アメブロ関連記事

設定編

技術編

デザインCSS集

集客編

WordPress関連記事

設定・インストール

トラブルシューティング

動作環境・リリース情報