音楽理論ショートコード導入ガイド：Noto Music対応の美しい表記

音楽記事を書くとき、C# や G#maj7(b5) のような表記が、本文と微妙にズレたり、フォントがちぐはぐになったりして、「内容は合っているのに見た目が惜しい」と感じたことはありませんか？

当ラボでは、音楽理論をWeb上で正確かつ自然な見た目で表示するために、 「Noto Music」フォントの特性を活かした専用ショートコード を使用しています。この記事では、その導入方法と基本的な使い方をまとめます。

まずは完成イメージ
このショートコードでできること
導入手順
全パターンの入力例はこちら
まとめ

まずは完成イメージ

このショートコードを導入すると、たとえば次のような表記をすっきり表示できます。

入力例	表示イメージ	用途
`[m pname="c" accid="s"]`	C^♯	基本の音名表記
`[m pname="g" accid="f" lang="ja"]`	変ト	日本語音名
`[m pname="c" suffix="maj7(#5)"]`	Cmaj7(♯5)	コードネーム表記
`[m pname="b" lang="de" rt="ハー"]`	Hハー	ドイツ語音名

このショートコードでできること

このショートコードは、単なる記号の置き換えではありません。音楽理論の文脈に合わせて、
表記の見た目と内容を両立するための仕組みをまとめています。

3言語の自動書き換え：lang 属性ひとつで、日本式・英式・独式の表記を切り替え
コードネームの整ったレイアウト： ルート音・変化記号・サフィックスのサイズ感と位置を自動調整
変化記号の自動変換： # や b を、見た目の良い ♯ や ♭ として処理
日本語表記にも対応： 必要に応じて、変化記号だけにルビを振るような表現にも対応

導入手順

ステップ1：CSSを追加する

まずは表示用のCSSを追加します。テーマの「追加CSS」または style.css に貼り付けてください。

なお、下のCSSはそのままコピーして使える前提です。最初の段階では、内容をすべて理解しなくても問題ありません。

詳しい設計思想は、以下の記事で解説しています。

/* ========================================================= */
/* 1. 基本フォント設定（Notoファミリーで統一）              */
/* ========================================================= */

/* 音楽記号のフォント指定（.noto-music-symbolクラスでNoto Musicを適用） */
.noto-music-symbol {
    font-family: 'Noto Music', sans-serif !important;
}

/* ========================================================= */
/* 2. 和音記号（コードネーム）のサイズと位置調整            */
/* ========================================================= */

/* ▼ パターンA: 記号のみを上付き文字にする場合（本文中のシンプルな表記向け） */
/* HTML例: C&lt;sup class="noto-music-symbol sharp"&gt;♯&lt;/sup&gt; */
sup.double-sharp,
sup.sharp,
sup.natural,
sup.flat,
sup.double-flat {
    font-size: 100%;
}

/* ▼ パターンB: spanで全体を囲む場合（複雑な和音表記向け） */
/* HTML例:
   &lt;span class="noto-music-symbol"&gt;
     G&lt;sup class="sharp"&gt;♯&lt;/sup&gt;
     &lt;span class="suffix"&gt;maj7(...)&lt;/span&gt;
   &lt;/span&gt;
*/

/* ルートの変化記号のサイズ調整 */
span.noto-music-symbol &gt; sup.double-sharp { font-size: 130%; }
span.noto-music-symbol &gt; sup.sharp,
span.noto-music-symbol &gt; sup.flat,
span.noto-music-symbol &gt; sup.double-flat { font-size: 100%; }

/* サフィックス（maj7など）のサイズと縦位置調整 */
span.noto-music-symbol &gt; span.suffix {
    font-size: 70%;
    vertical-align: 0.5em;
}

/* サフィックス内の変化記号（♯5など）のサイズと縦位置調整 */
span.noto-music-symbol &gt; span.suffix &gt; span.suffix-sharp {
    vertical-align: 0.2em;
    font-size: 110%;
}

span.noto-music-symbol &gt; span.suffix &gt; span.suffix-flat {
    vertical-align: 0em;
    font-size: 110%;
}

/* ========================================================= */
/* 3. ルビが長くても親文字幅を極力いじらせないための設定    */
/* ========================================================= */

ruby {
    ruby-position: over;
    ruby-align: center;
    text-align: center;
}

rt {
    white-space: nowrap;
    line-height: 1;
}

ruby &gt; rb,
ruby {
    letter-spacing: normal;
    word-spacing: normal;
}

ステップ2：PHPコードを追加する

次に、ショートコードを有効にするためのPHPコードを追加します。

追加先は次のどちらかがおすすめです。

functions.php に直接追加する
Code Snippets プラグインで管理する

おすすめ： Code Snippets などのプラグインを使って管理する方法が安全オススメです。

テーマ更新の影響を受けにくく、万が一コードに問題があっても、スニペット単位で停止できるため、管理しやすくなります。

functions.php に追加する場合の注意点を見る

functions.php を直接編集する場合は、事前にバックアップを取ってください。記述ミスがあると、サイト全体でエラーが出ることがあります。

Code Snippetsでの設定方法

プラグイン Code Snippets をインストールする
[Snippets] → [Add New] を開く
PHPコードを貼り付ける
名前を付ける（例：楽典ショートコード ）
Run snippet everywhere を選ぶ
Save Changes and Activate をクリックする

導入後は、投稿本文にショートコードを入力するだけで使えます。

入力例	表示イメージ	用途
`[m pname="c" accid="s"]`	C^♯	基本の音名表記
`[m pname="g" accid="f" lang="ja"]`	変ト	日本語音名
`[m pname="c" suffix="maj7(#5)"]`	Cmaj7(♯5)	コードネーム表記
`[m pname="b" lang="de" rt="ハー"]`	Hハー	ドイツ語音名