“フォントエフェクト”を5種類ほど導入してみました。

Ice、Anaglyph、Fire Animation、Neon、Shadow Multipleです。

エフェクトによってはある程度大きな字でないと効果が分かりにくいです。

作業は難しくないのですが、使いどころを探すのが難しい!

2rem、boldでのサンプル↓

iceの場合の「アイウエオ」

anaglyphの場合の「アイウエオ」

fire animationの場合の「アイウエオ」

neonの場合の「アイウエオ」

shadow multipleの場合の「アイウエオ」

フォントエフェクトと言われるだけに、通常使っているフォントにエフェクトをつけるだけで、フォントそのものの形は変わらないみたいです。

Googleの”フォントエフェクト”の使い方

Googleのサイトで「Get Started with the Google Fonts API」を発見し、早速使ってみました。
このページのサンプルは字のサイズや太さがあるので、エフェクトがわかりやすいです。

手順は3ステップです。

  1. header.phpにスタイルシートへのリンクをつける
  2. CSSに追加する
  3. HTMLで文を書く

header.phpにスタイルシートへのリンクをつける

外観→テーマの編集→子テーマ→header.phpにて、<head></head>の間のどこかに下記のコードを貼り付ける

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=anaglyph">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=fire-animation">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=ice">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=neon">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">

エフェクトの種類を変えたい場合は、最後尾のeffect=anaglyphの部分を他のAPI名に変更するだけです。

CSSに追加する

↓を外観→追加CSSにコピペします。

.css-selector {
  font-family: 'Rancho&effect=anaglyph', serif;
	}
.css-selector {
  font-family: 'Rancho&effect=fire-animation', serif;
	}
.css-selector {
  font-family: 'Rancho&effect=ice', serif;
	}
.css-selector {
  font-family: 'Rancho&effect=neon', serif;
	}

エフェクトのタイプを変えたいときは、上と同じように、API名を差し替えます。

HTMLで文書を書く

要素はh要素、p要素、span要素、div要素などどれでも使えます。

記事の中で使う場合は、クラス名を指定すれば、エフェクトが出るようになります。

<p class="font-effect-ice">iceの場合の「アイウエオ」</p>
<p class="font-effect-anaglyph">anaglyphの場合の「アイウエオ」</p>
<p class="font-effect-fire-animation">fire animationの場合の「アイウエオ」</p>
<p class="font-effect-neon">neonの場合の「アイウエオ」</p>
<p class="font-effect-shadow-multiple">shadow multipleの場合の「アイウエオ」</p>

これを使ってh要素(ヘッディングh1~h6)を作るなどもいいかもしれません。

私は、投入してみたものの、使いどころがなくてどうしたものかと、持て余しております。笑

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください