賢威6.2の文字フォント周りのカスタマイズまとめ|種類・サイズ・行間を変更する方法を解説 | LIVE YOUR LIFE

賢威6.2の文字フォント周りのカスタマイズまとめ|種類・サイズ・行間を変更する方法を解説

 

WordPressの数あるブログテーマの中でも特におすすめで、当サイトでも使用させていただいているのが『賢威』

業界内でもかなりの利用者が多いテンプレートで、現在ではバージョン7まで販売されています。

 

今回はその中でも、カスタマイズ性の高さや好みであるシンプルなデザインから使用している『賢威6.2』における、文字フォント周りのカスタマイズ方法をまとめました。

 

文字フォントは運営サイトの世界観や雰囲気を決定づける大切な要素です。

ないがしろにしてしまうのはもったいないので、ぜひとも当記事の解説を参考にサイトの目的に合った文字フォントを設定していきましょう。

 

賢威6.2の文字フォント周りのカスタマイズまとめ

 

今回は、文字フォント周りのカスタマイズのまとめということで、

  • フォントの種類
  • 文字サイズ
  • 行間の幅

この3つの項目をカスタマイズする方法について解説していきます。

 

特に文字フォントよってサイトの雰囲気もだいぶ変わってくるので、自身のサイトに見合ったフォントの種類やサイズ、文字の幅を設定するようにしましょう。

 

フォントの種類を変更する方法

 

まずフォントの種類を変更するためには、WordPressのダッシュボード画面から『外観』→『テーマの編集』→『common.css』を選択します。

ここでは文字どおり、サイトの共通設定を施しているCSSが記載されています。

 

続いて、記載されているコードの中から『レイアウトの初期設定』と表記されている以下のコードを見つけましょう。

 

デフォルトの状態だと上記のように記載されていますが、賢威6.2では『ヒラギノ角ゴ Pro W3』がデフォルトの文字フォントとして設定されています。

 

ここで『ヒラギノ角ゴ Pro W3』の部分を好きなフォントに変更するか、もしくは前にフォント名を追加することによって、サイト全体のフォントの変更が可能になります。

 

ぼくは『游ゴシック』という文字フォントが個人的に好みなので、以下のようにコードを変更しているので参考までに。

 

ここでは複数の文字フォントが設定されていますが、それはブラウザ上の問題などによって一番左に設定されているフォントが表示できなかった際に、次のフォントが表示されるようにするためです。

そのため、左から順に自身の表示させる優先順位の高いフォントから並べていくと良いでしょう。

 

参考までに、デフォルトの『ヒラギノ角ゴ Pro W3』と変更を加えた『游ゴシック』では、次のように表示の違いが生まれます。

 

かなり微妙な違いではありますが、その小さな差が大きな世界観の違いを生むことになります。

ぜひとも、自身の世界観やサイトの雰囲気に合ったフォントを設定するようにしましょう。

 

文字サイズを変更する方法

 

続いて文字のサイズを変更するためには、WordPressのダッシュボード画面から『外観』→『テーマの編集』→『design.css』を選択しましょう。

 

コードを下にスクロールしていくと、次のように『メインコンテンツ(本文)』と表記されている部分があります。

 

この部分における『font-size: 1.4em;』というコードが文字のサイズを表しているため、サイズを変えたいというような場合にはこのコードに変更を加えていきましょう。

 

デフォルトの1.4emでは少し文字が小さい印象があるため、1.5emや1.6emといったように、お好みのサイズの数字に置き換えていきます。

当サイトではユーザーにより見やすい文字サイズを追求していった結果、『1.7em』という文字サイズがしっくりきたので、いくつにしていいのかわからないという場合には参考までに。

 

ちなみに、デフォルトの1.4emと変更後の1.7emでは次のような見た目の違いがあります。

 

閲覧する媒体にもよりますが、さすがに文字サイズが1.4emでは見にくいと感じるユーザーがいてもおかしくはありません。

今あなたがご覧になっている文字サイズが1.7emですので、当サイトを参考に自身のお好みで文字サイズを設定してみてくださいね。

 

文字の行間を変更する方法

 

次に文字の行間を変更するためには、同じくWordPressのダッシュボード画面から『外観』→『テーマの編集』→『design.css』を選択しましょう。

 

ここでは先ほどと同様に、『メインコンテンツ(本文)』の部分に記載されているコードに手を加えていきます。

行間の幅を変更するためには、次のようにここにあるコードに『line-height』で値を設定していきましょう。

 

ぼくは好みでline-heightを『1.6em』に設定していますが、わかりやすいように行間の幅を『3.0em』で設定した場合と比べてみましょう。

 

このように、基本的に行間の幅は広すぎるとユーザーにとって読みづらい文章になってしまいます。

ですので基本的には1.6em付近で、自身のお好みで行間幅の数値を設定してみてくださいね。

 

最後に

 

以上、賢威6.2の文字フォントの種類・サイズ・行間のそれぞれをカスタマイズする方法を解説しました。

 

たかが文字やフォント程度と思うかもしれませんが、されど侮ってはいけない部分でもあります。

ブログ記事とはすなわち文章であることに変わりはないので、ライティングなどのスキル面はもちろんのことながら、特に『見栄え』の部分を意識できるかどうかで大きな差が生まれていきます。

 

フォントの種類や大きさ、そして行間の幅など細かい部分の違いが、サイトの世界観を表現していく上での大きな差になっていくので、ぜひとも今回を機に設定を見直してみましょう。

 


MAIL MAGAZINE

 

 

     

公開日:2017/06/23 更新日:2017/07/26

コメントを残す

サブコンテンツ

TO THE TOP