ワードプレス便利帳

WordPressの使い方を初心者から上級者までわかりやすく画像で解説

© ワードプレス便利帳 All rights reserved.

thum_mojiiro

20137/8

文字色をCSSで変更しよう(CSS初級)

投稿記事の文字色を変えよう

誰もが一度はぶつかる壁。

文字の色ってどうやって変えたらいいの?

HTMLの知識がある人ならば<font color="#FFC0CB">って書けばいいんだよ!となりますが
毎回これを記述するとかなり手間だし、他のページでさっきの色を使いたい!と思ってもカラーコードを覚えておくのは大変なのでわざわざコピーしにいかないといけないですよね。
なのでよく使う文字色はCSSで制御してやります。

まずは文字の色をピンク色にするスタイルを定義してやります。

サイドバーの外観>テーマ編集。テンプレートの中身の一番下に「スタイルシート(style.css)」というファイルがあるのでそれをクリックして開きます。
※使用しているテーマによってはファイル名が異なる場合があります。

mojiiro1

そのなかに記述されているコードでホームページのレイアウトが出来上がっているといってもほぼ過言ではありません。わからないうちはくれぐれも他のコードを編集しないようにしてください。そのためにレイアウトが崩れて戻せなくなったということがよくあります。

ではそこにいざコードを記述していきます。今回は文字の色をピンク色にしたいので以下のように記入します。

.momoiro{color:#FFC0CB;}

color:は文字色に関する記述で、#FFC0CBは実際の文字色となるカラーコードです。
つまり文字にクラス:momoiroを適用してやるとその文字はピンク色の文字になるということです。

mojiiro2

画像に2パターン書いていますが、どちらの形式で書いても大丈夫です。
記述ができたら[ファイルを更新]をクリックしてください。

実際に適用してみます。

記事の投稿画面に戻り、<span class="momoiro">ももいろにしたい文字列</span>と入力します。
そして[公開]をクリックすると。

mojiiro3

文字の色がピンク色になりました。

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

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

gsvgadvg

20172/17

カスタムフィールドでカレンダーを自作【プラグインいらず】

カスタムフィールドだけでカレンダーを自作 プラグイン不要というのはカレンダープラグインを使わずという意味であってカスタムフィールド系のプラ…

20161102200516

201611/2

ループの中に罫線を追加する方法

ループ出力の中に区切り線を追加する ブログや製品・商品情報として、1行ごとに罫線を追加したい、というデザインもあると思います。 しかしル…

20161017154512

201610/17

『WordPress importer』と『Search Regex』を使って画像ごと記事の引越しを行う

『WordPress importer』について WordPressからWordPressへ投稿記事の引越しに関して、WordPressは…

bsfvgs1s

201610/6

WordPressの記事・固定ページを親ごとに出力する。

投稿・カスタム投稿・固定ページのループ出力について WordPressではquery_postsやWP_Queryなどのループを使うとペー…

20160801185626

20168/1

WordPressのtitleタグのデザインを変更する

WordPressの見出しに工夫を加える WordPressは用意されたテーマを使うにしろ、独自テーマを使うにしろ、共通したページのレイア…

ページ上部へ戻る