WordPressの有料テーマ ストーク（STORK）のトップページを1カラムにするカスタマイズ方法 を紹介します。
トップページはスッキリとシンプルに表示させたいものです。そういう意味では、1カラムで表示させても面白いですね。サイドバーがあれば、記事のサムネイルは1列または2列でしか表示させられませんが、1カラムなら3列表示が可能になり、見栄え的にも綺麗に表示することが可能になります。
手順は以下の通りになります。※万が一の場合のためにファイルのバックアップを取ることをお勧めします。カスタマイズは自己責任でお願いします。
- home.phpの編集
- サイドバーの削除
- CSSの調整
なお、テーマファイルをカスタマイズする場合は、子テーマを利用することをお勧めします。親テーマをカスタマイズした場合は、テーマのアップデート時にすべて上書きされてしまいます。
home.phpの編集
まず最初に、ストーク（STORK）の親テーマから「home.php」をダウンロードします。この時、FTPソフトを使うと良いですね。ワタシは FileZilla（ファイルジラ）を使っています。導入方法は下記の記事で説明しています。
場所はブログのドメインから「public_html」➝「wp-content」➝「themes」➝「jstork」です。
テキストエディターに「home.php」を放り込みます。ここでは、TeraPad を使いました。
「home.php」の3行目のコードを下記のように編集します。
1 | <div id="inner-content" class="wrap page-full wide cf"> |
上書き保存をして、子テーマ(jstork_custom)にアップロードします。
すると、トップページのサムネイル画像が大きくなり、サイドバーがカラム落ちしてしまいました。
サイドバーの削除
そこで、サイドバーを削除してやります。方法は、「home.php」の38行目あたりにある下記コードを削除します。
1 | <?php get_sidebar(); ?> |
以上でサイドバーの削除完了です。
記事タイプ別にCSSを調整する方法
これで1カラム化は成功しましたが、記事のサムネイル画像が大きくなりすぎて、バランス的にイマイチの感じになっているので、CSSを調整していきます。ストークでは4通りのトップページ記事レイアウトがあるので、1つ1つ紹介していきます。
シンプル
下記のコードを子テーマのstyle.cssに追記すればOKです。
1 2 3 4 5 6 7 | /* デバイス幅が768px以上の場合にシンプルレイアウトを中央寄せにする */ @media only screen and (min-width: 768px) { .top-post-list{ max-width:728px; margin:auto; } } |
カード型
1 2 3 4 5 6 | /* デバイス幅が768px以上の場合にカード型レイアウトを3カラムにする */ @media only screen and (min-width: 768px) { .post-list-card .post-list{ width:31.333%; } } |
マガジン型
1 2 3 4 5 6 | /* デバイス幅が768px以上の場合にマガジン風レイアウトを3カラムにする */ @media only screen and (min-width: 768px) { .post-list-magazine .post-list{ width:33.333%; } } |
ビッグ
1 2 3 4 5 6 7 | /* デバイス幅が768px以上の場合にビッグレイアウトを中央寄せにする */ @media only screen and (min-width: 768px) { .post-list-big{ max-width:728px; margin:auto; } } |
まとめ
今回は、WordPressの有料テーマ ストーク（STORK）のトップページを1カラムにするカスタマイズ方法を紹介しました。
3つの手順で簡単に設定できると思います。
- 「home.php」の3行目のコードの編集
- サイドバーの削除
- CSSの調整
なお、固定フロントページを使用してトップページを作成している場合は、固定ページのテンプレートを「サイドバーなし(1カラム)」を選択すれば良いです。
