【Blogger/QooQ】レスポンシブデザインを考えてみる

どうも。

QooQはデバイスの画面幅によってスタイルを変えるレスポンシブに対応したテーマ（テンプレート）となっています。

一般的なレスポンシブデザインとは、css内でメディアクエリを使い、アクセスしてくるデバイス幅によりスタイルを振り分けているケースが多いかと思います。

QooQのレスポンシブデザインを変更してみた。

当ブログで使用させて頂いているQooQは、トップページの記事一覧等のスタイルがPCで表示した時は2列のタイル形式で記事が表示されています。
そして、スマホでは1列で表示される様にしっかりレスポンシブ対応で作り込まれたテーマとなっています。

しかし、個人的にスマホ等の表示時については、1記事あたりの画像の大きさや、記事タイトル等を含めたブロックの大きさがスクロール量を増やしてしまうので、PC以外はリスト表示が良いかなぁと思います。

*テーマ（テンプレート）を変更します。必ずバックアップを取りましょう。
変更は自己責任で行なって下さい。

*既に当ブログは変わっています。

cssを変更してレスポンシブスタイルを変更

cssの変更・追加する対象箇所を探しましょう。
テーマ>>HTMLの編集画面内でCtrl＋fで検索します。
入力フィールドに@media ( max-width : 480px ) {と入力して検索。以下青字の内容に変更・追加します。

/*   スマホ・タブレット    */
@media ( max-width : 768px ) {
#list{
display: block;
}
.list-item-img{
    float:left;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin: 10px;
    border: solid 1px #D3D3D3;
}
/* no image  */
 .list-item-img-def{
    float:left;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin: 10px;
    border: solid 1px #D3D3D3;
}
}

QooQではデバイス幅が480px以上でPC向けのスタイルが適用される様に作られています。

今回は一般的なタブレットの幅でもスマホ同様にリストスタイルとしたい為、@media (max-width: 768px;)として768px以上でPC向けスタイルになるようにしています。数値を変える事で任意のサイズに可能です。

注:.list-list-img-defは、画像無記事の対応箇所”no image"画像の表示です。

以上