音楽記事を書くとき、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<sup class="noto-music-symbol sharp">♯</sup> */
sup.double-sharp,
sup.sharp,
sup.natural,
sup.flat,
sup.double-flat {
font-size: 100%;
}
/* ▼ パターンB: spanで全体を囲む場合（複雑な和音表記向け） */
/* HTML例:
<span class="noto-music-symbol">
G<sup class="sharp">♯</sup>
<span class="suffix">maj7(...)</span>
</span>
*/
/* ルートの変化記号のサイズ調整 */
span.noto-music-symbol > sup.double-sharp { font-size: 130%; }
span.noto-music-symbol > sup.sharp,
span.noto-music-symbol > sup.flat,
span.noto-music-symbol > sup.double-flat { font-size: 100%; }
/* サフィックス（maj7など）のサイズと縦位置調整 */
span.noto-music-symbol > span.suffix {
font-size: 70%;
vertical-align: 0.5em;
}
/* サフィックス内の変化記号（♯5など）のサイズと縦位置調整 */
span.noto-music-symbol > span.suffix > span.suffix-sharp {
vertical-align: 0.2em;
font-size: 110%;
}
span.noto-music-symbol > span.suffix > 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 > 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 | ドイツ語音名 |
全パターンの入力例はこちら
特殊な表記や細かい入力方法は、一覧ページにまとめています。
「どう書くんだっけ？」と思ったときに、そのままコピペ用の辞典として使えます。
👉 ショートコード 全入力パターン集・逆引き辞典（近日公開）
まとめ
正確な音楽理論を伝えるには、内容だけでなく表記の品質も重要です。
このショートコードを使うことで、執筆時に毎回見た目を調整しなくても、
音楽理論にふさわしい表記を安定して出力できます。
音楽系ブログ、教材制作、理論解説記事などで、ぜひ活用してみてください。
