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

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

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

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

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

流れとしては

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

保存した『footer.php』をTeraPadに放り込みます。

上から3行目のコード

に書き換えます。

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

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

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

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

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

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

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

変更前変更後
ブログ幅1070px1400px
記事幅740px1080px

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

スポンサーリンク

フォローする

コメントをどうぞ

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

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