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

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

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

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

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

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

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

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

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

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

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

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

この場合には・・

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

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

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

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

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

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

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

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

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

https://def-4.com