【QooQ】大型ディスプレイで横に長く表示されるのを修正する方法【Bloggerテンプレート】
本ページはプロモーションが含まれています
自分はQooQというおしゃれなテンプレートをブログ設立当初から利用しています。最近のQooQのアップデートで、横に長く伸びてしまう不具合が解消されたとのことですが、今からテンプレートを適用すると今までのカスタマイズが全部なくなってしまいそうだったので、不具合解消分のアップデートをしてみましたので方法を紹介します。
テンプレートをカスタマイズする前の注意事項
テンプレートをカスタマイズすると最悪の場合、テンプレートに不具合が出る可能性があるので作業する前に必ずバックアップを取るようにしてください。
横幅を固定する修正方法
※v1.26以下を利用している方が対象です。v1.27以降は不具合は解消されています
結論、以下のようにCSSを変更することで横幅が固定されるようになります。
変更後の設定値は、v1.27を参考にしました。
【変更前】
.container{margin:auto;width:86%;min-width:60pc}
【変更後】
.container{margin:auto;width:86%;min-width:960px;max-width:1180px}
既にテンプレートをかなり作りこんでいる方は、この差分だけアップデートしておくとよいかなと思います。max-width:1180pxの設定が入ることで、大型ディスプレイなどで見たと時に横長に伸びないようになります。
追加のカスタマイズ
変更後のCSSを適用することで、横幅の最小を960px、最大を1180pxにするように設定されていました。もう少し横幅にゆとりを取りたい場合は、この1180の値を増やすなどして調整するとよいでしょう。自分はv1.27の設定値が見やすいかなと思いましたのでデフォルト値で利用したいと思います。
まとめ
QooQの作者さんは定期的にテンプレートをアップデートしてくださっていますので、差分を確認して、アップデート内容を反映してみました。引き続きありがたく利用させてもらおうと思います！
参考：QooQリリースノート
