【コピペ OK】はてなブログで特定の記事に関連リンクを入れる方法

※はてなブロガー向けの記事です。

「特定の記事（実際には特定のカテゴリ）に関連記事を追加したい！」ということはありませんか？

記事上や記事下にオススメ記事的なのを入れている方は見かけますが、特定の記事ってひょっとしたら入れている方はあまりいないのかも・・・。

調べても紹介しているブログなど無かったので実装してみました。需要があるかわかりませんが、せっかくなので設置方法を残しておきます。

完成イメージ

上記画像のように特定のカテゴリの記事下に、関連記事としてリンクを入れば目的達成です。

関連する記事はAdsenseの関連コンテンツユニットを入れていますが、前から特定の記事に、特定の記事を入れたいと思っていたんですよね。

関係ないですが、上記の記事本文を考えるのが面倒だったのでここで生成してみました。ゴノレゴ懐かしいですね（笑）

CSSの準備

関連記事の枠はいつも便利に使わせていただいている、シロマティ(id:shiromatakumi)さんの記事のCSSを使わせてもらいました。

shiromatakumi.hatenablog.com

こちらの記事は便利過ぎてブラウザのお気に入りにまで入れるほど活用させていただいています（笑）ありがとうございます。

PC

【デザイン編集】-【PC】-【デザインCSS】に以下を追記します。

.entry-content .emphasize-link {
  position: relative;
  margin: 36px 0 16px;
  padding: 16px 10px;
  border: 2px solid #df8182;
  background-color: #fffbf5;
}
.entry-content .emphasize-link p:last-child {
  margin-bottom: 0;
}
.entry-content .emphasize-link::before {
  position: absolute;
  bottom: 100%;
  left: -2px;
  padding: 2px 6px;
  content: "あわせて読みたい";
  background-color: #df8182;
  color: #fff;
  font-weight: bold;
}

モバイル

【デザイン編集】-【スマートフォン】-【フッター】にも以下を追記。（※<style></style>内に入れてください）

.entry-content .emphasize-link {
  position: relative;
  margin: 36px 0 16px;
  padding: 16px 10px;
  border: 2px solid #df8182;
  background-color: #fffbf5;
}
.entry-content .emphasize-link p:last-child {
  margin-bottom: 0;
}
.entry-content .emphasize-link::before {
  position: absolute;
  bottom: 100%;
  left: -2px;
  padding: 2px 6px;
  content: "あわせて読みたい";
  background-color: #df8182;
  color: #fff;
  font-weight: bold;
}

スクリプト全体

スクリプト全体は以下のようになります。

【デザイン編集】−【PC】−【フッター】に以下のコードを追記します。（※1行目のjqueryは事前に読み込んでいる場合は追記する必要は無いです。）

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
    var urls = ['http://www.example.com/entry/hogehoge' , 'http://www.example.com/entry/ahaha'];
    var titles = ['ブロガー必見！必ずバズる記事4つの法則' , '5年前に知っておきたかった。リターン率◯％の投資信託5選'];
    if($(".category-特別なカテゴリ").length){
       var list = $('<div>').addClass('emphasize-link');
       
       for(var i =0; i < urls.length; i++){
           list.append($('<p>').html('<a href="' + urls[i] + '">' + titles[i] + '</a>'));
       }

       $(".entry-content").append(list);
    }
});
</script>

次にいくつか修正していきますが、事前に埋め込みたい「記事タイトル」と「URL」を決めておいてください。

表示させたい記事タイトル、URLは以下のようにシングルコーテーション「‘」で囲み、カンマ「,」で区切ればOK。

見栄えの問題はありますが、いくつでも追加可能ですし、1つでも大丈夫です。

urlsに掲載するURL、titlesに掲載するURLのタイトルをそれぞれ入れます。

var urls = ['URL1' , 'URL2'];
var titles = ['タイトル1' , 'タイトル2'];

次に「特別なカテゴリ」という部分を表示させたい記事のカテゴリ名に差し替えます。

  if($(".category-特別なカテゴリ").length){

モバイルは同じ内容のものを【デザイン編集】−【スマートフォン】−【フッター】に入れれば表示されます。

なお、外枠を変更したい場合はemphasize-linkの部分を任意のクラス名に変更してください。

 var list = $('<div>').addClass('emphasize-link');

最後に

以上、はてなブログで特定の記事に関連リンクを入れる方法でした。

ブログテーマは「Blank」と「Brooklyn」では動作確認済みですが、もし動かないようでしたら声を掛けてください。

ちなみに関連リンクと言ってますが、URLとタイトルの組であれば、何でも入るので広告など入れても良いかもしれないですね。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

posted with ヨメレバ

山田 祥寛 技術評論社 2016-09-30

Amazon

Kindle

楽天ブックス