中卒フリーライターほぼ無職。

在宅Webフリーライターaoikaraの日常ブログです。

スポンサーリンク

超簡単!ブログのアクセスアップに「あわせて読みたい」を設置しよう

スポンサーリンク

f:id:aoikara:20170328150156p:plain

ブログは続けていくことも大切だけど、やっぱり質だなぁと思っているaoikaraです。充実した内容を届けたいですね。

 

というわけで今回のテーマは…

 

「あわせて読みたい」の設置

 

についてです。

 「あわせて読みたい」って何?

という方も多いと思うので、まずは何なのかをご説明。

 

 「関連ページプラグイン」

というのが、正式名称。表示しているページに関連するページを表示してくれるシステムなんです。たとえば私のブログでドラマ記事を見ていたら、ほかのドラマ記事を表示してくれるとか。

 

私のブログだと記事下に表示されています。

 

記事の下の方を見てみると…

f:id:aoikara:20170312180525p:plain

↑あっ、なんか下の方で見切れてるやつがある!さらにスクリーンして見てみると…

 

f:id:aoikara:20170312180631p:plain

 

そうそう、これです。これが「あわせて読みたい」です。スマホだと↓こんな風に表示されているはずです。

f:id:aoikara:20170312180907p:plain

 

「あわせて読みたい」設置のメリット

アクセスアップが狙える

サイトでとあるページを読んでいて、関連するページが表示されていたら気になってクリックしてしまうことって、ありますよね。「あわせて読みたい」は、読者のその行動を狙えるんです。

 

つまりアクセスアップが狙えます。複数のページを見てもらえたり、ブログに興味を持ってもらえばリピーターになってもらえるかも。

 

サイトの見直しができる

自分のサイトを見たときに、関連する記事を見て情報が古いのでリライトをしたり…と見直しにもなります。「こんな記事書いたな~」と振り返るのも良いですね。

 

ブログがおしゃれに見える

うん、単純におしゃれ。ブログはカスタマイズするとこなれてる感じがして、おしゃれに見えます。っていうのが、すでにおしゃれじゃない人間の発想なんですけどね。でも、設置させていただいている関連ページプラグインはおしゃれ。

 

はてなブログでカスタマイズしてみよう!

はてなブログで「あわせて読みたい」の設置方法やカスタマイズ方法について、解説します。

 

利用させていただいているサイト

まずは、使用させていただいているサイトをご紹介。シスウ株式会社「Milliard関連ページプラグイン」を利用しています。下記のサイトをご参考までに。

 

Milliard関連ページプラグインについて | シスウ株式会社

 

右下にも名前が書かれていますよね。

 

【パソコン版】

f:id:aoikara:20170312181106p:plain

 

【スマホ版】

f:id:aoikara:20170312181142p:plain

 

はてなブログでの「あわせて読みたい」設置方法

公式サイトへGO

まずは、シスウ株式会社のサイトに飛びます。その中から、はてなブログでのカスタマイズについてクリックしましょう。このサイトですでに詳しく解説してくれています。

Milliard関連ページプラグインについて | シスウ株式会社

 

Javascriptのコードを生成

次に、ブログに設置するためのコードを生成します。まずは下記リンクへGO!

Javascriptのコードを生成はこちら

 

こういう画面が表示されているかと思います。

f:id:aoikara:20170328142137p:plain

 

必要な項目を入力しましょう。それぞれについて解説。

f:id:aoikara:20170328142239p:plain

 

  • ①トップのURL:自分のサイトのURLを入力しましょう
  • ②サイトタイプ:選択肢があるので、設置したいサイトのタイプを選びましょう。「はてなブログ」「Wordpress」「livedoor」「FC2」などがあります。今回は「はてなブログ」を選択。
  • ③紹介文:プラグインの上に表示される文章です。私は「あわせて読みたい」にしてあります。何も入力しないと「こんな記事も書いてます」と表示されるそうです。
  • ④並び順:プラグインの並び順を選べます。関連するページを表示させたいなら「関連度順」、最新記事を表示させたいなら「更新日時」、何でも自由に表示させたいなら「ランダム」をチョイス。
  • ⑤表示位置:表示させたい場所を選択します。サイトの下にあるフッターの下か、あるいは自分で表示させたい場所を選択することも可能です。
  • ⑥PCでの表示:パソコンでの表示方法を選べます。「パネル」は大きくバラバラに、「リスト」は上から順番に整列。私は「パネル」を選択しています。
  • ⑦スマホでの表示:スマホでの表示方法も選べます。パソコンと同じです。スマホでは「リスト」を選択しています。

 

私は、こんな感じで入力しました。

f:id:aoikara:20170328143548p:plain

 

あとは、一番下にある「コードを取得」のボタンをクリック。

 

f:id:aoikara:20170328143614p:plain

※プライバシー保護のため画像を加工しています。

 

表示されたコードをコピーして、自分のサイトで表示させたい場所にペーストしましょう。

 

はてなブログのでのコードの入力方法

では、取得したコードをはてなブログに設置する方法を紹介。私は記事を読んだ後に見てもらいたいので、記事下に設置しました。なので、記事下に表示する方法を解説します。このような順番でページを表示していきます。

  • 「デザイン」>「カスタマイズ」>「記事」>「記事下」にコードを入力

 

まずは「デザイン」を開きます。左側にバーのようなものが表示されるはずです。

f:id:aoikara:20170328144309p:plain

こんな風に。

 

この左側の3つのマークのうち、真ん中のスパナのような「カスタマイズ」を選択します。

f:id:aoikara:20170328144455p:plain

 

いろんな項目が表示されますが、その中で「記事」を選択。

f:id:aoikara:20170328144620p:plain

 

またいろいろ表示されるので、スクロールして、「記事下」を表示します。その下をクリックするとコード入力画面になるので、先ほど取得したコードをコピーし、ペーストして入力しましょう。

f:id:aoikara:20170328145223p:plain

 

これで「あわせて読みたい」の設置は完了です。

 

3~4時間ほど待って確認

サイトの分析などに時間がかかるため、3~4時間は待った方が良いそうです。場合によっては半日かかることも。何にせよすぐには表示されないので、時間を置きましょう。

 

おわりに

というわけで、はてなブログで関連ページプラグインこと「あわせて読みたい」を設置する方法を解説しました。ブログをカスタマイズしたいと考えている方は、ぜひ参考にしてください。

 

 

良かったらポチッとください。
励みになります。

 

にほんブログ村 ライフスタイルブログ フリーランス生活へ
にほんブログ村


フリーライターランキング

 

aoikara

 

▼お仕事のご依頼はこちらまで

◎保存

スポンサーリンク