jQuery を読み込まずにそのまま使える JavaScript です。
ライブドアブログのスマホ版ページでは jQuery の読み込みが面倒なので、最近はなるべく生JSで済ませるようにしています。
直近のシノハユのサブタイトルに、国学者流というか、あまり見ないルビが振られています。
こういうのは漢字だけだとまず読めませんよね。
鷹乃学習は七十二候の一で鷹の幼鳥が飛ぶことを覚える時期
しりさきとたたさまは枕草子に出てくる言葉でまあ見たままの意味
ということのようです。
ウチのネタバレ記事のタイトルにもルビを振りたいのですが、ライブドアブログの編集画面では記事タイトルに HTMLタグを使うとエスケープされて書き込めません。
そこで JavaScript を使って記事タイトル部分の HTMLを書き換え、ルビを表示させてみました。
実質一行の簡単なものです。
これを応用すると、タイトル文字にあらゆる HTML要素を挿入できます。
文字のスタイルを一部だけ変えたり、画像を貼ったり、背景画像を指定したりが思いのまま。
なお、
ついでに──要らないとは思いますが──エラー判定も入れて書き直すと、
※
ライブドアブログのスマホ版ページでは jQuery の読み込みが面倒なので、最近はなるべく生JSで済ませるようにしています。
直近のシノハユのサブタイトルに、国学者流というか、あまり見ないルビが振られています。
こういうのは漢字だけだとまず読めませんよね。
鷹乃学習は七十二候の一で鷹の幼鳥が飛ぶことを覚える時期
しりさきとたたさまは枕草子に出てくる言葉でまあ見たままの意味
ということのようです。
ウチのネタバレ記事のタイトルにもルビを振りたいのですが、ライブドアブログの編集画面では記事タイトルに HTMLタグを使うとエスケープされて書き込めません。
そこで JavaScript を使って記事タイトル部分の HTMLを書き換え、ルビを表示させてみました。
実質一行の簡単なものです。
!function(){ var title = document.getElementsByClassName('article-title')[0]; title.innerHTML = title.innerHTML.replace( /縦方/, '<ruby><rb>縦方</rb><rp>(</rp><rt>たたさま</rt><rp>)</rp></ruby>' ); }();記事タイトルの HTML は、PC版・スマホ版ともに
<h1 class="article-title">
なので、両方で有効です。これを応用すると、タイトル文字にあらゆる HTML要素を挿入できます。
文字のスタイルを一部だけ変えたり、画像を貼ったり、背景画像を指定したりが思いのまま。
なお、
<ruby>
タグを生成する関数を別に定義しておくと、ルビとテキストを指定する部分をすっきり書くことができます。ついでに──要らないとは思いますが──エラー判定も入れて書き直すと、
!function(){ var titles = document.getElementsByClassName('article-title'); if(titles == null) return false; var rubyInArticleTitle = function(text, ruby){ var re = new RegExp(text), title = titles[0]; title.innerHTML = title.innerHTML.replace( re, '<ruby><rb>' + text + '</rb><rp>(</rp><rt>' + ruby + '</rt><rp>)</rp></ruby>' ); }; rubyInArticleTitle('縦方', 'たたさま'); }();配列渡しして複数の部分を一気に書き換えられるようにとか改良の余地はありますが、とりあえずこんな感じで。
※
replace()
等の正規表現メソッドに指定する検索文字列に変数を使う場合は、RegExp()
宣言で文字列変数を正規表現オブジェクトに変換しておく必要があります。
コメント