ブログのカスタム

シンプルで見やすい関連記事の表示方法【こんな記事も読まれてます】【図解あり!】

スポンサーリンク


f:id:soul-vibration:20171029220706j:plain

こんにちはユレオです!

前回の記事で関連記事表記をビジュアル的におしゃれに表示する方法をご紹介しました。

お洒落でかっこいい関連記事の表示方法【こんな記事も読まれてます】【図解あり!】 こんにちはユレオです! ブログを巡回していて複数の画像が一か所にまとまった関連記事表記を見たことはないでしょうか? ...

しかし、「見た目の情報量が多いし、広範囲表示はブログサイトに合わない」というような方もおられるのではないでしょうか?

今日はそういった方にぴったりのシンプルで場所を取らない関連記事表示のご紹介です。

f:id:soul-vibration:20171029220755j:plain

この関連記事表記はシンプルで場所を取らないので、ブログデザインをシンプルに保ちたい人にはお勧めです。

今回はLinkWithinの関連記事作成のサービスを利用します。

設定手順1 LinkWithinでコードを取得する

1:LinkWithinページの関連記事コード作成画面に行きます。 

LinkWithin – Related Posts with Thumbnails

2:必要な個所に情報を入力します。

f:id:soul-vibration:20170715111858j:plain

設定が必要なのは以下の通りです。

①:メールアドレスの入力。

②:トップのURLを入力。関連記事を作りたいブログのURLです。

(例:https://www.tamashii-yusaburuyo.work/

③:プラットフォームの選択。はてなブログなら「Others」を選択します。

④:記事の数の指定。PC表記であれば「5 stories」で問題ないと思います。

⑤:ブログの背景色が黒に近い場合はチェックを入れます。

最後に「Get Widget!」を押します。

3:コードが表示されるので全選択してコピーします。

f:id:soul-vibration:20170715112655j:plain

スポンサーリンク

設定手順2 はてなブログ画面

1:はてなブログの デザイン→カスタマイズ→記事→記事下を選択します

f:id:soul-vibration:20170715082952j:plain

2:先ほどコピーしたコードを張り付けます。

f:id:soul-vibration:20170715113459j:plain

この時「こんな記事も読まれています」付け足すと関連記事の上の表示されます。

<script>
var linkwithin_site_id = ”それぞれのID”;
linkwithin_text='●他にこんな記事も読まれています' 
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

3:デザイン→カスタマイズ→記事→記事ページをプレビューを押します。

f:id:soul-vibration:20170715001049j:plain

4:記事下部分に先ほど張り付けたコードの関連記事が表示されます。

問題がなければ画面左上の「変更を保存」を選択します。

f:id:soul-vibration:20171029220823j:plain

以上で終了です。

シンプルで横一列の関連記事が表示されたと思います。

ブログの雰囲気を変更したくないという方にはお勧めの方法だと思います。

スポンサーリンク


おすすめのアフィリエイトASPランキング

「ASP(アフィリエイト・サービス・プロバイダ)」とは、アフィリエイトの広告主とトやブログ運営者を繋ぐ仲介業者のことで、ブログ運営で広告などを掲載するにはASPに登録する必要があります。

そうしたASPは数多くありますが、初心者向けのおすすめのASPをご紹介いたします。

1位 A8.net
A8.netは広告主数が豊富で、ブログ運営者の多くが利用するアフィリエイトサービスです。
ブログを始めたばかりの方もwebサイトやブログを登録できますし、手続きも簡単でアフィリエイトを手軽に始めることができます。
また、A8.netでは「セルフバック」が充実しており、自分で商品の購入やサービス申込むことでアフィリエイトの報酬が得られ、実際の商品をお得に購入できるのでレビュー記事が書きやすいというメリットもあります。
総合
商品種類
初心者向け

A8.netの詳細ページはこちら

2位 もしもアフィリエイト
もしもアフィリエイトはブログ運営の初心者でも成果を上げられるように成果を上げる為の方法について詳しく書かれたマニュアルがあるなど、「ブログ運営初心者に対して嬉しいサービス」が充実しています。
また、Amazonアソシエイトと楽天アフィリエイトをまとめれるのは、管理がしやすい点が初心者にとってポイントが高く、W報酬制度やプレミアム報酬などの独自の報酬制度があります。
総合
商品種類
初心者向け

もしもアフィリエイトの詳細ページはこちら

3位 バリューコマース
バリューコマースはYahooショッピングでの報酬の取りまとめに力をいれていたり、スマートフォン向けのオーバーレイ広告が掲載できるなど、ポイントの高いサービスが提供されています。
また、メルカリなどのバリューコマースにしかない広告案件があり、メインのASPがすでにあったとしても広告案件の隙間を埋めたり、比較として登録しておいて損はありません。
総合
商品種類
初心者向け

バリューコマースの詳細ページはこちら