ワードプレスのCSSスタイルをカスタマイズして文字の見た目を変えてみる

タイトルの大きさと色を変えてみる

まず上記のタイトル部分のクラスはpost-titleとなっています。

FTPソフトウェアでwp-content/themes/whitenote/style.cssをダウンロードの上、該当のクラス指定部分を見てみます。
※ワードプレスの管理画面＞外観＞テーマエディターでも直接編集することが可能です。

.post-title a { color: #111; }

という設定が該当の行にあることがわかりましたので、下記のように記載を変更してみます。

.post-title a {
font-size:20px;
color: #888;
}

こちらを上書き保存し、同じ位置にFTPでアップロードされてください。

文字のサイズが小さくなり、色が薄くなりました。
※キャッシュを削除の上見ることで変更が反映されることもあります。

font-sizeは文字サイズ
colorは文字色を示します。※HTMLの色は＃ｘｘｘｘという16進数での特殊な指定方法をいたします。

その他文字関連でよく使われる指定に下記のようなものがございます。

line-height 行間を示します
border 枠線を示します　solid 1px #888 のように線のタイプ、太さ、色で示します

CSSのスタイルの指定は最も後に指定されたものが優先されます。Style.cssに指定したものが反映されない場合、どこか別の個所でより後に別のスタイルが指定されている場合もございます。

この場合、前に指定されていても最優先でスタイルを適応されるには!important を付与します。

例
.post-title a {
font-size:20px !important;
color: #888 !important;
}

文字サイズの指定単位は主に、px,em,%の三つがよく使用されます。それぞれの違いは下記となります。

px　はピクセルを表し、絶対的な文字のピクセルサイズを示します
emと％は、そのページの標準の文字サイズからの相対的な文字サイズになります。１emと指定された場合は１００％と同じことになります。