Tweet

WordPressの話題です．

Twenty Fourteen　テーマがものすごくカッコ良かったのですがデフォルトのsite-content幅が474pxしかありませんでした．

しょうが無いのでmax-widthの要素を700pxに変更しました．全部で6箇所．

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
    margin: 0 auto;
    max-width: 700px;
}

.post-navigation,
.image-navigation {
    margin: 24px auto 48px;
    max-width: 700px;
    padding: 0 10px;
}

.archive-header,
.page-header {
    margin: 24px auto;
    max-width: 700px;
}

.contributor-info {
    margin: 0 auto;
    max-width: 700px;
}

.comments-area {
    margin: 48px auto;
    max-width: 700px;
    padding: 0 10px;
}

.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
    margin: 0 auto 48px;
    max-width: 700px;
    padding: 0 30px;
}

しかしその後，コンテンツサイドバーの幅も気になってしまってそれも変更することに．

そちらの設定は以下のところです。

.content-sidebar {
        margin-left: -29.04761904%;
        width: 29.04761904%;
}

こちらの値を増減させればレスポンシブで幅を調整できます。

また，デフォルトでTwenty Fourteenはアイキャッチと左のサイドメニューが接触しているデザインですが以下の部分を変更するとMarginが取れます。

.site-content {
        margin-right: 29.04761904%;
        margin-left: 182px;
}

だいぶコレで自分好みになりました．

しばらくはまだいじってみようと思います！

Tweet