Twenty Fourteenの表示カスタマイズ

WordPressのテーマ、Twenty Fourteenの表示に関わるカスタマイズメモ。

最大幅を変更する（初期値は1260px）

スタイルシート （style.css）の該当部分を↓のように修正する（数値は例）。

.site {
    /* max-width: 1260px; */
    max-width: 1900px;
}

.site-header {
    /* max-width: 1260px; */
    max-width: 1900px;
}

左寄せを中央揃えにする

スタイルシート （style.css）の “.site { }” に↓を追加する。

.site {
    /* 左寄せを中央揃え */
    margin-left: auto;
    margin-right: auto;
}

全体のフォントを変更する

スタイルシート （style.css）の該当部分を↓のように修正する。
※ ”UD デジタル 教科書体 NP-R” フォントを追加する例

body,
button,
input,
select,
textarea {
    /* font-family: Lato, sans-serif; */
    font-family: "UD デジタル 教科書体 NP-R", Lato, sans-serif;
}

コンテンツ枠の表示幅を変更する（初期値は474px）

スタイルシート （style.css）の該当部分を↓のように修正する（数値は例）。

/**
 * 6.0 Content
 * -----------------------------------------------------------------------------
 */

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
    /* max-width: 474px; */
    max-width: 650px;
}

/**
 * 6.7 Post/Image/Paging Navigation
 * -----------------------------------------------------------------------------
 */

.post-navigation,
.image-navigation {
    /* max-width: 474px; */
    max-width: 650px;
}

/**
 * 6.9 Archives
 * -----------------------------------------------------------------------------
 */

.archive-header,
.page-header {
    /* max-width: 474px; */
    max-width: 650px;
}

/**
 * 6.10 Contributor Page
 * -----------------------------------------------------------------------------
 */

.contributor-info {
    /* max-width: 474px; */
    max-width: 650px;
}

/**
 * 6.14 Comments
 * -----------------------------------------------------------------------------
 */

.comments-area {
    /* max-width: 474px; */
    max-width: 650px;
}

/**
 * 10.0 Multisite
 * -----------------------------------------------------------------------------
 */

.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
    /* max-width: 474px; */
    max-width: 650px;
}

コンテンツ枠上層

.hentry {
    /* max-width: 672px; */
    max-width: 800px;
}