デフォルトの状態では、メインコンテンツ部分の幅が狭かったので、僕の場合コンテンツ部分の幅を広げ、左側のサイドバーの幅を狭めるようにカスタマイズしています。
実際に僕が変更した部分を備忘録として残しておきます。
【TwentyFourteen テーマファイルカスタマイズシリーズ】
Sponsored Links
ここで載せているブラウザのスクショは、テスト環境上でのものです。実際のサイトのものではないので注意。
ただ当ブログで行っているカスタマイズ方法をそのまま載せています。
デフォルト表示の場合、メインコンテンツ部分が非常に狭いので、ちょっと見づらいです。
また、画像を載せたときにどうしても小さい画像なので、読んでくれている人にもあまりよろしくないです。（画像が小さくすぎてなんの画像かわかりづらい。。）
下記が変更前のサイト＞＞
最終的に下記のようにカスタマイズしました。
メインコンテンツ部分を広げることにより、かなり見やすくなりました。
やってることは簡単で、メインコンテンツのピクセル値を広げ、プライマリーサイドバー部分のピクセル値を少なくし、あとは微調整を行いました。
CSS初心者の人でもstyle.cssのどの行を直せばいいかが分かれば、一瞬でカスタマイズ可能です。（というか僕もCSS初心者です。）
style.css【6.0 Content】の部分⇒メインコンテンツ部分の幅を広げる
ここでは変更後のコードのみ載せます。
幅の変更なので、実際変えるのはピクセル値のみです。変更前の数値はコメントで横に残しておきます。コメントを書いていない行はデフォルトのままです。
ここを変更するとメインコンテンツ部分の幅が広がります。
（メインコンテンツ部分を474pxから650pxに変更しています。）
/**
* 6.0 Content
* -----------------------------------------------------------------------------
*/
.content-area {
padding-top: 48px;
}
.hentry {
margin: 0 auto 48px;
max-width: 790px;/*【コンテンツ幅調整】変更前⇒672px*/
}
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 650px; /*【コンテンツ幅調整】変更前⇒474px*/
}
.page-content {
margin-bottom: 48px;
}
併せてメインコンテンツの下の部分にある【6.7 Post/Image/Paging Navigation】 の部分も幅を広げます。
/**
* 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: 650px;/*【コンテンツ幅調整】変更前⇒474px*/
padding: 0 10px;
同じく【6.9 Archives】、【6.10 Contributor Page】、【6.14 Comments】も幅を合わせておきます。
/**
* 6.9 Archives
* -----------------------------------------------------------------------------
*/
.archive-header,
.page-header {
margin: 24px auto;
max-width: 650px;/*【コンテンツ幅調整】変更前⇒474px*/
/**
* 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: 650px;/*【コンテンツ幅調整】変更前⇒474px*/
}
/**
* 6.14 Comments
* -----------------------------------------------------------------------------
*/
.comments-area {
margin: 48px auto;
max-width: 650px;/*【コンテンツ幅調整】変更前⇒474px*/
padding: 0 10px;
}
【10.0 Multisite】の部分もデフォルトで474pxとなっていますので、変更しておきます。
/**
* 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: 650px;/*【コンテンツ幅調整】変更前⇒474px*/
padding: 0 30px;
}
プライマリーサイドバーの幅を狭くします（僕の場合、プライマリーサイドバーはあまり使わないので）
完全に削除も考えたのですが、デザイン的に残した方がしっくりきましたので、幅を狭めて残すことにしました。
下記の部分を変更します。（ここも上記と同じくコメントがある行のみ変更しています。）
@media screen and (min-width: 1080px) {
.search-box .search-field {
width: 324px;
}
.site-content,
.site-main .widecolumn {
margin-left: 90px;/*【コンテンツ幅調整】変更前⇒222px*/
}
.site:before {
width: 90px;/*【コンテンツ幅調整】変更前⇒222px*/
}
.search-box-wrapper,
.featured-content {
padding-left: 90px;/*【コンテンツ幅調整】変更前⇒222px*/
}
#secondary {
width: 60px;/*【コンテンツ幅調整】変更前⇒162px*/
}
.secondary-navigation,
.secondary-navigation ul ul {
width: 90px;/*【コンテンツ幅調整】変更前⇒222px*/
}
.secondary-navigation ul li:hover > ul,
.secondary-navigation ul li.focus > ul {
left: 202px;
}
プライマリーサイドバーの幅を狭くすると、メインコンテンツとバーの間に隙間ができるので、下記の部分でs調整します。（デフォルトよりも左に寄せるようにします。）
@media screen and (min-width: 1008px) {
.search-box-wrapper {
padding-left: 182px;
}
.main-content {
float: left;
}
.site-content {
margin-right: 30%;/*【コンテンツ幅調整】変更前⇒29.04761904*/
margin-left: 100px;/*【コンテンツ幅調整】変更前⇒184*/
}
まとめ
メインコンテンツの幅というのはやはり「メイン」なので、幅は広い方がいいと思い、このようにカスタマイズをしています。
幅を変えるくらいであれば、それほど難しくありません。アドセンス広告の配置でも自分の理想とした配置が実現できるようになったりもします。
このブログの場合、もう少し細かい部分を変更しています。
エントリータイトルのフォントサイズを小さくしたり、リンクテキストの色を変更したり、。
この部分も後日記事にしたいと思います。
Sponsored Links