Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!
~ 楽しく!賢く!スマート健康に! ~

ブログタイトルのフォント種別を変えてロゴ風に仕上げる方法

ブログタイトルをロゴのようにおしゃれに変更する方法があります。

フォントの種別を変えておしゃれにする方法です。

ワードプレスにての変更方法をまとめてみましたので、どうぞご参考ください。

今回使うのはgoogleFonts

今回フォント変更に使う元となるフォントは、『googleFonts』から使用します。

googleFonts はGoogleから提供されている無料のフォントサービスです。

必要なコードをwebページにコピペするだけで誰でも簡単に使用できてしまいます。

webフォント使用時に、料金や使用サイトの登録が不要な点もうれしいところ。

 

googleFontsの使い方

それでは早速使い方をみていきましょう。まずはgoogleFontsのサイトへ飛びます。

▶︎google fontsのサイトへアクセス

英語のサイトなのでちょっと面くらいますねぇ(汗)

でもとっても簡単なのでご安心ください。

『彼らの機器や装置はすべて生命体だ。』など、適当な日本語の部分にカーソルをおいてアクティブにします。

アクティブにした箇所でブログタイトルを打ってみましょう。

打ち込んだら、すぐ下のAPPLY TO ALL FONTSを押下します。※全てのフォント種別に入力した文字を適用という意味です。

すると全てのフォントが打ち込んだブログタイトルに変化!!

この中から好きなイメージのものを選んでいきます。

ん~、やはり英語対応(日本語対応していない)のフォントが大多数ですねぇ~。

決定したら使用したいフォントの右上のを押下します。

押しますと、Family Selectedというバナーらしきものが下にひょっこり出てきます。

その右側のドロワー(マイナスのくぼみ)を押下してあげると、ずいっと上にバナーが上がってきてコードが表示されます。

 

STANDARD @IMPORTのところに表示されている

https://fonts.googleapis.com/css?family=Noto+Serif+KR

これが選択したフォントのリンク先URLです。

 

Specify in CSS

Use the following CSS rules to specify these families:のところに表示されてる

font-family: ‘Noto Serif KR’, serif;

これがCSSのフォントファミリー名です。

 

上のhttps://fonts.googleapis.com/css?family=Noto+Serif+KRというフォントのリンク先URLが、functions.phpに挿入するものです。

もう一つの font-family: ‘Noto Serif KR’, serif;がstyle.cssに挿入するタグです。

注意
functions.phpは編集することで、テーマ内で使う関数の定義や管理画面の設定などをすることができるワードプレス全体に影響を与える重要なファイルです。編集前は必ずバックアップをお忘れなく。

 

 

functions.phpへ挿入方法

当ブログはテーマ『sango』を使用しています。子テーマのSANGO Childも適用していますので、この子テーマからfunctions.phpに入っていきます。

管理画面⇒外観⇒テーマの編集⇒テーマのための関数

このテーマのための関数で *functions.phpへの追記は以下にのところにフォントのリンク先URLを挿入します。

add_action(‘wp_enqueue_scripts’,’my_wp_enqueue_scripts’);
function my_wp_enqueue_scripts(){
wp_enqueue_style(‘web-font’,”https://ここに挿入する“);
}
具体的には上のコードの赤い部分に、フォントのリンク先URLの『』でくくってある部分

https://fonts.googleapis.com/css?family=Noto+Serif+KR

を貼り付けます。

 

全体でみるとこうなります。

/************************
*functions.phpへの追記は以下に
*************************/

add_action(‘wp_enqueue_scripts’,’my_wp_enqueue_scripts’);
function my_wp_enqueue_scripts(){
wp_enqueue_style(‘web-font’,“https://fonts.googleapis.com/css?family=Noto+Serif+KR”);
}

/************************
*functions.phpへの追記はこの上に

*************************/

これはつまり、Noto+Serif+KRのフォントファミリー指定がきたら、このURLに探しにいって反映させるアクションを加える、という意味。

ファイルの更新を押下してこれにてfunctions.phpの設定は終了。

 

style.cssへの挿入方法

次にロゴ(ブログタイトル)にフォントファミリー指定の設定を入れにいきます。

外観⇒カスタマイズ⇒追加CSS

この追加CSS画面に以下を挿入します。

#logo a {
font-family: ‘サンプル’,
}
この赤字部分に、指定するフォントファミリーを挿入します。つまり、

#logo a {
font-family: ‘Noto Serif KR’, serif;
}
こうなります。

きちんとserif;まで入れましょう。

これは、フォントファミリーは複数指定できるんですが、早く指定されたものから順番に適用されるシステムなので、万が一適用できない場合代わりに適用させる為の最後の砦として、Serif(明朝体)が記述されています。

フォントの大別には五種あります。

参考程度にご紹介。

Serif(明朝体)SansSerif(ゴシック体)Display(装飾書体)Handwriting(手書き風書体)Monospace(等幅書体)

さて、サンプルが変更されているのを確認して、公開を押下します。

見事に変わりましたね??

このようにフォントの種別をウェブから引っ張ってくる設定をしてしまえば、ロゴ(タイトル)だけでなく、追加CSSで色んな場所のフォント種類を変更できてしまいます。

楽しいですよね!!

最後にブログタイトルの文字の間隔や、大きさを変更する方法もご紹介。

先ほどのように追加CSS画面設定

#logo a {
letter-spacing : 0.05em;
font-size: 2rem;
font-family: ‘Noto Serif SC’, serif;
}

letter-spacingが文字の間隔、font-sizeが文字の大きさ。単位のemやremは、元となる基準値があってそれに柔軟に比率を対応してくれる便利な単位です。

実際に数字部分を変更してみてプレビューを見ながら見栄えのいい状態を作ってみましょう!!

それでは今回はこの辺で。