webサーバでwordpressを使用していて、テーマにtwenty fourteenを使用している方向けです。
twenty fourteenではデフォルトのメインコンテンツの幅が474pxとかなり狭く、両サイドの空白も広めなため目立ちます。
そこでこの幅とマージンを調整してみました。手順は以下のとおりです。
Wordpressの管理画面を開き、ダッシュボード＞外観＞テーマの編集 の順に開き、style.cssを選択します。
※テーマは事前に小テーマを作成(バックアップ)、またはsytle.cssノコピーを取っておく等して、問題がある場合に復元できる状態にしておいてください。
style.css編集画面になったら、以下部分を探して修正します。
1058行目辺りを編集
/**
* 6.0 Content
* -----------------------------------------------------------------------------
*/
.content-area {
padding-top: 48px;
}
.hentry {
margin: 0 auto 48px;
max-width: 672px; <--ここを変更
}
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 474px; <--ここを変更
}
.page-content {
margin-bottom: 48px;
}
1713行目辺りを編集
/**
* 6.7 Post/Image/Paging Navigation
* -----------------------------------------------------------------------------
*/
.nav-links {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
border-top: 1px solid rgba(0, 0, 0, 0.1);
hyphens: auto;
word-wrap: break-word;
}
.post-navigation,
.image-navigation {
margin: 24px auto 48px;
max-width: 474px; <--ここを変更
padding: 0 10px;
}
.post-navigation a,
.image-navigation .previous-image,
.image-navigation .next-image {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 11px 0 12px;
width: 100%;
}
1816行目辺りを編集
/**
* 6.9 Archives
* -----------------------------------------------------------------------------
*/
.archive-header,
.page-header {
margin: 24px auto;
max-width: 474px; <--ここを変更
}
.archive-title,
.page-title {
font-size: 16px;
font-weight: 900;
line-height: 1.5;
margin: 0;
}
1875行目あたりを編集
/**
* 6.10 Contributor Page
* -----------------------------------------------------------------------------
*/
.contributor {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 48px 10px;
}
.contributor:first-of-type {
padding-top: 24px;
}
.contributor-info {
margin: 0 auto;
max-width: 474px; <--ここを変更
}
.contributor-avatar {
border: 1px solid rgba(0, 0, 0, 0.1);
float: left;
margin: 0 30px 20px 0;
padding: 2px;
}
1952行目あたりを編集
/**
* 6.14 Comments
* -----------------------------------------------------------------------------
*/
.comments-area {
margin: 48px auto;
max-width: 474px; <--ここを変更
padding: 0 10px;
}
3143行目あたりを編集
/**
* 10.0 Multisite
* -----------------------------------------------------------------------------
*/
.site-main .widecolumn {
padding-top: 72px;
width: auto;
}
.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
margin: 0 auto 48px;
max-width: 474px; <--ここを変更
padding: 0 30px;
}
また、以下をstyle.cssに追記することで中央表示とコンテンツ幅の拡張が可能です。
/* コンテンツ部横幅拡張＆中央表示ここまで */
.site {
margin: 0em auto; /* ページを中央表示 */
}
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0; /* コンテンツ部分横幅拡張 */
max-width: none; /* コンテンツ部分横幅拡張 */
}
.site-content .entry-header {
padding-right: 0; /* コンテンツ部分横幅拡張 */
}
.site-content footer.entry-meta {
padding-right: 0; /* コンテンツ部分横幅拡張 */
}
.site-content .entry-content,
.site-content .entry-summary,
.page-content {
padding-right: 0; /* コンテンツ部分横幅拡張 */
}
/* コンテンツ部横幅拡張＆中央表示ここまで */
[amazon_link asins='4797395168,4883379248,4295000795,4774173800,4774187062,4774182184,B074C3KMMY,4798052817' template='ProductCarousel' store='kuma055-22' marketplace='JP' link_id='dc5cfd4d-d72a-11e8-bb59-df8701e3c6ac']
コメント