【はてなブログ】ページ内リンクの自動設定スクリプトを作成した【コピペ・カスタマイズ】

こんにちわ、野良エンジニアです。

スマホが普及してからというもの、「PC は買わない」「持ってても使ってない」って人が増えてますね。このブログも「モバイル 7割：PC 3割」というアクセス比となっていて、データを見てもスマホでブラウジングする人が圧倒的に増えてます。

僕は PC 派なのですが、たまにスマホで長い記事を読むと「スクロールがダルい」っていつも思うんです。そこで、少しでもスマホユーザーが快適に読めるように、ページ内の見出しにリンクを自動で付けるスクリプトを作りました。

↓こんなやつ、クリックで前後の見出しにジャンプ
f:id:ryota-17:20180413085350p:plain

この記事にも設定してあるので、ぜひ試してみてください。

【コピペ導入】はてなブログ用過去記事TweetBot【全自動】
はてなブログの記事数を調べるスクリプトを作って、他のブログの総記事数を調べてみた【Google Apps Script】
仮想通貨ブログを書くなら、仮想通貨ウェブフォントを導入しよう
【コピペ導入】ヘッダー部分にオシャレなアニメーションを追加しよう

Amazon プライムは絶対入るべき！メリット・特典・会費・退会方法をまとめて簡単に紹介
キッチン作業が最高に捗る突っ張りキッチンラック【オススメグッズ・スペース倍増】
内村さまぁ～ず第1〜50回から選ぶオススメ神回10選【Amazonプライムビデオ】

作ったもの
- メリット・デメリット
  - メリット
  - デメリット
導入方法
まとめ

作ったもの

↑これ、クリックで各見出しに移動できます。

メリット・デメリット

他にもありそうですが、思いつく分だけ。

メリット

ページ内を簡単に移動できる
読みたいとこに移動したり、もう一度読むのに戻ったりが楽ちん

デメリット

読んで欲しい部分がスキップされるかも
jQuery 使ってるので、表示速度に影響あるかも
スクロールが苦痛でない記事にもリンクが追加される

導入方法

コピペ 3回で導入できます。

jQuery の読み込み

「設定」→「詳細設定」→「headに要素を追加」なり、「フッタ」なりに jQuery の読み込み処理を追加。

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>

※すでに設定済の人は追加しなくて良いです。ただし、jQuery のバージョンによってはスクリプトがうまく動作しないかもしれません。

リンク設定スクリプトの追加

「フッタ」に以下を追加。

<script>
$(fuction() {
  // ページ内リンク
  let link_icon = '<i class="blogicon-link lg" style="transform: rotate(-45deg);"></i>';
  let headings = $('.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6');
  $(headings).each(function(i) {
    let h_link_wrapper = $("<span></span>", {
      "class": "h_link_wrapper"
    });
    $(this).after(h_link_wrapper);
    let h_link = $(this).next();

    let prev_link = "";
    if(i > 0) {
      prev_link = $("<a></a>", {
        href: "#" + $(headings[i - 1]).attr("id"),
        text: " 前へ",
        "class": "heading_link"
      });
      $(prev_link).prepend(link_icon);
      $(h_link).append(prev_link);
    }

    let next_link = "";
    if(i < headings.length - 1) {
      if(i > 0) {
        $(h_link).append("　　");
      }

      next_link = $("<a></a>", {
        href: "#" + $(headings[i + 1]).attr("id"),
        text: " 次へ",
        "class": "heading_link"
      });
      $(next_link).prepend(link_icon);
      $(h_link).append(next_link);
    }
  });

  // スムーススクロール
  $('a[href^="#"]').click(function() {
     var speed = 400;
     var href= $(this).attr("href");
     var target = $(href == "#" || href == "" ? 'html' : href);
     var position = target.offset().top - 40;
     $('body,html').animate({scrollTop:position}, speed, 'swing');
     return false;
  });
});
</script>

CSS の追加

「デザイン CSS」に以下を追加。色や見た目はお好みで変更。

/* ページ内リンク */
.h_link_wrapper {
  display: inline-block;
  font-size: 80%;
  margin-left: 10px;
  margin-bottom: 15px;
  padding: 8px 18px;
  border-radius: 20px;
  background: rgba(10,100,255,0.05);
}

カスタマイズする

見出しリンクのレベルを変える

以下の部分で、見出しレベルを設定しています。

let headings = $('.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6');

h4 までで良いなら、,.entry-content h5,.entry-content h6 は削除してください。

let headings = $('.entry-content h2,.entry-content h3,.entry-content h4');

アイコンフォントを変える

以下の部分で、リンクの前に出すアイコンを設定しています。
Font Awesome など、他のアイコンフォントを使いたい場合は変更してください。

let link_icon = '<i class="blogicon-link lg" style="transform: rotate(-45deg);"></i>';

表示されるテキストを変える

text: " 前へ"、text: " 次へ" を変えてください。

見た目を変更する

css を良い感じにいじってください。

まとめ

スマホユーザーのことを考えて、ページ内リンクの自動設定スクリプトを作ったよ
長い記事でもポチポチ押して楽に移動できるよ
短い記事にも挿入されるから導入は要検討だよ
うまく動作しない環境もあるかも

これでスマホユーザーの利便性アップだグワ〜

うまく動かない場合はブコメとかで教えて欲しいグワ！

はてなブログPerfect　Guidebook

posted with ヨメレバ

JOE　AOTO ソーテック社 2016年07月21日

アフィリエイトで夢を叶えた元OLブロガーが教える本気で稼げるアフィリエイトブログ