メモ程度に、ブログ記事にルビや脚注、注釈や引用などを付けるときのHTMLを書いておきます。

それぞれのコードをブログ記事内に埋め込む是非については、各々の考え方だと思うので分かりません。

筆者の場合、主にCMSにはWordPressを使用していて多くのWordPRessテーマを利用しています。

また、個人的な経験として、特にルビや脚注（注釈）を利用したレスポンシブサイトだと、「字が小さすぎる」という指摘が出てきて対応する必要が出てくる可能性がありますのでご留意ください。

この辺りについては、様々な国際規格団体で色々と議論されているあたりなのですが、本当にメモなので何の意見も考えも述べていません。また、記述方法もちょっと古いかもしれないので、勉強したときに本内容をリライトしていくかもです。

前提条件

CMSはWordPress
埋め込むときは「カスタムHTML」を使用
テキストのポイント数はWordPressテーマの標準ポイント数

ブログ記事内でルビを付ける方法

それでは、ルビの付け方を記載していきます。

HTMLでルビを付ける

ブログ記事（きじ）にルビを付ける

コード的には下記のような感じなります。

ブログ<ruby><rb>記事<rb> <rp>（</rp><rt>きじ</rt><rp>）</rp></ruby>にルビを付ける

ルビ部分の前後に<rp>（</rp>と<rp>）</rp>で（かっこ）を入れている理由は、ルビに対応していないブラウザ対策です。

なので、気にしない場合は入れなくても大丈夫です。

この他にも、ルビの入れる方向や位置などの調整方法は多種ありますが、ここでは単純な表記方法のみ紹介します。

ＨＴＭＬで脚注（注釈）を付ける

それでは、脚注や注釈の付け方を記載していきます。

ブログ記事に脚注^【1】や注釈^【2】を付けるときはこんな感じです。

ページ内リンク有りの時と無しの時の2パターンを入れておきます。

ブログ記事に脚注<sup><a href="ページ内移動のidを決める">【1】</a></sup>や注釈<sup>【2】</sup>を付けるときはこんな感じです。

ページ内リンク先は最下部にあります。

脚注や注釈についても、様々な表記方法がありますし、最近のWordPressには、標準ブロックエディタに付いていることが多いです。

自分でカスタムHTMLにベタ打ちすることは少ないと思いますが記載しておきます。

引用した部分を明確にする

これは利用機会の多いタグだと思います。また、WordPressであれば、引用ブロックが普通に付いていますので、そちらの利用の方が良いと思います。

引用タグ

WordPressのインストールまで簡単にできる
引用元｜ブログの始め方と人気ブログの作り方を完全初心者向けに解説｜ユニコブログ®

表記の仕方は下記のような感じです。

<blockquote>WordPressのインストールまで簡単にできる<p>引用元｜<a href=”https://unicorn-blog.jp/archives/1733” target="_blank" rel="noopener noreferrer">ブログの始め方と人気ブログの作り方を完全初心者向けに解説｜ユニコブログ&reg;</a></blockquote>

フォントの大きさなどについては、CSSで制御した方が良い感じなので省略します。

以上、拙いながら

ルビ
脚注や注釈
引用

のコーディングメモでした。

脚注

¹ 脚注や注釈の表記（ページ内リンク）

² 脚注や注釈を記載しておく（内部リンク無し）

<h2 id=”last”>脚注</h2>
<sup>1</sup> 脚注や注釈の表記（ページ内リンク）

<sup>2</sup> 脚注や注釈を記載しておく（内部リンク無し）

なんか、Qiitaだとページ内遷移のルールが違うっぽい？？