【WordPress】部分的にフォントや装飾を変える方法【CSS】

記事内のフォントについて

ワードプレスで作られたサイトはテンプレートを使うとすでにフォントは設定されているので、こだわったフォントを使わない限りサイト全体のフォントは変えないことも多いと思います。
しかし記事を作っていくなかで、見出しのフォントを変えたい、強調したい部分だけ装飾したい、ということも出てくると思います。今回はそういった部分的にフォントの装飾をしたい時の設定方法です。

続きを読む

【WordPress】おすすめフリーフォント紹介【無料10選】

理想のフォントでデザインを!

ワードプレスでサイトを作成するとテンプレートの設定のフォントをそのまま使うことが多いと思いますが、デザインを作っていくと文字にもこだわりたい!と思うこともあると思います。
Googleフォントなどのウェブフォントもたくさん種類はありますが、無料でDL可能なフリーフォントにもとてもいいフォントがたくさんあります。
商用利用可能のもの、サイト利用・印刷物への使用もOKなものなど色々なところに使えるものも多いです。
今回はフリーフォントの中でもおすすめなものをいくつかご紹介します!
※規約が変更されている場合もありますので使用する際は配布サイトの説明をよく読んでご利用ください。

続きを読む

【WordPress】サーバー上にアップするフォントを置いて変更する【CSS】

フォントをサーバー上に置く

以前ウェブフォントの使い方について紹介させて頂きましたが、今回は自分のサーバー上にダウンロードしたフォントをアップし、使用する方法です。

おおまかな流れは
→フォントをダウンロード
→形式をWOFFに変換する
→サーバーにアップロード
→CSSでフォント設定
→使いたい部分でフォント指定
という作業になります。

続きを読む

【WordPress】見出しのデザインやフォントでわかりやすいサイトに【CSS】

見出しのフォントや色を変更する

ワードプレスのサイトでは↑の赤い文字のように「見出し」というものがあり、H1からH6までの数字があります。
それぞれデザインを変えることもでき、見出しがあると記事も読みやすくなるため、読みやすいページを作っていくことで読んでくれる人が増え、アクセスアップにも繋げていけます。
またGoogleの検索エンジンも見出しに入れたキーワードも重要としているため、見出しに検索されたいキーワードを入れることによってSEO対策のひとつにもなります。
見出しはフォントの大きさだけでなく色や形も変更できより見やすいデザインを作ることが出来ます。

続きを読む

【WordPress】フォントカラー(文字色)の変更で見栄えよく!【CSS】

ワードプレスの文字色を変える

サイトの見やすさにとって重要な項目のひとつのサイトのフォント。
前回まではフォントの変更方法やよくあるフォントについての疑問についてのまとめ記事を公開していましたが、今回は文字色の変更についてです。
サイト全体に使われるフォント、大きさ、表示色でそのサイトの印象もかなり変わりますし、より重要な文章やリンクは他とは違った形にしてユーザーの目を引くものにするべきです。

続きを読む

【WordPress】プラグインなしのフォントの変更でより簡単に読みやすく!【CSS】

ワードプレスのフォントを変える方法

ウェブフォントはサイト内で使用可能なフォントを簡単に追加できる人気の方法です。自分でファイルをアップすることも可能ですが、ウェブフォントなら自分のサーバー上になくてもいろいろなフォントが選べるようになり、ファイルが更新された時も提供者側が更新したバージョンに自動更新されることになります。

Google FontsはGoogle提供の無料ウェブフォントサービス。様々な言語のフォントにも対応しています。
Adobe Edge web FontsもAdobeによるフォントで無料で利用できます。
今回はGoogle Fontsを例にして話を進めていきます。

続きを読む

【wordpress】書き出す文字の大きさを指定する【PHP】

PHPファイルの文字の大きさ

PHPは文字列を出力、ブラウザが拾って表示していることになりますので、特に何も指定しなければブラウザの設定で大きさが決まります。
そのため見るブラウザによって変化したり、小さすぎて見づらいなど問題が起こる場合があります。

続きを読む

【WordPress使い方】PCとスマホでフォントが変わってしまう?【疑問】

ホームページのフォント

見やすいと思ってもらえるホームページにするためには文字のフォントや大きさが重要だと思います。
初めてワードプレスでホームページを作りだした頃に、PCとスマホでフォントが異なる、という状態になることが多かったので、そんな疑問が出てきた際に参考にしてみてください。

続きを読む