
Webフォントが切り替わる

- WordPressで自動生成されるタイトルの前に好みのWebフォントを追加したい。
- タイトルをクリックするとフォントが切り替わるようにしたい。
- 調べたけれど、HTMLを編集して属性値を表示する方法しか見つけられなかった。
ココがポイント
結論:
- jQueryでウィンドウを開いたときに、クラスを追加する。
- クラスを追加したときに、CSSでWebフォントを表示するようにする。
- 追加したクラスを取り除くことで、フォントの表示を切り替える。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

皆様は、WordPressで自動生成される
カテゴリーや目次のタイトルの前に、
Web上で装飾文字として使えるWebフォントを、
「追加したい」
「追加したWebフォントをクリックで切り替えたい」
そのように思ったことはありませんか?
私もWebフォントの追加と表示の切り替えをしたいと思い、いろいろ調べました。
<style> #TestBtn2:before { font-family: FontAwesome; content: attr(data-fa); } </style> <button id="TestBtn2" data-fa="">button</button>
上のコードが調べた記事にありましたが、
指定した属性名の属性値を表示する
この情報しか見つかりませんでした。
(jQueryでattrを使い、属性値は変更することができる。
よって、この方法でも文字の表示切り替えができる)
しかし、この方法は、
HTMLを編集しなくてはならず、
WordPressでは、
使えるところが限定されます。
そこで、今回紹介するのが、
classの追加・削除を命令することで
表示する文字を切り替える
というものになります。
この方法は、CSSとJavaScriptだけの修正で済むので
WordPressでも使える方法になります。
目次
1.Webフォントとは
Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントのことをさします。
サーバーやインターネット上に書体があるので、閲覧するPCの環境に左右されずに、目的のフォントを表示することができます。
そこで、よく使うアイコンをWebフォントとして提供してくれているのが、「Font Awesome」になります。
もっと詳しく
2.「Font Awesome」とは
「Font Awesome」とは、サイト上で使われるようなさまざまなアイコンをWebフォントとして利用できるようにしたものです。
フォントとして登録されているので、CSSで大きさや色などを変更可能。
拡大・縮小しても、画像のようにあらくならず、きれいに表示できます。
関連
「Font Awesome」のリスト記事:
「Font Awesome」を利用するには、フォントを読み込む必要があります。
head 要素内に下記コードを入れる。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
もっと詳しく
「Font Awesome」を利用できるようになるまでの詳しい手順:
3.WordPressでjQueryを追加できるプラグイン
自作のjQueryを追加することができるようになるプラグインをインストールする方法:
4.Webフォントをタイトルに追加・クリックで切り替える方法
4.Step1 idとclassの値を確認
下のリンクを参考にして、
①「ボタンとなるブロックのid」②「ボタンのテキスト(タイトル)のclass」を確認してください。
参考
4.Step2 CSSを追加
.add::before{ font-family: 'FontAwesome'; content: '¥Unicode'; } .change::before{ font-family: 'FontAwesome'; content: '¥Unicode'; }
上のCSSコードをコピーして、新しいCSSを追加。
「Unicode」部分にそれぞれのWebフォントの¥からはじまる値を入れる。
セレクタ | Webフォントを表示するタイミング |
.add::before | ページを開いたときに追加したいフォントを「Unicode」にいれる |
.change::before | ボタンをクリックしたとき切り替えたいフォントを「Unicode」にいれる |
2行目:font-family: 'FontAwesome';
ここで、「Font Awesome」のアイコンを表示できるようにしている。
3行目:content: 'Unicode';
ここの「Unicode」を変えることで、アイコンを変更できる。
4.Step3 JavaScriptを追加
jQuery(document).ready(function( $ ){ $('#id_1 .class_2').addClass('add'); $('#id_1 .class_2').on('click', function(){ $(this).toggleClass('add'); $(this).toggleClass('change'); }); });
「3.WordPressでjQueryを追加できるプラグイン」でインストールした
「Custom CSS & JS」から新規のJavaScriptを作成して上のコードをコピペ。
「4.Step1 idとclassの値を確認」で調べた属性値を、それぞれのセレクタにいれる。
2行目3行目の「id_1」=「①「ボタンとなるブロックのid」」、「class_2」=「②「ボタンのテキスト(タイトル)のclass」」に置き換える
参考
JavaScriptのそれぞれのコードの意味
1行目:jQuery(document).ready(function( $ ){
ドキュメント(WebページのHTML)を読み込み終わったら、「function」以下の命令を実行する。
これはjQueryを動かすコードなので触らない。
2行目:$('#id_1 .class_2').addClass('add');
<id="id_1">その中の<class="class_2">タブにclass="add"を追加する。
3行目:$('#id_1 .class_2').on('click', function(){
Web上の<id="id_1">内の<class="class_2">で指定してあるブロックをクリックしたときに次の関数を実行。
4行目:$(this).toggleClass('add');
クリックしたブロックのclass="add"を、クリックするたびに追加・削除を繰り返す。
5行目:$(this).toggleClass('change');
クリックしたブロックのclass="add"を、クリックするたびに追加・削除を繰り返す。
以上で、タイトルにWebフォントを加える・切り替えるCSSとJavaScriptが適用できました。
この方法は、Webページを開くと「add」をクラスに追加し、
このclass属性値「add」をもつブロックの前にフォントを追加という命令になってます。
よって、「add」を取り除くと、最初に追加したフォントも取り除かれるという仕組みで、
表示の切り替えを行っています。
5.目次をクリックすると項目がたたまれたり、開いたりする。
目次をたたんだり、開いたりしたい方は次の記事を確認してください。
6.どの要素にもWebフォントを追加できる方法
空の要素を追加することで、擬似要素を適用できない要素にもWebフォントを追加できるようにしています。
もっと詳しく
まとめ
お疲れ様でした。
今回は、WordPressで自動生成されるタイトルの前にWebフォントを追加し、
その表示を切り替える方法について解説してきました。
ココがポイント
Webページを開いたときに、クラスを追加し、そのクラスを指定して文字を追加する。
以上になります。ご一読いただきありがとうございました。