あなたは、気軽に HTML/ハイパーリンク_文字をブログ記事に付けて来たと思う (以後リンクと称す)。わたしも自由気ままに過去記事へのリンクや関連記事へのリンクを適当に配して来ました。手動でダイレクトに打ち込んだり、ブログのリンク機能を利用して記事に組み込んできました。それは、それで良い。なのに、この記事では、全自動で「新しいタブで開かないリンク」と「新しいタブで開くリンク」を隣り合わせて配置させようと言う試みです。


先におまけ、脳に響く音楽を聞きながら・・・
実験中ですが、音源配信元が
gitlab.com(Wiki)_ の場合はダウンロード・ユースとなり、
OSとブラウザーに依存して異様さが露呈します。
一般的にはMP3音源配信にgitlab.com_は利用しないです。

つまり記事総数が多ければ多い程に過去記事の全てと未来の記事の全てを自動処理してしまう試みです。そして、とうとう、ブログ毎のスクリプトを DropBox にアップロードしましたので、どうぞご自由に利用してみて下さい。過去の全ての記事のリンク表現が変わります。もちろん記事毎に <span class="NoThankYou2018"></span> と記事に書き込むだけで処理を行わないですし、Ａタグ内にクラス指定するだけで( <a class="NoThankYou2020" )、そのＡタグは処理しません。その他、自動的に処理させないことが可能です。
この記事は、ルーツとなった過去記事：「支配下にあるIDを特定し、Aタグを自動的に置き換えてリンクをクールに仕上げよう！_」の発展記事です。



メリット

「知らない」のなら「悩みが無い」わけで、「知ること」で「悩みが始まる」わけです。これからのブログ記事において、立派なリンクを埋め込むことを自分に課したなら、苦しみが生まれます。「立派なHTML/ハイパーリンク_」なんて忘れてしまいたくなります。「過去を反省する」と、恥ずかしくなります。「見ないことにする？」
さて、このページの機能を実装すると、ブログ記事をこれから書く未来において「心の迷い」が無くなって「心の重荷」が軽くなります。「手抜きのリンク」のままに記事を書き込めます。そして「過去の記事」すらも勝手に変更されるので、手修正しなくて良いので、「身も心も」解放されます。「悩み」が無くなるので、それは「プチハッピー」を手に入れたことになりますよね。

処理する前と自動処理の後

  • 処理前のリンク例：
    平成 - Wikipedia
    オリジナルのHTMLコード：
    <a href="https://ja.wikipedia.org/wiki/%E5%B9%B3%E6%88%90">平成 - Wikipedia</a>
  • 生まれ変わった自動処理後のリンク：
    平成 - Wikipedia_
    右側に図形を配します。
【参考】：過去ルーツ記事：「支配下にあるIDを特定し、Aタグを自動的に置き換えてリンクをクールに仕上げよう！」の「実験検証サンプル_」項を見る。
本サイトでは「１つのブログシステムに縛られない」で、開発元の異なる複数のブログで同時に実現できます。あなたの今が「気に入った１つのブログだけを利用している」だとしても将来、ブログの引越しを決めたとしても、その未来のブログで JavaScript が利用できるなら、同じ機能を実装できます。あなたは JavaScript を扱えるブログを探すだけで済みます。
Ujiki.oOへの寄付_

動作環境

2018/10/21 2018/11/01 において、わたしが入手している下記のブラウザー全てで正常動作することを確認しています。いつもの事ですけど、 Apple について最新のバージョンアップでの確認が不能です。古いiOS機しか所有していないからです。スマートフォンなら、 iPhone 5 以降の新型、 iPod 全機種、 iPad 全機種、 Apple PC 全機種です。どなたか、確認結果を DISQUS コメント で、是非お知らせ願います。使用している JavaScript は歴史的に古いブラウザーの時代の元始書式の文法しか利用していませんので、いまどきの JQuery_など新型パッケージの導入の心配（バージョン？！）は無用です！
  • SystemRescueCD_ Wiki_ :
    • uname -a : Linux sysresccd 3.14.35-std452-amd64 #2 SMP Thu Mar 12 08:04:53 UTC 2015 x86_64 Intel(R) Core(TM)2 Duo CPU E8400 @ 3.00GHz GenuineIntel GNU/Linux
      1. midori-0.5.5_
    • uname -a : Linux sysresccd 4.14.32-std522-amd64 #2 SMP Sat Mar 31 20:05:28 UTC 2018 x86_64 Intel(R) Core(TM)2 Duo CPU E8400 @ 3.00GHz GenuineIntel GNU/Linux
      1. Firefox ESR 52.7.3 (32-bit)_
    • uname -a : Linux sysresccd 4.14.70-std531-amd64 #2 SMP Sat Sep 15 16:16:19 UTC 2018 x86_64 Intel(R) Core(TM)2 Duo CPU E8400 @ 3.00GHz GenuineIntel GNU/Linux
      1. Firefox Quantum 62.0 (32-bit)_
  • Kona Linux 4.0 Pro_ (64) (Not Live) : uname -a : Linux DELL 4.9.0-8-amd64 #1 SMP Debian 4.9.130-2 (2018-10-27) x86_64 GNU/Linux
    1. Chrome バージョン: 70.0.3538.77（Official Build） （64 ビット）
    2. Firefox Quantum 60.3.0esr(64)
    3. FireFox Quantum 62.0.3(64)
    4. Vivaldi 2.1.1337.36 (Stable channel) (64-bit)
  • MS-Windows7 : Professional (64) Service Pack 1
    1. IE 11.0.9600.19155
    2. Chrome バージョン: 70.0.3538.77（Official Build） （64 ビット）
    3. FireFox Quantum 63.0.1(64 ビット)
    4. Vivaldi 2.0.1309.42 (Stable channel) (32-bit)
    5. Avast Secure Browser バージョン: 69.1.852.100（Official Build）（32 ビット）
    6. Comodo Dragon Version 68.0.3440.107 (Portable Edition) (32-bit)
    7. IceDragon 61.0.0.20 (Portable Edition) (32-bit)
    8. Chromode Version 52.15.25.665 (Portable Edition) (32-bit?)
    9. Sleipnir 6.2.14.4000
  • Google Android : 6.0.1 Nexus7(2013)_
    1. Chrome バージョン: 49.0.3497.100
  • Apple iOS :
    • 6.1.6 : iPhone 3
      1. Safari
      2. Chrome
      3. Puffin
    • 7.1.2 : iPhone 4
      1. Safari
      2. Chrome
      3. Puffin
  • SONY : PS4 , PS3 , Smart TV
Ujiki.oOへの寄付_

ブログ毎のスクリプト呼び出しアドレス

異なるのは２つのグローバル変数「 modeA 」と「 nameA 」の値だけを変えただけです。それ以外は全く同じです。どのスクリプトも YUI Compressor_ で一行化していますが、人間用のソースコードは記事「支配下にあるIDを特定し、Aタグを自動的に置き換えてリンクをクールに仕上げよう！_」で公開しています。
(ABC順)
blog.jp _ | fc2.com _ | hamazo.tv _ | MovableType _ | ni-moe.com _ | seesaa.net _ | webry.info _ | WordPress _
  1. blog.jp : livedoorヴログで楽しい日々を_
    「ブログの設定」 ＞ 「デザイン」 ＞ 「ＰＣ 」 ＞ 「カスタマイズ」
    「個別記事ページ」</body>の直後に
    を入力して「保存する」ボタンを押す。
    ブログ固有の <div id="main-inner"></div>区間に対する自動処理を規定するルールを決めているのは、次のグローバル変数名とデーターです。
    • modeA = "id"
    • nameA = "main-inner"
  2. fc2.com : FC2 ヴログで楽しい日々を_
    「設定」 ＞ 「テンプレートの設定」 ＞ 「テンプレート管理 (PC用)」 ＞ 「HTML CSS」「編集」
    「HTML編集」</body>の直後に
    を入力して「更新」ボタンを押す。
    ブログ固有の <div class="entry_body"></div>区間に対する自動処理を規定するルールを決めているのは、次のグローバル変数名とデーターです。
    • modeA = "class"
    • nameA = "entry_body"
  3. hamazo.tv : hamazo.tv ヴログで楽しい日々を_
    「ブログの設定」 ＞ 「テンプレート」 ＞ 「PCテンプレート」 ＞ 「カスタマイズ 」 ＞
    「個別記事：」</body>の直後に
    を入力して「登録」ボタンを押す。
    ブログ固有の <div class="ssp_body_more"></div>区間に対する自動処理を規定するルールを決めているのは、次のグローバル変数名とデーターです。
    • modeA = "class"
    • nameA = "ssp_body_more"
    ※「タブレットテンプレート」に共通データーとして登録出来ました。
  4. Movable Type Open Source 5.2.10 (+ Rainier 1.04) : Ujiki.oO Main Movable Type_
    「デザイン」 ＞ 「テンプレート」 ＞ 「アーカイブテンプレート」 ＞ 「ブログ記事 」 ＞
    </body>の直後に
    を入力して「保存と再構築」ボタンを押す。
    ブログ固有の <div class="entry-content asset-content"></div>区間に対する自動処理を規定するルールを決めているのは、次のグローバル変数名とデーターです。
    • modeA = "class"
    • nameA = "entry-content asset-content"
    ※ MovableType には日本の無料ブログのような「スマートフォン用テンプレート」とか「ＰＣ用テンプレート」の垣根が存在しません。「テーマ」次第ですが、広いＰＣ画面から狭いスマートフォン画面(例：横320ピクセル)までシームレスに動作します。
  5. ni-moe.com : 忍者ヴログで楽しい日々を_
    「デザイン」 ＞ 「PC用テンプレート」 ＞ 「現在使用中 」 ＞ 「修正」
    「HTML編集」</body>の直後に
    を入力して「データ保存」ボタンを押す。
    ブログ固有の <div class="entryPsText"></div>区間に対する自動処理を規定するルールを決めているのは、次のグローバル変数名とデーターです。
    • modeA = "class"
    • nameA = "entryPsText"
  6. seesaa.net : SeeSaa ヴログで楽しい日々を_
    「デザイン」 ＞ 「PC」 ＞ 「CSS/HTML編集」 ＞ 利用中の「デザインタイトル」をクリック、
    「HTML編集」</body>の直後に
    を入力して「保存する」ボタンを押す。
    ブログ固有の <div class="text"></div>区間に対する自動処理を規定するルールを決めているのは、次のグローバル変数名とデーターです。
    • modeA = "class"
    • nameA = "text"
  7. webry.info : ウェブリヴログで楽しい日々を_
    「ブログ」 ＞ 「設定」 ＞ 「表示項目設定」 ＞ 「フリースペース(サイド用)」 ＞ 「編集する」
    どこでも構わないので
    を入力して「設定」ボタンを押す。
    ブログ固有の <div id="blog"></div>区間に対する自動処理を規定するルールを決めているのは、次のグローバル変数名とデーターです。
    • modeA = "id"
    • nameA = "blog"
  8. WordPress (+ Lovecraftバージョン: 1.24): webhostapp.com_ / WP by Ujiki.oO_
    「プラグイン」 ＞ 「CSS & JavaScript Toolbox_ 8.4.1」 ＞ 「ＡＵＸ」 ＞ 「All Posts」
    を入力して「Ｓａｖｅ」ボタンを押す。
    ブログ固有の <div class="post-content"></div>区間に対する自動処理を規定するルールを決めているのは、次のグローバル変数名とデーターです。
    • modeA = "class"
    • nameA = "post-content"
    ※ WordPress には日本の無料ブログのような「スマートフォン用テンプレート」とか「ＰＣ用テンプレート」の垣根が存在しません。「テーマ」次第ですが、広いＰＣ画面から狭いスマートフォン画面(例：横320ピクセル)までシームレスに動作します。
  9. WordPress : Ujiki.oO's WordPress_
    「プラグイン」 ＞ 「HTML HEAD INJECTOR 0.1」
    どこでも構わないので
    を入力して「変更を保存」ボタンを押す。
    ブログ固有の <div class="post-content"></div>区間に対する自動処理を規定するルールを決めているのは、次のグローバル変数名とデーターです。
    • modeA = "class"
    • nameA = "post-content"
    ※ WordPress には日本の無料ブログのような「スマートフォン用テンプレート」とか「ＰＣ用テンプレート」の垣根が存在しません。「テーマ」次第ですが、広いＰＣ画面から狭いスマートフォン画面(例：横320ピクセル)までシームレスに動作します。
Ujiki.oOへの寄付_

共通仕様


劣悪な日本国内の無料ブログ

※ これから無料ブログで「ブログライフ」を始められるのなら、Apple iOS でも Google Android でも、ＰＣでも「美しさ」＋「高速」＋「静寂さ」を実現できる無料ブログから始めて下さいませ！
Ujiki.oOへの寄付_

改訂履歴

2018/10/19 05:00 a.m. JST
IE対策として、自動的に作成されるＡタグ内に onclick を追加し、 window.open を定義しました。これで IE も正常に動作しますか？ 全てのスクリプトを変更しています。ルーツとなった過去記事：「支配下にあるIDを特定し、Aタグを自動的に置き換えてリンクをクールに仕上げよう！_」は修正前の古いスクリプトで動作しています。
Ujiki.oOへの寄付_

開発計画

「デバッグ・モード」を内包しています。「デバッグ・モード」に意義が無いのなら、「デバッグ・モード」に関わるコードを削除すれば、腰の括れもタイトで軽快なスクリプトに育つに違いない。

【デバッグ・モード】：
  1. 記事内にHTMLスクリプトを追加する
  2. グローバル変数をセットします。
もしも、あなたが愛用しているブログ・システムにスマートフォン専用のHTML編集画面がある、またはタブレット専用のHTML編集画面があるのなら、あなたのスマートフォンやタブレットで「デバッグモード」を機能させた記事を、「下書き」のままに表示して、スマートフォン・タブレット専用の <div id= 名 か <div class= 名を見付けて下さい。 公開を許可して下さるのなら

  1. DISQUS コメント に、
  2. 「id」なのか「class」なのかと言う説明と
  3. 指定するべき「値」をお知らせ下されば、
  4. スクリプトを無料で作成し、
  5. Dropbox_ か、 Evernote_、もしくは dropjiffy.com_にアップロード致します。
  6. どちらにせよ本記事の DISQUS コメント に注目して戴くのに、 DISQUS コメント 欄の最下段、左端の「更新を受け取る」をクリックして機能させるとリアルタイム（？）にメールで知らされます。通知が無用になりましたら再度「更新を受け取る」をクリックします。
Ujiki.oOへの寄付_

先行開発

別サイトですが、わたしのメインブログ WordPress_ では、実験的に先行した開発を行います。実証実験を行っています。つまり「公開スクリプト」と相違点があります。 DISQUS コメント に要望があれば公開スクリプトに反映できるように努力をおしみません。
  1. 2018/10/24
    1. 同じブログ内のリンクと外部のサイトのリンクで画像を変えています。
      そして画像だけでなくて、タイトルも変えています。「新タブで外部サイトを開く」
    2. WordPress の index.php 専用のスクリプトを作成しています。
      適当なDIVタグのCLASS名が無くて、範囲が広いですけど「問題提起」を目的として「まあ、良いか」状態です。
  2. 2018/11/03
    1. class名判定を強化しました。
      element.classList.length が２以上なら element.classList.contains( "クラス名" ) で判断させる様にしましたが、今のところ element.className == "クラス名" で判断させる処理で充分の模様です。
    2. 処理が完了する際に特定の関数を実行するようにしました。
      関数名 RubTheLamp2018 が関数として既に定義されている場合に実行します。 わたしは本処理が終了するまではスタイルで見えないようにしておいたコンテンツを、関数 RubTheLamp2018 で見えるように置き換えるのに利用します。
  3. 2018/11/05
    1. 機械翻訳でのズレに対処しました。このページの翻訳機能を実行してみて下さい。
      自動処理されるＡタグと自動で追加されるＡタグの全体を <span> と </span> で囲みました。テスト試行中です。

サポートが必要ですか？


Support AIt's free and fastSupport BIt's free and fastSupport CIt's free and fast

「無料サポート」に興味があれば
上の丸ボタンをクリック願います。
サーバーから9kbを受信しますのでお待ち願います。

※ 記事本文は別サーバーから JavaScriptファイルとして配信しており、配信元のサーバーにおける JavaScriptファイル(YUICOMPRESSOR済み)も、実際にあなたのブログが受信する gzip圧縮済みの JavaScriptファイルも、３０日間のキャッシュ流用を定義していますので、特にご質問の前にブラウザーのキャッシュを削除してから、再度のご訪問と閲覧をお願い致します。
※ DISQUSについては別管理ですので、毎回、最新のDISQUSを表示できています。 但し、ご自分のDISQUSコメントを編集した直後に編集後の内容に至らない場合がありますが、DISQUS表示の上部にある「あなたの言語でDISQUSメニューを再表示する！」をクリックしますと最新の状況を表示致します。 宜しくご理解願います。
※ どれだけ待ってもDISQUSが表示されない場合は「広告ブロック」機能を切ってみて下さい。
Google Translator.

良いブログと利用できないブログ


  • CLICK!