STINGER8の記事ページを1カラムにする方法

メインコンテンツとサイドバーの2カラム構成は、ブログではポピュラーな構成かもしれません。

しかしながら、自分のようにテーブルを多用する記事が多い場合には2カラム構成では手狭に感じるケースも多く、これまでは文字を小さくしたり表示項目を削ったりして対応してきました。

今回、STINGER8にテンプレート切り替える機会に、思い切って記事ページを1カラム構成にしてみました。

※ 現在は固定ページのみ1カラム構成になっています。

私は記事ページと固定ページを1カラム構成、それ以外のページ（トップページ、アーカイブページなど）は2カラム構成にしています。

ここでは例として記事ページを1カラム構成にする手順を書いてみます。

まずは、STINGER8の本体からsingle.phpを子テーマにコピーします。

コピーしたsingle.phpの最下部付近にあるget_sidebar()をコメントアウトします。

	</div>
	<!-- /#contentInner -->
	<?php // get_sidebar(); ?>
</div>
<!--/#content -->
<?php get_footer(); ?></php>

これでサイドバーが表示されなくなりますが、このままだと右側に余白が出来てしまうので少し修正が必要です。

この余白はst-mainクラスで指定されているのでスタイルシートを上書きしたいところですが、トップページなどにも影響が及んでしまうので、今回は無作法ですがテンプレートに直接スタイルシートを書き込みます。

single.phpの最上部付近にあるst-mainが指定されているdivにstyleを追加します。

<?php get_header(); ?>


	<div id="contentInner">

		<div class="st-main" style="margin-right:0px;">

			<!-- ぱんくず -->

これで1カラムになります。

無事1カラムになりましたが、画面いっぱいに開くと幅が少し広すぎる気がするので記事部分の幅を制限することにしました。

single.phpのarticleタグにclass=”article-single”を指定します。クラス名は任意です。

			<!--/ ぱんくず -->

			<div id="post-<?php the_ID(); ?>" <?php post_class('st-post'); ?>>
				<article class="article-single">
					<!--ループ開始 -->

続いて、スタイルシートに設定を記述します。

@media print, screen and (min-width: 960px) {
        .article-single {max-width:800px;margin:0 auto;}
}

幅を変更したい場合には、max-widthの値を変更してください。

まとめ

別のテンプレートを使えばカスタマイズが不要なのかもしれませんが、STINGERは使い慣れててカスタマイズし易いので思わずやってしまいました。

2カラムより1カラムの方がすっきりしていて自分には見やすいと感じますが、いかがでしょうか？

今回は記事ページのテンプレート書き換えていますが、テンプレートを追加して使い分けるというのもいいかもしれません。

機会があったら試してみてください。