Web関連 WordPress

ブログを改良しよう【フォント編】

投稿日:2017年3月14日 更新日:

どうも、ヨシです。
今のサイトの現状ですが、PC版がこちら。

スマホ版がこちら。

うむ、The シンプル!
シンプルは嫌いじゃないけど、もう少し自分色を出したいな。
とりあえず、細かな所から変えて行きたいと思います。

フォントを変える

今のPCのフォントは「明朝」系ですね。
とりあえず一番しっくりくるのはメイリオだったんでCSSでメイリオに変えましょう。

「外観」→「テーマの編集」をクリック。

スタイルシートになってるか確認したら「ShiftF」で検索画面を出して中に「font-family」と記入したらEnterキーを押す。

「body{font-family…」を見つけたら中のフォントを消去。

続いて「メイリオ, Meiryo, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”, “MS PGothic”, sans-serif」を記入する。

※メイリオだけでもいいのですが対応してないブラウザの為に、次は「Meiryo」を表示、それもないなら…という形になってます。

記入が終わったら左下の「ファイルを更新」をクリック。

補足

※ソースを見るとなにかおかしい表記がある事に気付きましたか?
フォントの中に「”(ダブルクォーテーション)」を使ってないものがありますね。
これは「総称ファミリー」といわれ、OSに標準で登録されてるフォントです。
このフォントは”で閉じなくても大丈夫ですよ。

サイズを変える

フォントのサイズも少し小さいかなと思ったので、少し大きくしましょう。

先程と同じスタイルシートの「body{font-family…」の下に「font-size」があるのでそのサイズを変更する。

ここで「rem」ってなんぞや?という方の為に簡単な説明をします。

body等でフォントのサイズを指定していれば1remがそのサイズになっちゃうというレスポンシブサイズなんですねー。

だから「bodyに16px」していれば「1rem=16px」になるし、スマホで見た時はスマホの規定フォントサイズになる訳です。なので僕の1.4remは18pxなんで25.2pxというサイズになる訳ですね。ちなみにbodyに何も記入されていないと16pxになるみたいです。

「俺は16pxでいいから1remに設定して、下のpx消しちゃってもいいよな!」

駄目です。16pxでもちゃんと「font-size:16px;」と書いて下さい。

なぜremとpxの両方表記しないといけないのかは先程のフォントを変えた時の説明を読めば分かりますよね?

IE8以下はremに対応してないので、それ以外のブラウザーの為にしっかりとpxで設定してあげましょう。

見出しを分かりやすくする

もうすでに適応してるので分かりにくいかもしれませんが、見出しに青いボーダーが引かれてますね。
これもテキストモードで一回一回色を付けるのも中々手間なのでCSSでまとめて変えちゃいましょう。

「外観」→「テーマの編集」からスタイルシートの一番下に

と記入すればOKです!

まとめ

いかがでしたか?
ちょっとした事ですが、こうしてユーザビリティを意識していくのも大事なんでしょうね。
僕のブログもコツコツと改良頑張ります!

読んで頂きありがとうございました。

-Web関連, WordPress
-, ,


comment

メールアドレスが公開されることはありません。

jpeg/png/gifのみ

関連記事

ワードプレスでブログを始めよう

wordpressでブログを始めよう

どうも、ヨシです。 「wordpressでブログをしたい!」ただその一心で僕もこのブログを始めました。 ただ、どうやってすればいいの?って方、たくさんいると思います。(私が思ってます) wordpre …

記事を読む

コピペで使える!STINGER8のお手軽カスタマイズ集

どうも、ヨシです。 STINGER8を使っていく上でこれは知っておいた方がいいと思うことを紹介していきます。 まだまだ新しいテーマなので解決策が載ってるページが少ないんですよね。 中には間違った情報も …

記事を読む

表(テーブル)が枠内から飛び出してしまう

どうも、ヨシです。 2017年2月15日に「wordpressでブログを始めよう」という記念すべき1つ目の記事を公開しました。 普段はPCで記事を確認してるんですが、昨日はスマホで自分の記事を確認した …

記事を読む

WordPressから煽られた件

どうも、ヨシです。 さっきサイトのレイアウトを変えてた時にワードプレスの右上のコメントマークが光りました。 ここが光ることなんて滅多に無く、自分のページに自分のリンクを貼った時に「リンク貼られたよ!誰 …

記事を読む
アドセンスのアップグレードの方法

【アドセンス】ホスト型アカウントからアップグレートする

どうも、ヨシです。 今回は「過去にYoutubeでAdsenseアカウントを取っており、最近自分のページにAdsense広告を扱いたい方」のご説明です。 このページを見られる方は、既に自分のサイトを持 …

記事を読む

プロフィール

初めまして、ヨシだよ!
このブログはだいたい音楽やゲーム、アニメ、面白い動画なんかをメインに紹介してたまに自分のアピールをするよ。
それからサイトをちょくちょくいじるので、基本エラー画面が僕のトップページだと思って欲しい。
今WordPressを勉強中なので、便利なコードやプラグインなんかを自分で使ってみて良かったら紹介するよ!

pagetop