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ページを開いたときに、クラスを追加し、そのクラスを指定して文字を追加する。
以上になります。ご一読いただきありがとうございました。
