【SWELL】文字にプラグインなしでルビを振る方法を紹介する!

記事内に商品プロモーションを含む場合があります。

SWELLではデフォルトでルビの機能がありません。

ブロックエディターでは基本的にバーにルビを振るための機能が割り当てられていますが、SWELLに限っては表示されていません。

他のテーマだと普通に表示されていたりします。

今回はSWELLスウェルでも簡単にルビを振る方法を紹介していきたいと思います。

目次

SWELLでのルビ機能

SWELLではルビ機能が実装されていません。

というか、実装はできるんでしょうけど恐らくわざと表示していないようです。

他のテーマでは普通に実装されていたり、使いやすくカスタムされていたりします。

Cocoon公式サイトより

要望にもよりますが、今後も実装されないような気がします。

ついでにいうとアンダーラインも実装されていません。

クラシックエディター出身の筆者からすると案外不便だったりするんですよね。おそらくクラシックエディターからWordPressを使っている方はみんなそうだと思います。

実際ルビはやり方さえ知っていれば簡単に実装できるのでこちらで紹介しておきます!

また、プラグインでも実装できますがサイト自体が無駄に重くなるのでおすすめしません。

ルビを振る方法

SWELLでルビを振る際は「HTML」で編集すればいいだけです。

とても簡単なので、誰でも実装することができます。

HTMLは以下です。

<ruby>SWELL<rt>スウェル</rt></ruby>

上記のようにルビを振りたいところに「<ruby>」を振って後ろに「<rt>」を振り、中にルビで表示させる文字を入れるだけです。

普通に表示させると以下のようになります。

SWELLスウェル

編集方法

こちらで詳しく解説します。

STEP
通常通り文字を入力し選択

SWELLにルビを付けていきます。

通常通り文字を入力した後に、ルビを付ける部分を選択します。

STEP
HTMLとして編集する

選択した状態で「︙」をクリックし「HTMLとして編集」を選択します。

STEP
コードをペーストする

先程のコードをペーストしてコードを変更します。

<p>は段落として必要なのでSWELLスウェルを入力する際は消さないようにしましょう。

違う文字にルビを振る時も容量は同じです。

<ruby>SWELL<rt>スウェル</rt></ruby>
STEP
ビジュアル編集に戻す

最後にコードの入力が終わったら、左上にある「ビジュアル編集」をクリックしましょう。

そうするとルビが振られている文字に戻ります。

文字数によるルビの振り方

文字数によってルビの振り方を変えると見え方が変わります。

連続して入力する場合は毎回見え方に注意すると綺麗に文章を整えることができます。

ルビをまとめて振る

<ruby>ABC<rt>エービーシー</rt></ruby>

ABCエービーシー

ルビを分けて振る

<ruby>A<rt>エー</rt>B<rt>ビー</rt>C<rt>シー</rt></ruby>

AエーBビーCシー

行間などが少し変わったりします。

ルビの長さによっても変わりますが、自身で確認しながら使い分けてみて下さい。

まとめ

ルビは簡単に実装できますが、正直なところ標準機能としてツールバーに表示して欲しいですよね。

いらないという意見もありそうですが、それなら個人でオンオフできると便利だと思います。

また、クラシックとして装飾すれば今まで通りクラシックエディターでルビを振ることもできます。

ですがブロックのままでも簡単に実装できるので、このやり方が一番いいと思います。

是非活用してみて下さい!!

以上っ!!

\ 支持率No1オススメWordPressテーマ /

この記事をシェアする

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次