【WordPress】コードにふりがなを振る方法【ふりがなプログラミング本を読んで】

WordPress

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

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

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

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

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

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

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

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

 

 

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

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

 

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

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

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

1.使用したもの

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

ロリポップ!レンタルサーバー
ホームページ運営なら、ずっと使えるレンタルサーバー「ロリポップ!」簡単、多機能、充実サポート、高速性能で、初心者から商用サイトまで安心してご利用いただけます。WordPress、EC-CUBEもたったの60秒で設置可能。まずは無料お試し10日間。

・WordPress 4.9.8

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

・テーマ Cocoon

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

・プラグイン WP-Yomigana

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

2.手順

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

プラグイン > 新規追加

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

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

②設定

設定 > ルビ設定

をクリックします。

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

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

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

③ふりがなを振る

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

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

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

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

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

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

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

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

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

3.まとめ

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

 

4.おすすめ書籍

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

コメント

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