【font】フォントについておさえるべきポイントまとめ【CSS】

webフォントとデバイスフォント、見え方の違い

サイトを作る際にサイトに合ったフォント選びをすることが大切、という話をよく見かけます。
こちらのサイトでもフォントファイルをアップロードしてサイトに導入する方法やwebフォントの設定方法などを紹介してきました。よく紹介されているフォントはGoogleフォントやモリサワフォント等、設定をしなければいけないものです。
ワードプレスやCSSに詳しくないうちは特に設定せずに進めてしまいがちですが、やはりデバイスのフォントを使うと端末によって見え方に違いがある!ということが起こってしまいます。
その点webフォントはネット上から読み込むため、誰でも同じフォントで見ることが出来ます。
自分が見せたい見せ方をするためにもフォントの設定はしっかりしておくべきです。

続きを読む

【wordpress】WEBサイトにとって最適なフォントサイズとは?【font-size】

フォントサイズとは

フォントサイズ=印刷物やWEBで書かれた文字の大きさの事です。
よく見かけるフォントの単位はptやQかと思います。
SEOにフォントサイズは関係ないと思われそうですが、あまりに小さすぎる場合など適切な大きさでない場合、検索エンジンの評価を下げてしまう可能性もあるようなので確認しておき、読みやすいサイト作りを心がけましょう。

続きを読む

【wordpress】フォント別のサイトの印象【選び方】

フォントが与える印象

フォントには主にゴシック体・明朝体がありその他にも手書き風に作られた文字など数多くのフォントが存在します。
Googleフォントの紹介などで、おすすめのフォントを書かせてもらってきましたが、それぞれの特徴を整理しておきたいと思います。


ゴシック体と明朝体の違い


フォント1

ゴシック体はうろこの無い、縦の線と横の線が均一な見出しなどによく使用されるフォントになります。
遠くから見ても見やすいなど目立つフォント、という特徴があります。
また親近感があり、楽しそう、というイメージを与えることも出来ます。
その中でも角ゴシック・丸ゴシックがあり、丸ゴシックの方がやさしい印象になります。
目立たせたいワードはゴシック体で太くするとさらっと見たときにも目にとまりやすくなります。

明朝体は長文になっても読みやすいフォントになります。
ゴシック体とは違いうろこのある、縦が太く横が細いフォントです。
また高級感があり、和風なイメージや繊細・上品なイメージを与えることも出来ます。
モニターによってはゴシック体の方が読みやすく、長文であってもゴシック体が使われることがあるようですが、印刷物では書庫や新聞など文字の多いものによく使われています。


手書き風やイメージから作られたフォント


フォント2

最近自分がよく使うuuuuubefontとラノベPOPですが、どちらも手書き風とゴシック系のふぉんとであるため、長文にはあまり使用しませんが、目立たせたい時などにはとても便利です。
やはりシステムの標準フォントなどよりはフリーフォントの中から探す方が見た人に印象付けられるフォントが選べると思います。

続きを読む

【wordpress】フォントの太さについて【ウエイト】

font-weightについて

font-weightとはフォントの重さ=太さを表しています。
見出しやタイトルなどで立たせたい物を太くしたり、本文中でもフォントのQ数などは変えずに太さで違いを出して強調するなど、簡単に伝えたいことを目立たせることが出来るので、太さを変更する場面は多いと思います。

フォントごとに選べるウエイトが異なる場合もありますが、
EL、L、R、M、DB、B、H、Uという風な種類があります。

見出しなどにはM(ミディアム)が多く、本文にはL(ライト)やR(レギュラー)が多いです。
また多くの人が見慣れていておすすめと紹介したヒラギノはW0~W9と特殊な単位になります。

続きを読む

【wordpress】日本語フォントのおすすめプラグイン【文字変更】

「Japanese font for TinyMCE」でフォントを追加

ワードプレスのサイトのフォント変更の方法をいくつかまとめており、以前は「Easy Google Fonts」というプラグインをご紹介しました!
こちらはGoogleフォントが簡単に使えるようになるプラグインで、カスタマイズから本文や見出しのフォントを変更する物でした。
今回は記事を書く時ビジュアルエディタのフォント選択に特徴のある日本語フォントを追加できるプラグイン、「Japanese font for TinyMCE」についてです。

日本語フォント

続きを読む

【wordpress】サムネ映えする効果的なフォント【記事作成】

サムネイル画像について

記事を書く時や動画を作成した際など、
トップのサムネイル画像にタイトルや簡単な内容を書くと思います。
記事内であれば可読性の良い文字にするべきですが、
サムネイル画像は読みやすさよりインパクト優先でいいと思います。
またサムネイルはワードプレス内ではなく、
画像を作るソフトで作成しメディア欄にアップロードするだけです。

そのため、ワードプレス内に使ったフォントがなくても、
見る側の人もそのフォントを持っていなくても、
自分が見せたい見せ方が出来ます。

なので、サイト上でのフォントデータの使い方がわからない人でも簡単に見る人の印象に残る文字を使うことが出来ます。

まずテンプレートで自分のサイトに合いそうなフォントで作られたものを探し、サムネイル内のフォントをこだわれば、見に来る人の印象に残りやすいサイトに出来るかと思います。

続きを読む

【wordpress】自作フォントを使ってみる【CSS】

フォントは自分で作れる?!

ゴシック、明朝、特殊なデザインがされたもの…などなど本当に数多くのフォントが存在しますよね。
整った形の方が可読性も考えられているものと思いますが、さらに自分らしさを出すために自分だけのフォントを作る…ということも出来ます!
漢字も使えるものは大変ですが、ロゴや、ひらがな・カタカナ・アルファベットなら作りやすいのではないかと思います!
今回は自分でフォントを作る際の流れやよくおすすめされているソフトなどをご紹介します。

続きを読む

【wordpress】フォント変更も簡単?「Easy Google Fonts」について【CSS】

コード不要!プラグイン「Easy Google Fonts」でのフォント変更について

前回まではテーマエディタのCSSファイルでの
「フォント読み込み・フォント変更について」の紹介をしました。
細かい調整をしていきたい場合はやはり、
CSSなどでコードを使った編集をしていくのが一番良いと思うので、
今後色々やっていきたい場合はそちらを覚える必要があると思いますが、
とにかく簡単に出来ればいい!という場合はやはりプラグインがわかりやすいかと思い調べてみることにしました。

フォントプラグイン

今回は「Easy Google Fonts」というプラグインを使ってみました。

続きを読む

【wordpress】フォントにCSSがあたらない?【font-family】

font-familyのCSS

基本は以前フォント変更フォントスタイルにまとめた通りやbodyに指定のコードを入れるとフォントの指定ができます。
今回はフォントファミリーやフォントスタイルの変更をした際にうまくいかない場合、どんな原因があるか調べてみました。

続きを読む

【WordPress】おすすめのGoogleフォント・PC標準フォント【10選】

サイトのフォントを決めるポイントとは?

Googleフォントには数多くのフォントがあります。その中でも人気と言われているフォントや、使ってみたいなと思ったフォントを今回ご紹介します。

選ぶときのポイントは
・自分のサイトの内容と合ったフォントか
・本文は読みやすいフォントであるか
を考えることが重要です。
ヘッダーなどは印象に残りやすいインパクト強めな見た目重視で選び、多少読みにくくても問題ないことが多いですが、メインの文章のフォントは読みやすさを重視すべきです。
そのため場所によって使い分けもいいと思います。

続きを読む