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

この記事の所要時間 約 330

今回の記事はある程度HTMLのコードやCSSを理解しているという前提で書いてます。

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つですが3つ、4つやそれ以上にしたい場合は下記のようにすると増やしていくことができます。

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

まとめ

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

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