好きなもの、好きなだけ、盛り合わせ

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

      2017/03/03

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

 

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

カテゴリー WEBフォント

注目 初めての就職・転職で失敗しないためのおすすめサービス一覧!

注目 【dマガジン】初回31日間無料で170誌以上の雑誌が読み放題!

注目 「freee」と「MFクラウド確定申告」を比較!おすすめは!?

この記事が気に入ったらいいね!しよう

最新情報をお届けします

この記事を書いた人:シェフ

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

閉じる

CLOSE

アーカイブ

CLOSE