リンクタグなしで記事内のURLを自動でハイパーリンクありに変換

記事本文内のURL(httpで始まる文字列)をJavaScriptで自動的にハイパーリンク付きに変換する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. リンクタグを設定しなくても、httpで始まるURLを自動的にリンクありに変換します。

メリット・デメリット

  1. テンプレートにコピペするだけです。

  2. URLを a タグで挟む手間を減らせます。

  3. 記事本文内に a タグや img タグなどの http という文字列を含むタグ内に日本語を使っていると、その部分が意図しないハイパーリンクになってしまいます。対策は後述します。

テンプレートのHTMLを編集

customtemplateシリーズとeyecatcherシリーズ

  1. 定義追加用スペース4に次のコードを追加します。

    /*
    ※ リンクタグなしで記事内のURLを自動でハイパーリンクありに変換 ver130510
    ※ http://customtemplate.blog112.fc2.com/blog-entry-136.html
    */
    <!--
    entry_content.each(function(){$(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g,'<a href="$1" target="_blank">$1</a>'));});
    // -->
  2.  設定 をクリックすれば完了です。

valid-seoシリーズ

  1. 次のコメントアウトを探します。反転している部分を削除します。

    <!-- ▼▼▼ jQueryなど読み込み 開始 ▼▼▼ -->
    <!-- 1行下のコメントアウトを解除すると、google apiからjqueryを読み込める -->
    <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script-->
  2. 削除すると次のようになります。これでコメントアウトが解除され、jQueryを読み込めます。

    <!-- ▼▼▼ jQueryなど読み込み 開始 ▼▼▼ -->
    <!-- 1行下のコメントアウトを解除すると、google apiからjqueryを読み込める -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  3. 次のコードを探します。

    </body>
  4. 上記コードの上に次のコードを追加します。

    <script type="text/javascript">
    /*
    ※ リンクタグなしで記事内のURLを自動でハイパーリンクありに変換 ver130510
    ※ http://customtemplate.blog112.fc2.com/blog-entry-136.html
    */
    <!--
    $(".entry-content").each(function(){$(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g,'<a href="$1" target="_blank">$1</a>'));});
    // -->
    </script>
  5.  設定 をクリックすれば完了です。

記事本文内のaタグやimgタグ記述上の注意

  1. 記事本文内に次のようなコードがあると、想定外の変換をされてしまいます。下図で反転している部分です。

    <a href="http://customtemplate.blog112.fc2.com/" target="_blank" title="カスタムテンプレート">カスタムテンプレート</a>
    <img src="http://blog-imgs-1-origin.fc2.com/i/image/template/c/customtemplate_customtemplate-3c.gif" alt="カスタムテンプレート画像" />
  2. 記事本文内に a タグや img タグなどの http という文字列を含むタグ内に日本語を使っていると、意図しないハイパーリンクになってしまいます。上記コード内の日本語を半角英数に変更すると次のとおりです。下図で反転している部分が変更後です。赤文字部分は日本語でも問題なしです。

    <a href="http://customtemplate.blog112.fc2.com/" target="_blank" title="customtemplate">カスタムテンプレート</a>
    <img src="http://blog-imgs-1-origin.fc2.com/i/image/template/c/customtemplate_customtemplate-3c.gif" alt="customtemplate image" />
  3. 半角英数に変更せずとも、次のようにtitle属性やalt属性自体を削除してしまってもいいです。

    <a href="http://customtemplate.blog112.fc2.com/" target="_blank">カスタムテンプレート</a>
    <img src="http://blog-imgs-1-origin.fc2.com/i/image/template/c/customtemplate_customtemplate-3c.gif" />
  4. エラー時と正常時の比較用デモページです。

このページに関して

  1. 予告なく変更する場合があります。

  2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

  3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

  4. 経過時間

    • 不具合の原因特定に3時間(上記、aタグやimgタグに日本語が含まれているとエラーになるという原因特定に時間がかかった)
    • 機能追加検討に30分(時間がかかりそうなので最低限の機能にとどめた。)
    • この記事作成~デモページ作成~公開に2時間

他サイトの参考になるページへのリンクです。日付は各ページの公開日もしくは最終更新日です(このページの公開日現在)。ありがとうございます。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)