Entry 本文のスタイルシートを変更

わたしが WordPress を扱い始めて、Web ショップ・サイトのブログとしてつくる時に選んだテーマ(Fresh Ink Magazine)のまま長持ちしている。当然、細かなところはカスタマイズを追加しています。

テーマをデザインしたのは出版物のカバー等のデザインをしている企業で、このテーマをリリースしてからは WordPress のテーマ・デザインは終了しているようです。現在でも公式ディレクトリには残っているようですね。
レスポンシブルが主流に成っても、PHP がグレードアップしたって度重なる WordPress のメジャー・グレードアップにもエラーを出さないので使い続けています。

本文書体を指定してある箇所

今回は Entry 本文を変更。読みやすさを考えました。

.entry p {
    font-family: 'Abril Fatface', serif;
    font-size: 1.2em;
    line-height: 1.6em;
    font-weight: 400;
    color: #364421;
    padding: 1em;
    text-rendering: optimizeLegibility;
    text-align: justify;
    text-justify: inter-ideograph;
    word-spacing: normal;
    word-break: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

本文書体とプロパティを変更

本文の書体を変更、あわせて役物や、文字送りの調整をするプロパティの設定を変更。次のスタイルシートに更新しました。

.entry p {
    font-family: Segoe UI;
    font-size: 1.2em;
    line-height: 1.6em;
    font-weight: 400;
    color: #364421;
    padding: 1em;
    text-rendering: optimizeLegibility;
    text-align: justify;
    letter-spacing: normal;
    text-justify: inter-ideograph;
    text-transform: none;
    font-variant: normal;
    word-spacing: auto;
    word-break: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

WordPress デザインとスタイルシート参考書

[table width =”100%” style =”table-bordered table-hover” responsive =”true”] [table_head] [th_column width =”50%”]WordPress[/th_column] [th_column width =”50%”]スタイルシート[/th_column] [/table_head] [table_body] [table_row] [row_column width =”50%”]
WordPress でのサイト制作によく使われる手法を目的別にまとめたテクニック集です。[/row_column] [row_column width =”50%”]
これからHTMLとスタイルシートを覚えようとする方には、HTMLのマークアップをHTML5とHTML4の違いとともに紹介しており、書式と記述の例、解説がとてもわかりやすい本です。[/row_column] [/table_row] [/table_body] [/table]