メニューにルビを自動的に付けたい人向け
URLを後ろにつけるだけで自動的にルビ(よみがな)を振ってくれるシステムを今日知った。
指定の仕方は
これだけ。
※ルビ対象URLには『https://』も付けるよ
表示例として、
まずは通常表記がこちら
それを
としてアクセスしてみる
と…
おおおお！
全部の漢字にルビが振られている！
ふりがな、たまに間違えてるけどね。
なぜか日本語サイトに変わりはないのに、Chromeに英語サイト判定されて、勝手に文字を変えられる。
日本語から日本語に変換して、文章内容変えるってどうなのさ…
てかこっちで変えるから勝手に変えないでってChromeに思ってる。
ブログカード表示、ちょっとおかしくなるんだけど、これのせいだろうか？
ちなみにリンクも自動的にルビ付きにしてくれる親切設計。
ルビ用リンクには、そのリンクの前に『https://trans.hiragana.jp/ruby/』が付いちゃう
※どういうことかわからなければ、変換後のページで⇧のブログカードのURLを確認してみてね
「コレって延々と付くのかな？」と思って２回試すと503になった。
制作者の方ごめんなさい案件である。
たまにレイアウトが崩れることもある。
ちなみに携帯(ガラケー)から表示させると
携帯けいたい情報じょうほう
みたいな表示になってしまっていたけど、もうないから、そこは安心だね
では、動的にリンク作る方法を以下に書いておきますねー
今見ているURLのルビ用リンクを作る
当然だけど『使った後のページ』からは、ルビのない状態に戻せない。
だが、JSで出せば大体解決である。
ルビを『付ける』『付けない』両方出す
<script type="text/javascript">
myset = {
seturl : "https://trans.hiragana.jp/ruby/",
};
myset.find = document.location.href.indexOf(myset.seturl);
if (myset.find==-1) {
myset.targeturl = document.location.href;
}else{
myset.targeturl = document.location.href.substring(myset.seturl.length,document.location.href.length);
}
document.write("<a href='"+myset.targeturl+"'>ルビなし</a> <a href='"+myset.seturl+myset.targeturl+"'>ルビあり</a>");
</script>
⇩こんな感じで表示される
現在のURL次第でルビ付ける・付けないリンクを作る
WordPressのメニューに付けるならばこっち。
<script type="text/javascript">
myset = {
seturl : "https://trans.hiragana.jp/ruby/",
};
myset.find = document.location.href.indexOf(myset.seturl);
if (myset.find==-1) {
myset.targeturl = document.location.href;
document.write("<a href='"+myset.seturl+myset.targeturl+"'>ルビ付ける</a>");
}else{
myset.targeturl = document.location.href.substring(myset.seturl.length,document.location.href.length);
document.write("<a href='"+myset.targeturl+"'>ルビ消す</a>");
}
</script>
⇩こんな感じで状態によって変わるよ
おためしあれ
コメント