twenty seventeenのカスタマイズ【コピペ利用ＯＫ】

twenty seventeenをコピペでカスタマイズ！

まだまだカスタマイズ情報の少ないtwenty seventeenですが、今後のご依頼をスムーズにこなしていくためにも（というより、備忘録も兼ねて）コピペでカスタマイズできるコードをいくらかご紹介いたします。

twenty seventeenの画像が見切れているときの措置

twenty seventeenはヘッダーが存在感を放つ魅力的なテーマとなっていますが、幅2000pix高さ1200pixと大きな画像サイズが推奨されており、閲覧環境によっては画像が見切れてしまっているケースも多いようです。

推奨画像サイズの画像を挿入したにも関わらず、このような結果とならないように対策すべきなのが、pane;-imageの数値変更です。

.panel-image {
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: 100%;
	position: relative;
}

このまま追加CSSへコピペしてもらえれば、ほぼ解決するかと思います。Backgroundが当初はcoverと指定されているのが問題となっているようです。

さて、ここでページ上部の空白がやたら気になってしまう方もいるでしょう。

*{
	margin:0;
	padding:0;
}

.site-branding{
	display:none;
}

上記をコピペしてもらえれば、スッと空白が消えたのではないでしょうか。

さらに気になるのが・・ページのコンテンツ幅が狭いこと。

twenty seventeenのコンテンツ幅を拡げてみる

@media screen and (min-width: 48em) {
	.wrap {
		max-width: 1100px;/*記事・サイドバー・余白の全幅*/
		padding-left: 2em;/*記事の左余白*/
		padding-right: 2em;/*サイドバーの右余白*/
	}
	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 67%;/*記事幅*/
	}
	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 29%;/*サイドバー幅*/
	}
	.navigation-top .wrap {
		max-width: 1100px;/*メニューバー幅*/
		padding: 0.75em 3.4166666666667em;
	}
	.site-content {
		padding: 2.5em 0 0;/*メニューバーと記事の間隔*/
	}
}

これでちょっと拡がったのではないでしょうか。

加えて、背景にカラーを付けたくなってしまいますよね。

この場合には・・

twenty seventeenの背景色、背景画像をカスタマイズ

/* コンテンツ部分の背景色 */
.site-content {
	background-color:#66ffcc;
}

/* コンテンツ中身の背景色 */
.site-content .wrap {
	background-color:#ffffff;
}

こう設定しておけばＯＫです。

他の色にしたいときには、上記の#ffffffといった部分を希望のものに差替えるのみです。

１カラム設定しただけではtwenty seventeenはＬＰとして魅力に欠けるところがありますが、上記設定をしておくことでだいぶ見ることができるようになります。

更に、背景指定をしたいときには・・

/* コンテンツ部分の背景色 */
.site-content {
	background-image image:url("URLを指定 ")
}

/* コンテンツ中身の背景色 */
.site-content .wrap {
	background-image image:url("URLを指定 ")
}

としておきます。
URLはライブラリより、画像選択することで判明しますので、そちらをコピーして用いれば問題ないでしょう。

twenty seventeenのカスタマイズがコピペでＯＫ

ひとつひとつの要素を自分好みにアレンジしていくのも面倒であれば、下のソースを丸ごとコピペがおススメですので、ご利用ください。
見出しカスタマイズもしていますので、不要であれば見出しの個所は削ってください。

*{
	margin:0;
	padding:0;
}

.site-branding{
	display:none;
}

.panel-image {
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: 100%;
	position: relative;
}

@media screen and (min-width: 48em) {
	.wrap {
		max-width: 1100px;/*記事・サイドバー・余白の全幅*/
		padding-left: 2em;/*記事の左余白*/
		padding-right: 2em;/*サイドバーの右余白*/
	}
	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 67%;/*記事幅*/
	}
	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 29%;/*サイドバー幅*/
	}
	.navigation-top .wrap {
		max-width: 1100px;/*メニューバー幅*/
		padding: 0.75em 3.4166666666667em;
	}
	.site-content {
		padding: 2.5em 0 0;/*メニューバーと記事の間隔*/
	}
}

/* コンテンツ部分の背景色 */
.site-content {
	background-color:#66ffcc;
}

/* コンテンツ中身の背景色 */
.site-content .wrap {
	background-color:#ffffff;
}

#content p {color: #444444;}
h2	{ text-shadow: 0 1px #ffffff; clear:both; font-size:128.6%; padding:10px 15px 15px; border-bottom: 3px solid #FF0033; position:relative; line-height:114.3%; background:url(images/line_wh.png) left top repeat-x; }


h3{
    position: relative;
    color: #fff;
    background: #FF0033;
    font-size: 4pix;
    font-weight: bold;
    margin: 0 0.1em 1.5em 0.1em;
    padding: 0.8em;
    box-shadow: 0 1px 3px #777;
    -moz-box-shadow: 0 1px 3px #777;
    -webkit-box-shadow: 0 1px 3px #777;
    -o-box-shadow: 0 1px 3px #777;
    -ms-box-shadow: 0 1px 3px #777;
}
 
h3:after,
h3:before{
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}
 
h3:before{
    right: 0;
    border-left: 5px solid #333;
}
 
h3:after{
    left: 0;
    border-right: 5px solid #333;
}

一部引用先:
http://tsumaboku.com/

https://def-4.com