PR
※当サイトには、アフィリエイト広告等が含まれています。閲覧者様が商品の購入や広告を見ていただくだけで広告主からの収益が発生します。閲覧者様には感謝の念に堪えませんが、当サイトは広告主から収入を得ることで記事内容が左右されることは一切ありません。令和5年10月1日からステルスマーケティングは景品表示法違反となります。消費者庁

WordPressで「上付き文字」と「下付き文字」を簡単に入力する方法

スポンサーリンク

ワードプレスで上付き文字と下付き文字のロゴ

こんにちは、解説ゾロです!

前回の記事は「Googleドキュメントの上付き文字で簡単に「m2」が書ける方法」の解説でした!

内容は「Googleドキュメント」で右上や右下に小さい文字を書くことができる「上付き文字」や「下付き文字」を使って「m2」や「CO2」のような小さい文字が簡単に書けるという解説でした。

その「上付き文字」や「下付き文字」を「WordPressでも表示したい!」・・・ですよね!笑

今日は「m2」「CO2」のように、デカイ「2」を、WordPressでも、ちゃんと小さく表示したいので、WordPressでの「上付き文字」や「下付き文字」の表示方法を解説いたします。簡単ですので一緒にやりましょ!
前回の記事はこちら
Googleドキュメントの上付き文字で簡単に「m2」が書ける方法
Googleドキュメントの「上付き文字」や「下付き文字」で、m2やCO2などの「2」を右上や右下に小さく書ける方法です。もちろん、ひらがなや漢字も小さく表示できますのでアイディア次第でオリジナルの楽しい文字での表現が可能ですので一緒にやりましょ!
スポンサーリンク
スポンサーリンク
スポンサーリンク

WordPressで上付き文字と下付き文字を簡単に入力する方法

「上付き文字」や「下付き文字」は「m2」「CO2」のように、小さい文字を表示できる呼び名です。

この小さい字は「環境依存文字」でも変換リストに表示されますが、Googleドキュメントと同様にパソコンの種類や環境(OS)により文字化けなどで正確な表示ができない場合がありますのでご注意くださいませ。

そして、この「上付き文字」「下付き文字」は数値以外にも「注意※1」や「ひらが」「」「何で」ですので、あなた様だけのオリジナルの小っちゃい字が簡単に書けちゃいます!ロゴのデザインにも使えてとても便利です!

今日の解説用のサンプルは「3.3m2」を使って解説いたします。そのまま入力すると「3.3m2」を、ちゃんと右上に小さい文字で「3.3m2」が表示される入力方法を解説いたします。

スポンサーリンク

WordPressで上付き文字を入力する方法

「3.3m2」の「2」を右上に小さい文字の上付き文字で表示する場合は「2」をスーパースクリプトの<sup>2</sup>で囲みます。

それでは、実際に上付き文字を表示してみます。まず、いつも記事を書いているビジュアルの画面で「3.3m2」と普通に入力してください。そして
の「テキスト」をクリックして、ビジュアルの画面からテキストの画面に変更してください。次は「2」の直前の場所の、
に先程の<sup>を入力します。同様に「2」の直後の場所の、
</sup>を入力します。

ワードプレスで上付き文字と下付き文字はテキストの画面から

入力するとこのように「2」の直前直後が、
<sup>
</sup>で「2」が囲まれています。

ワードプレスで上付き文字と下付き文字あ対象の文字を囲む

それでは、確認するために「テキスト」の画面から「ビジュアル」をクリックして元の「ビジュアル」の画面に戻してみると、
のように、ちゃんと「2」が右上に小さい文字で表示され、上付き文字が表示されました。大成功です。

ワードプレスで上付き文字と下付き文字の完成図

スポンサーリンク

WordPressで下付き文字を入力する方法

今度は、右下に小さい文字の下付き文字を表示してみます。下付き文字の場合は、小さく表示したい文字(○○)を、サブ(Subscript:添字)で囲みます。<sub>○○</sub>

入力方法は、上付き文字と全く同じです。

まとめ

上付き文字は、<sup>○○</sup>

下付き文字は、<sub>○○</sub>

p」が上、「b」が下、のように「p」「b」の違いで、右上と右下の表示が変わり、小さくしたい文字を囲むことで簡単に、右上や右下に表示することができます。

冒頭でもお話しましたが、ロゴなどのデザインでも活用できますので、覚えておくと重宝いたします!

あなた様のオリジナル文字もいっぱい作ってくださいませ!

最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした!

関連記事:Googleドキュメントの上付き文字で簡単に「m2」が書ける方法
関連記事:【超簡単】ワードプレスの文字にルビ(フリガナ)を付ける方法
関連記事:ワードプレスでおしゃれな囲み枠の作り方はソースコードのコピペだけ
関連記事:WordPress余分なリビジョンを削除して軽くするプラグイン

タイトルとURLをコピーしました