WPテーマスワローのカード型トップページをワンカラムにカスタマイズする方法

BLOG/インターネット

 

ワードプレステーマ「SWALLOW」のトップページのカード型をサイドバーを無くしてワンカラムにしたカスタマイズ方法のメモ。

自分用のメモなので、間違っていたらごめんなさい＆詳しい方教えてくださいm(__)m

スワローと同じところが作っているテーマの「STORK」公式サイトさんのページを参考にしました。ありがとうございます！

目次

子テーマ内にhome.phpをコピーする

STORKのサイトを参考にして、home.phpを子テーマ内にFTPソフトなどでアップします。

参考：ストーク公式サイト

WPストークのトップページをワンカラムにするカスタマイズ

home.phpの3行目付近のコードを書き換える

子テーマ内に作成したhome.phpの３行目付近

<div id="inner-content" class="wrap cf">

を下のコードに書き換えます。

<div id="inner-content" class="wrap page-full wide cf">

home.phpのサイドバーの削除

そして、home.php下部３８行目付近の

<!--?php get_sidebar(); ?-->

を消去します。

CSSの書き換え

それから、子テーマ内のCSSに下記のコードを書きます。

/* デバイス幅が768px以上の場合にカード型レイアウトを3カラムにする */
@media only screen and (min-width: 768px) {
  .archives-list.card-list .post-list {
    width: 31.333%
  }
  .page-full.wide #main {
    width: 100%;
  }
}

以上でSWALLOWのカード型レイアウトのトップページが１カラムに変更されました！

【追加】ブログ全体を１カラムにする場合

以下のコードは記事ページも１カラムを選択し、なおかつアーガイブページも１カラムにしたい時に追加で書いてください。

子テーマ内にindex.phpをコピーする

STORKのサイトを参考にして、index.phpを子テーマ内にFTPソフトなどでアップします。

index.phpの編集

index.phpの3行目付近のコードを書き換える

子テーマ内に作成したindex.phpの３行目付近

<div id="inner-content" class="wrap cf">

を下のコードに書き換えます。

<div id="inner-content" class="wrap page-full wide cf">

index.phpのサイドバーの削除

index.php下部付近の

<!--?php get_sidebar(); ?-->

を消去します。

以上で、ブログ全体がワンカラムになりました！

 

ホーム/BLOG/WPテーマスワローのカード型トップページをワンカラムにカスタマイズする方法