フォントの調整~WordPress Twenty Twelveカスタマイズ

ある程度カスタマイズが進んできたので、全体のバランスを考えて、フォントサイズを調整してみました。

記事タイトルの文字の大きさを変更

変更前

.archive-title,
.page-title,
.widget-title,
.entry-content th,
.comment-content th {
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 2.181818182;
    font-weight: bold;
    text-transform: uppercase;
    color: #636363;
}

変更後

.archive-title,
.page-title,
.widget-title,
.entry-content th,
.comment-content th {
    font-size: 17.5px;
    font-size: 1.25rem;
    line-height: 1.181818182;
    font-weight: bold;
    text-transform: uppercase;
    color: #636363;
}

基本のfont-size,sont-styleを変更

変更前

body {
    font-size: 14px;
    font-size: 1rem;
    font-family: Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    color: #444;
}
body.custom-font-enabled {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

変更後

body {
    font-size: 17.5px;
    font-size: 1.25rem;
    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    text-rendering: optimizeLegibility;
    color: #444;    
}
body.custom-font-enabled {
    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}

navigation menuのfont-size変更

変更前

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
    clear:both;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}

変更後

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
    clear:both;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.42857143;
}

投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: