最近話題のふりがなプログラミング本を読んだぞ！
自分のブログでもコードにふりがなを振れるかやってみたい！

という方に向けて書きました。

コードにふりがなを振る方法

みなさん、この本読みましたか。

「スラスラ読める Unity C#ふりがなプログラミング」

ざっくり、この本の説明をすると、

Unityで使用する言語C#のコードにふりがなをつけて説明しており、さらに、”読み下し文”として、コードを音読できるよう文章にしています。

プログラミング初心者の私にとっては、とても有り難い1冊になりました。

そして、この本を読み終えた後に思っちゃったのです。

「自分もコードにふりがなつけたいな」と、

ということで、今回は、ブログで記載したコードにふりがなを振る方法です。

【5分でできる】プラグインWP-Yomiganaで簡単にできます!

※ダウンロード時間は5分の中に含まれていません。

1.使用したもの

・ロリポップレンタルサーバー　スタンダードプラン

ロリポップ！レンタルサーバー

【WordPressの表示速度No.1】のレンタルサーバー「ロリポップ！」月額550円から高速WordPressが使える！初期費用・ドメインも無料！今すぐ10日間の無料お試し

lolipop.jp

・WordPress 4.9.8

※WordPressはロリポップユーザー専用ページからインストールしました。

・テーマ　Cocoon

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

wp-cocoon.com

・プラグイン　WP-Yomigana

WP-Yomigana

このプラグインはWordPressのエディターにrubyタグを入力する機能を追加します。

ja.wordpress.org

2.手順

①プラグインWP-Yomiganaのインストール

プラグイン > 新規追加

をクリックし、WP-Yomiganaで検索します。

WP-Yomiganaをインストール→有効化にしましょう。

②設定

設定 > ルビ設定

をクリックします。

rubyタグのボタンを表示するように設定します。

1行目に表示を選択します。

選択後、変更を保存をクリックします。

③ふりがなを振る

記事作成画面に移動します。

ふりがなを振る部分を選択し、ルビをクリックします。

ルビの蘭に、ふりがなを入力します。

入力後、OKをクリックしましょう。

installの上にふりがなが振られましたね。

プレビューで確認してみましょう。↓

実際に表示されるページでも、ふりがなが振られています。

ふりがなの文字数を多くしてみましょう。↓

ふりがなを振る部分の前後の余白が大きくなりました。

3.まとめ

プラグインWP-Yomiganaを使用することで、簡単にふりがなを振ることができます。

4.おすすめ書籍

今回、コードにふりがなを振るきっかけとなった本です。プログラミング入門本として、とてもおすすめな1冊です！