スキルアップを始める!

【Javascript】ルビを削除するブックマークレットを作る方法

JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト)
この記事は約2分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

HTML上で文字にルビ(ふりがな)が付けられている際に、こちらのルビを消した状態で表示したいと思った時に使える方法です。

青空文庫のルビを削除するブックマークレットを作る

「ブックマークレート」という機能を使うことで、ルビを消した状態で同じページを表示させることが可能です。

該当のページを開いた状態で、例えば「青空文庫」の場合は、下記のコードをブックマークレートとして登録して開くと、ルビが削除されます。

[rml_read_more]

javascript:(function(){o=document.getElementsByTagName('body')[0];s=o.innerHTML;s=s.replace(/<ruby><rb>(.*?)<\/rb>.*?<\/ruby>/gi,'$1');o.innerHTML=s;})()

ブックマークレートとは?

ブックマークレットとは、JavaScriptで作られた簡単なプログラムのことをいいます。Webブラウザーのブックマークバーを使って、簡単なJavaScriptを実行させて、ルビを削除するなどの便利な処理を行えます。

具体的な手順を見ていきましょう。

ブックマークを追加する

まずは、ブックマークを追加します。GoogleChromeの場合は、右上の「・・・」からブックマーク>「このタブをブックマークに追加」を押します。

ルビ(ふりがな)が消えた状態で表示されました!

HTMLでルビの付け方は?

ちなみにHTMLでルビを付けたいときには、「rb」というタグを使います。

<ruby>
<rb>吾輩</rb>
<rp>(</rp>
<rt>わがはい</rt>
<rp>)</rp>
</ruby>
は猫である。名前はまだ無い。
吾輩 わがはい は猫である。名前はまだ無い。

簡単ですね。

まとめ

ブックマークレートを使うと、ページ上のルビを非表示にすることができます。目的は色々かと思いますが、もしルビを非表示にしたいと思った時はブックマークレートをお試しください。

ではまた😃

URLをコピーしました!