100%幅の表示を可能にする
STINGER8では100%幅のコンテンツを表示できないので、固定ページは可能になるように設定する。
サイドバーを消し、幅を制限している設定をクリアしていく。
page.php
page.phpからサイドバーを表示するコードを削除。
<!--?php get_sidebar(); ?-->
さらにblogboxなど不要なコンテンツも削除するため、下記のコードを削除。
<div class="blogbox">
<span class="kdate">
<!--?php if ( get_the_date() != get_the_modified_date() ) : //更新がある場合 ?-->
投稿日：<!--?php echo esc_html( get_the_date() ); ?-->
更新日：<time class="updated" datetime="<?php echo esc_attr( get_the_modified_date( DATE_ISO8601 ) ); ?>"><!--?php echo esc_html( get_the_modified_date() ); ?--></time>
<!--?php else: //更新がない場合 ?-->
投稿日：<time class="updated" datetime="<?php echo esc_attr( get_the_date( DATE_ISO8601 ) ); ?>"><!--?php echo esc_html( get_the_date() ); ?--></time>
<!--?php endif; ?-->
</span>
</div>
執筆者：<!--?php the_author_posts_link(); ?-->
このままではコンテンツ幅が広がらないので、cssを調整する。
page.cssというファイルを作り、読み込む。
page.phpの<!--?php get_header(); ?-->の次に読み込みを記入。
<link rel="stylesheet" type="text/css" href="../wp-content/themes/stinger8-child/css/page.css">
HTML的にはエラーだが、動作するので目をつぶろう。
余計な空白を削除し、適切な余白を取るため、cssはこう記述した。
.st-main{
padding: 20px 0;
}
#breadcrumb,h1,h2,h3,.sns{
margin-left: 10px;
margin-right: 15px;
}
.amiens-600w{
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 0 10px;
}
600px幅のコンテンツ用の設定もしておいた。
これだけだとPC表示の幅が狭いままなので、それも調整する。
@media screen and (min-width: 960px) {
.st-main{
margin-right: 0;
}
#content,#st-header{
max-width: none;
}
#breadcrumb,h1,.sns,.amiens-1060w{
max-width: 1060px;
margin-left: auto;
margin-right: auto;
}
#st-header img{
width: 100%;
}
}
1060px幅のコンテンツ用の設定もしておいた。
home.php
同様に、home.phpにも作業する。
サイドバーを表示する部分を削除する。
<!--?php get_sidebar(); ?-->
home.phpの<!--?php get_header(); ?-->の次に読み込みを記入。
<link rel="stylesheet" type="text/css" href="../wp-content/themes/stinger8-child/css/page.css">
これで、全幅コンテンツの表示が可能になった。
