WordPressでトップページだけ1カラムにして幅を広げる方法

WordPressでトップページだけ1カラムにして幅を広げる方法

今回、WordPressのブログの トップページを1カラムにして、ブログの幅を広げる方法 に挑戦してみました。

ワタシがWordPressで愛用している無料テーマ Simplicity(現在はSANGO)のトップページだけを通常の2カラムから1カラムに変更していきます。要するにサイドバーを取り除こうという訳ですね。

1カラムにするとブログ全体が貧弱に見えるので、幅を広げてやって全体的に大きな感じのトップページにしていきます。

流れとしては

STEP.1
サムネイルのスタイルを『大』に変更
STEP.2
トップページだけサイドバーを非表示にして1カラムにする
STEP.3
ブログのメインカラム幅と記事幅の拡大
STEP.4
サムネイルがブログの真ん中に来るように調整する
STEP.5
メインカラムの枠線の消去

今回は下記のブログを参考にさせて貰いました。

参考 【WP】simplicityをカスタマイズしてギャラリーサイトっぽいレイアウトのトップページを作るきつね胡乱

サムネイルのスタイルの変更

まず最初に、ブログトップページに表示される記事の、サムネイルの表示方法を変更していきます。デフォルトでは縦に1列になっています。これを『サムネイル大』に変更していきます。

WordPressでトップページだけ1カラムにして幅を広げる方法

ダッシュボードから『サイトをカスタマイズ』⇒『レイアウト(全体・リスト)』と進み、『一覧リストのスタイル』から『サムネイル大』を選択して『保存して公開』をクリックします。

WordPressでトップページだけ1カラムにして幅を広げる方法

どんな感じになったかと言うと、サムネイルが大きいので横並びに2つしか表示されません。これを3つ並べられるようにしていきます。

スポンサーリンク

トップページだけサイドバーを非表示にして1カラムにする

FTPソフトを立ち上げて、Simplicity2の親テーマの『footer.php』をパソコン内に保存します。

WordPressでトップページだけ1カラムにして幅を広げる方法

保存した『footer.php』をTeraPad(テキストエディタ)に放り込みます。

上から3行目のコード

 <?php get_sidebar(); ?>

<?php if ( !is_home() && !is_front_page() ) : ?>
        <?php get_sidebar(); ?>
<?php endif; ?>

に書き換えます。

ファイルを上書き保存して、FTPソフトでSimplicityの子テーマにアップロードします。

WordPressでトップページだけ1カラムにして幅を広げる方法

これでSimplicityのトップページはサイドバーが無くなって1カラムになりました。

WordPressでトップページだけ1カラムにして幅を広げる方法

しかし、きつね胡乱さんのブログの様にサムネイルが3つ並びません。そこで、Simplicityのブログの全体の幅を広げてみる事にしました。

ブログのメインカラム幅と記事幅の拡大方法

サムネイル320pxが3つ、間の余白が40px。これだけで1000pxなので、もう少し幅を広くしないと収まりきれないのでしょうか?

変更前 変更後
ブログ幅 1070px 1400px
記事幅 740px 1080px

Simplicityの子テーマのスタイルシート(style.css)に、下記のコードを貼り付けました。

/*ブログ幅変更*/
#header-in, #navi-in, #body-in, #footer-in{
  width: 1400px;
}
#main {
  width: 1080px;
}

これでブログ幅が広がりましたが、少し左に寄っているような…。

WordPressでトップページだけ1カラムにして幅を広げる方法

もう少し全体を右に寄せていきましょう。

サムネイルがブログの真ん中に来るように調整する

先程と同様に、Simplicityの親テーマの『css-custom.php』をデスクトップに保存しておきます。

TeraPadに放り込んで、405行目の

<?php if ( is_list_style_large_thumb_cards() ): //大きなサムネイル表示の場合?>

の下に、下記のコードを追加します。

<?php if ( is_home() || is_front_page() ) : ?>
	#main {
	  padding: 20px 180px !important;
	  width: 100% !important;
	}

/* 画面幅が1110px以下の時 */
@media screen and (max-width:1110px){
	#main {
	  padding: 20px 29px !important;
	}
}

<?php endif; ?>

先ほどと同じくファイルを上書き保存後、子テーマにアップロードしてやります。

先ほどに比べてだいぶ真ん中になりましたが、このコードを貼り付けるとブログの幅が増えたので、余白が凄い事になりました(笑)。

WordPressでトップページだけ1カラムにして幅を広げる方法

メインカラムの枠線の消去

最後にメインカラムの枠線を消していきましょう。子テーマのスタイルシート(style.css)に下記のコードを追加します。

#main {
border:none;
}

これで何とか完了しました。

まとめ

今回は、ブログのトップページだけ1カラムに変更する方法に挑戦してみました。苦労したところは、サムネイル大が横に3つ並ばなかった点です。そのために投稿記事幅がとんでもなく広くなってしまいました(笑)。

ちなみに、スマホではどう見えているのかと言うと、

WordPressでトップページだけ1カラムにして幅を広げる方法

1列目と2列目が異様に空いています(笑)。しかもサムネイルが小さいです。やはりブログの横幅をいじるのは大変ですね。

とりあえずは、このままでブログを作成していきます。途中で修正等が必要かもしれないですね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿や心無いコメントは無視されますのでご注意ください。(スパム対策)