webサイト

フォントを少し大きくしたい?CSSをいじってみよう

  • このエントリーをはてなブックマークに追加

WordPressで記事を書いていくと、少し文字の大きさや色を変えたいということが出てくるかもしれません。はじめてCSSをいじってみる時の概要を説明します。(Windows10でブラウザにChromeを使った場合の説明です。)

夢子ちゃん
夢子ちゃん
自分の記事の文字の大きさをちょっと大きくしたいんだけど。どうするといいのかしら?
みぃさん
みぃさん
CSSっていうのをいじるんだけど、最初にいろいろ説明するとパンクしちゃうから今回はちょっとだけ説明するね。

CSSって何?

CSS(Cascating Style Sheets)はWebページの文字の色や大きさ、画像の大きさなどの見栄えを定義する言語です。
Wordを使っている人であれば、Wordのスタイルのようなものと思ってもらえればよいと思います。

CSSがどのような感じで設定されているのか少し見てみましょう。ブラウザにChromeを使っている場合、右クリックして「検証」を押してください。

そうすると、右のほうにいろいろ表示が出てきますが、赤枠で囲った「Style」の部分が具体的なCSSの設定です。

「Sources」からファイルをたどると、実際のCSSファイルの記述内容を確認することもできます。

夢子ちゃん
夢子ちゃん
すごく難しそう・・・
みぃさん
みぃさん
普通のテーマはcssをいじらなくても大丈夫だけど、理解のために少しだけ説明するね。
今回は「そんな感じなんだー」って何となく分かれば大丈夫だよ。

ちょっとだけいじってみる

テーマカスタマイザーから編集してみる方法を説明します。

「外観」→「カスタマイズ」→「追加CSS(テーマがマテリアルの場合)」を選択し、以下のような画面に移ってください。

左側の赤枠で囲った箇所が実際のCSSを記述する部分です。

右側でWebサイトが表示されている箇所をクリックして変更したいページに移ります。

このままではどう変えてよいのかわかりにくいので、右クリックして「検証」を押します。

そうすると、pというタグに対するスタイルだというのが分かります。上の赤枠の通り、.contentクラスのpタグらしいというのが分かるので、

「Styles」から+ボタンを押して無理やり以下のようなスタイルを追加してみました。

.content p{
font-size:18pt;
}

上記は、「フォントの大きさを18ptというサイズに変更しますと」いう指定です。

このように設定すると上の図のように文字の大きさが大きくなったことが分かると思います。

左のCSSを記述を入れる枠に、うまくいったスタイルを記述して上部の公開ボタンを押せば、実際のテーマに反映されます。

見た目を変更するときは公開しているWordPressを修正するのでなく、ローカル環境で試してみてからにしたほうがよいと思います。

他のサイトを参考にしてみる

ほかのサイトでも右クリックの検証を使って確かめることができるので、気になるサイトがあれば確認してみると参考になるかもしれません。

まとめ

夢子ちゃん
夢子ちゃん
動くのはわかったけど、WordPressとかテーマとか考えた人はすごいねぇ
みぃさん
みぃさん
今回の説明だけでは難しいし、HTMLやCSSの知識が必要になるけど、自分でカスタマイズするのもたのしいと思うよ

広告

  • このエントリーをはてなブックマークに追加

コメントを残す

*

CAPTCHA