ストーク（WPテーマ）ランディングページの表示幅を調整する方法

こんにちは。ジロウです。

当ブログでも利用しているWordPressテーマ「ストーク」では、LP（ランディングページ）を作成することができます。

個別記事や固定ページとは隔離された形で、1カラム表示が可能です。

今更ではありますが、最近になって初めてこれを使ってみたんです。

ところが、スマホ表示では違和感がないものの、パソコン表示では表示幅（横幅）が広すぎるんですね。

デフォルトでは正直言って読みにくい・・・。

そこで、この表示幅を調整する（狭くする）方法はないものかと、あれこれ探ってみたんですが、情報が見当たりませんでした。

カスタマイズやプログラミングに疎い自分が嘆かわしい！

ということで、素直に開発元である「オープンケージ」さんに問い合わせてみることにしたんです。

通常であれば、テーマのカスタマイズに関する相談は有料だそうですが、

「できればヒントだけでも♪」

と低姿勢に懇願したところ、あっさりとカスタマイズ方法をご教示くださいました。

そして問題は速効で解決！

たぶん、カスタマイズの範疇にも入らないくらい単純な作業だったんでしょう。

そこでつまづいている僕に哀れみを感じてくださったのかな・・・。

それにしても「オープンケージ」さんってば、テーマのデザインや機能も素晴らしいですが、カスタマーサポート体制もまた素晴らしい♪

＞＞＞ 「オープンケージ」の公式サイトはこちら♪

というわけで、自身の備忘録も兼ねて、テーマ「ストーク」のランディングページの表示幅を調整する方法をご紹介します。

と言っても、実に簡単。

WordPress管理画面の左サイドメニューから、

［外観］⇒［カスタマイズ］

と進み、［追加CSS］に下記を追記するだけなのであります。

@media only screen and (min-width: 900px) {
.lp-wrap #main .article {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}
}

このコードの3行目、「width: 900px;」の数値を「800」とか「700」とかに書き換えることで、表示幅を調整できます。

例えば下記のような感じです。

@media only screen and (min-width: 900px) {
.lp-wrap #main .article {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
}

このコードを［追加CSS］のいちばん下にでもコピペして、好みの数値に書き換えるだけです。

ね、実に拍子抜け♪

きっと担当の方も笑っちゃっただろうなぁ～。

さすがにこの程度じゃ、惜しみなく教えて下さいますわな（苦笑）。

というわけで、同じお悩みをお持ちでしたら、ぜひぜひ試してみてくださいね。