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列目が異様に空いています(笑)。しかもサムネイルが小さいです。やはりブログの横幅をいじるのは大変ですね。

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

スポンサーリンク

シェアする

フォローする

コメントをどうぞ

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