Twenty Seventeen 固定ページのカスタマイズ(カラム・幅・背景色)-WordPress

テーマ「Twenty Seventeen」の固定ページは、1カラムと2カラムを選択することができる。カラムの設定は投稿ページには採用されず、あくまで固定ページのみに反映されます。

以前、投稿ページについて、記事幅や背景色のカスタマイズ方法を記述しましたが、ここでは、固定ページの(カラム・幅・背景色)のカスタマイズ方法について記述したいと思う。

カスタマイズのまとめページはこちら⇒『テーマ Twenty Seventeen を使ってブログをカスタマイズ(目次)』

スポンサーリンク

固定ページのカラム設定方法

固定ページのカラム数を1カラムと2カラムから選択します。カラム数はダッシュボードの左側「外観」⇒「カスタマイズ」⇒「テーマオプション」から設定できる。「テーマオプション」の項目は、「カスタマイズ」で固定ページを表示することで表示されます(投稿ページでは表示されません)。

TwentySeventeen 固定ページ
固定ページのカラム設定

1カラムの固定ページをカスタマイズ(フロントページを除く)

1カラムの固定ページの幅と背景色をカスタマイズするコードを下記に示します。該当するパターンのコードをコピーしてstyle.cssに貼り付け、好みに変更してください。(フロントページに設定した固定ページを変更する場合は別途コードを追加する必要があります。)

TwentySeventeen 固定ページ
1カラムの固定ページ

幅のみ変更する場合

幅と背景色を変更する場合

フロントページに設定した1カラムの固定ページをカスタマイズ

1カラムの固定ページをフロントページに設定した場合、そのページには専用のcssが指定されます。ですので、1カラムのフロント固定ページをカスタマイズする場合は下記をコピーしてstyle.cssへ追加する必要があります。

幅のみ変更する場合

幅と背景色を変更する場合

2カラムの固定ページをカスタマイズ

固定ページを2カラムに設定した場合は下記コードでカスタマイズ可能です。下記の該当するコードをコピーしてstyle.cssへ貼り付け好みに変更してください。(1カラムとは異なり、2カラムの場合はフロントページに指定したページも下記コードで変化します。)

TwentySeventeen 固定ページ
2カラムの固定ページ

幅のみ変更する場合

幅と背景色を変更する場合

以上で固定ページのカラム、幅、背景色についてカスタマイズを終了します。

カスタマイズのまとめページはこちら⇒『テーマ Twenty Seventeen を使ってブログをカスタマイズ(目次)』

シェアしてください!お願いしますorz

スポンサーリンク

Fatal error: Uncaught Error: Call to undefined function wp_parse_list() in /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-content/plugins/yet-another-related-posts-plugin/classes/YARPP_Core.php:991 Stack trace: #0 /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-content/plugins/yet-another-related-posts-plugin/classes/YARPP_Core.php(1294): YARPP->get_query_post_types(2379, Array) #1 /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-content/plugins/yet-another-related-posts-plugin/includes/related_functions.php(23): YARPP->display_related(2379, Array, true) #2 /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-content/plugins/yet-another-related-posts-plugin/includes/related_functions.php(80): yarpp_related(Array, false, true) #3 /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-content/themes/twentyseventeen-child/template-parts/post/content.php(78): related_posts() #4 /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-includes/template.php(690): require('/home/tsumaboku...') #5 /home/tsumaboku/tsumaboku.wpblog.jp in /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-content/plugins/yet-another-related-posts-plugin/classes/YARPP_Core.php on line 991