2019/06/08難しい漢字や、読みにくいアルファベット、専門用語などにフリガナというかルビを振りたいことってあると思います。HTMLタグをちょろっと入れるだけで簡単にルビを振ることができますので、そのやり方についてご紹介します。読みにくい単語などにHTMLタグ「ruby」を使ってルビを振る場合、このような形で表示されます。delaymaniaディレイマニアを運営しています、株式会社かぶしきがいしゃondoオンドの大谷大オオタニダイです。僕のブログ名も会社名も名前も読み間違えられることがたまにあるので、こんな具合にルビを振ると親切ですよね。そんなルビを振るためには、下記のように書いてください。コピペして単語を入れ替えて使っていただいても構いません。<ruby>delaymania<rt>ディレイマニア</rt></ruby>rubyタグとrtタグについて上記のHTMLをコピペで使ってもらえば問題はないんですが、ちょっとだけ解説しておきますね。使い方としては、まずrubyタグの中に「読ませたい単語」と「その単語の読み仮名」を横並びに入れます。そののちにrtタグで読み仮名だけを囲ってください。読ませたい単語の方はrubyタグの中に素で放り込んでおけばOKです。ルビの方だけrtで囲うことを忘れずに。rubyタグを入力しやすくするためにWordPressのプラグイン「AddQuickTag」を使って、WordPressの記事編集画面にボタンを追加すると使い勝手が上がりますよ。WordPressのプラグイン「AddQuickTag」でよく使うものは簡単に入力できるようにする続きを読むdelaymaniaにディレイマニアというルビを振りたい場合は、delaymaniaという単語を選択した状態でボタンを押すとHTMLタグを前後に挿入できるので、そういう形で挿入されるようにカスタマイズしておくと入力が楽です。ショートコード化してもOKショートコードを作っておくのも良いかもしれません。下記の記述をfunctions.phpに追記するとショートコードを使えるようになります。'rubyrt_shortcode');そして、記事内で下記のショートコードを使っていただければ、ルビを振った単語を表示することができます。rt="ルビ"]最後に当ブログでは、単語の横にカッコをつけて読み仮名を振るという方法も併用していきます。ルビだと文字が小さすぎて読みにくいということもあり、これは本当に読み方伝わらないだろうなと思ったものは隣にカッコ付きで載せようかなと。WordPress記事とかウェブデザイン関連記事など、明らかに専門用語慣れしている方に向けた記事は敢えてルビ付けないということもあります。過去記事もじっくりと修正していきつつ、今後の記事ではなるべく読みやすい記事作りをしていきますので、今後共よろしくお願いします。WEBサイトの制作や管理、WEBサービスの運営、iPhoneアプリ開発などをやってます。chord」のギタリストで曲も作ったりしてます。Awesome」のアイコンフォントが良い感じ!これ一つで割となんでもできる!WEBデザインブログの本文中でよく使うこれだけは覚えておいた方がいいHTMLタグWEBデザインの記事をもっと読む新着記事エンタメモーニング娘。ハマった理由と、EDM路線になってからのモーニング娘。Macなどのコンピューター系の話題など、WEBデザイナーの管理人が気になった情報を発信しているブログです。株式会社ondoホームカテゴリ。