Google Web Fontsの使い方。サイト名をロゴっぽくしたよ。

STINGER5のヘッダーの幅を画面いっぱいに広げたように、最近、サイトのカスタマイズにはまってます。

今回は、ロゴ画像を使わずにサイト名をロゴっぽくする方法をご紹介します。

これといったロゴ画像がない

サイトのコンセプトはしっかりあるものの、これといったロゴ画像がないんですよね。

そして、ロゴ画像を作ろうとも思っていません。シンプルなサイトが好きなので。だから、ずっとSTNGER5をデフォルトで使っていました。

でも、ロゴ画像がないと味気ないんですよね。そこで、Google Web Fontsを導入してみました。

Googleフォント…イイね!

実験的に使ってみたんですが、けっこうハマってしまいました。Webフォントと組み合わせればサイトの軽量化にもなるし、一石二鳥です。

お気に入りは「Monofett」というフォントです。しばらく、これにしようと思います。

image

Googleフォントの導入方法

まずは、Google Fontsのページへ。

image

 

使いたいフォントを選びます。タブを切り替えると文字の大きさも変わるので、使い心地も確かめることができます。

image

 

文字の大きさの違いはこんな感じ。

image

 

ロゴっぽいフォントがたくさんあります。今回は、オシャレなサイトにも合いそうな「Great Vibes」というフォントを導入してみましょう。

Googleフォントを呼び出すコードをヘッダーに追加

下記のボタンをクリックします。

image

 

スクロールしていくとコードがあるので、それを追加します。

image

 

ワードプレスの管理画面から、外観→テーマの編集と進み「header.php」を開きます。

任意の場所に先ほどのコードを追加。Stinger5の場合はこんな感じになります。

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/normalize.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>

css(スタイルシート)にコードを追加

次に、このフォントを使いたい箇所にもコードを追加します。

  • サイト全体の文字を変えたい
  • タイトルだけ変えたい
  • 中身出しだけ変えたい

など、用途に応じて追加できます。

今回はロゴを変えてみましょう。外観→テーマの編集と進み「style.css」を開きます。

任意の場所にGoogle Fontsのページにあったもう一つのコードを追加します。

下記のコードです。

image

 

Stinger5の場合はこんな感じになります。

header .sitename a {
	color: #333;
	text-decoration: none;
	font-weight: bold;
	padding: 0 10px;
        font-family: 'Great Vibes', cursive;
}

すると、こんな感じにロゴっぽくなります。

googlefonts

 

デフォルトのデザインに飽きた方に参考にしてもらえれば嬉しいです!

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

カテゴリーWEBフォント

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!