【QooQ】トップ画面(記事一覧)の横幅を変更する方法【カスタマイズ】

QooQカスタマイズ

2019.11.072022.05.04

この記事は約2分で読めます。

記事一覧が表示されているメイン画面の横幅を変更する方法です。スマホだといい感じなんですがPCで見ると若干、幅が広いかなって思う人向けです。本ブログはQooQのリスト形式を利用していますが、通常版も同様の修正で変更できます。

表示幅は QooQ のバージョン 1.27 で「PCやテレビなど大型ディスプレイでの表示幅最大値の設定漏れ対応」で改善されています。必要に応じて QooQ のバージョンアップをご検討下さい。

変更する前のお願い！
メイン画面の横幅を変更する方法
変更できているか確認
1. 変更前
2. 変更後
おわりに

変更する前のお願い！

この記事はブログを Blogger でブログを運営していた時のものです。現在の Blogger とは仕様が異なる可能性がございますのでカスタマイズされる際はご注意ください。また、QooQのテンプレートを直接変更しますので、実施前に必ずテンプレートのバックアップ作成をお願いいたします。

メイン画面の横幅を変更する方法

1.Blogger のテンプレート編集画面にて「全体設定」で検索して以下の位置にコードを追加してください。

/****************************************
        全体設定
*****************************************/
/* PC画面幅設定 */
.container {
    width: 70%;
}
/* スマホ幅設定 */
@media ( max-width : 768px ) {
    .container {
        width: 96%;
    }
}

2.テンプレートを保存します。

変更できているか確認

修正後トップ画面の幅が変わっていれば変更完了です。

変更前

変更後

おわりに

Bloggerの管理画面から「テーマ」→「カスタマイズ」→「上級者向け」→「CSSを追加」で追加しても変更可能です。