Wordpress

Webフォントを自動生成されるタイトルに加える・切り替える方法【WordPress】【jQuery】

  1. HOME >
  2. Wordpress >

Webフォントを自動生成されるタイトルに加える・切り替える方法【WordPress】【jQuery】

タイトルにWebフォントを加える・切り替える方法

Webフォントが切り替わる

  • WordPressで自動生成されるタイトルの前に好みのWebフォントを追加したい。
  • タイトルをクリックするとフォントが切り替わるようにしたい。
  • 調べたけれど、HTMLを編集して属性値を表示する方法しか見つけられなかった。

ココがポイント

結論:

  1. jQueryでウィンドウを開いたときに、クラスを追加する。
  2. クラスを追加したときに、CSSでWebフォントを表示するようにする。
  3. 追加したクラスを取り除くことで、フォントの表示を切り替える

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、WordPressで自動生成される
カテゴリーや目次のタイトルの前に、
Web上で装飾文字として使えるWebフォントを、
「追加したい」
「追加したWebフォントをクリックで切り替えたい」

そのように思ったことはありませんか?

私もWebフォントの追加と表示の切り替えをしたいと思い、いろいろ調べました。

<style>
  #TestBtn2:before {
    font-family: FontAwesome;
    content: attr(data-fa);
  }
</style>
<button id="TestBtn2" data-fa="&#xf06e;">button</button>

(「[CSS] Font Awesome を CSS 上から attr() で指定する方法」より引用。)

上のコードが調べた記事にありましたが、
指定した属性名の属性値表示する
この情報しか見つかりませんでした。
(jQueryでattrを使い、属性値は変更することができる。
よって、この方法でも文字の表示切り替えができる)

しかし、この方法は、
HTMLを編集しなくてはならず、
WordPressでは、
使えるところが限定されます。

そこで、今回紹介するのが、
classの追加・削除を命令することで
表示する文字を切り替える
というものになります。

この方法は、CSSとJavaScriptだけの修正で済むので
WordPressでも使える方法になります。

 

1.Webフォントとは

Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントのことをさします。
サーバーやインターネット上に書体があるので、閲覧するPCの環境に左右されずに、目的のフォントを表示することができます。

そこで、よく使うアイコンをWebフォントとして提供してくれているのが、「Font Awesome」になります。

もっと詳しく

 

2.「Font Awesome」とは

「Font Awesome」とは、サイト上で使われるようなさまざまなアイコンWebフォントとして利用できるようにしたものです。

フォントとして登録されているので、CSSで大きさや色などを変更可能
拡大・縮小しても、画像のようにあらくならず、きれいに表示できます。

「Font Awesome」を利用するには、フォントを読み込む必要があります。
head 要素内に下記コードを入れる。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

もっと詳しく

 

3.WordPressでjQueryを追加できるプラグイン

 

4.Webフォントをタイトルに追加・クリックで切り替える方法

4.Step1 idとclassの値を確認

①「ボタンとなるブロックの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ページを開いたときに、クラスを追加し、そのクラスを指定して文字を追加する。

以上になります。ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.