Home
Menu
Side
Twitter
Top
ホーム / Blog | QooQ |

【 QooQ カスタマイズ 】 トップページの記事一覧をリスト表示にしてみたよ！

2020/09/07

Blog QooQ

この記事はこんな悩みを解決します！
  • QooQ の記事一覧をリスト表示にさせたい

こんにちは、HARU（ @HARU ）です。

久しぶりに QooQ のカスタマイズやってみようと思います。

今回はトップページの記事一覧をリスト表示にしました！

「 え？元々、QooQ には記事一覧がリスト表示されているテンプレートがあるじゃないか？ 」って？

今までのカスタマイズ内容をやり直すより、今のを調整したほうが楽じゃないですか！！

はい。今になって「 リスト表示いいな 」って思ったからやる、カスタマイズになります。

注意

テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。

不安な方は以下の関連記事を参照してください。

リスト表示にしようと思った理由

まず簡単な質問をさせてください。

皆さんはあるブログに訪問しました。

そこで皆さんが最も気になる（ 気にする ）ことは何ですか？

私はこの答えをタイトル（ と内容 ）と考えています。

つまりパッと見でタイトルが読めた方がユーザーからすればいいのでは？ということです。

さて、改めて今の状況を見てみます。

QooQ パッと見でタイトルが読みづらいですよねイメージ

サムネイル画像が主張しすぎていて、タイトルが読みづらいですね。

目線をジグザグに動かさなくてはいけないのも、読みづらい原因かもしれません。

ということで、リスト表示化し、タイトルを読みやすくしたいと思った次第です。

ただし、ここで間違ってはいけないのはサムネイル画像があることは悪ではないことです。

画像を見て読みたくなる可能性もあります。文字よりも画像のほうが情報を簡潔に伝えやすいはずだからです。

本カスタマイズを実施するに当たって

こちら QooQ のデフォルト状態からのカスタマイズではなく、少しだけ手を加えた状態からの調整になります。

デフォルト状態からのカスタマイズの場合、多少違う点があるかもしれません。

以下に予め行っている調整が記載されていますので、参考にしてください。

記事リンクのカスタマイズ

記事一覧リスト化イメージ

正方形（ サムネイル画像メイン ）から長方形（ タイトルメイン ）に変更します。

これにより、タイトルが読みやすくなります。

また、サムネイル画像もなるべく小さくならないように調整しました。

変更前 変更後

QooQ トップページ記事一覧変更前

QooQ トップページ記事一覧変更後

CSS 変更

CSS.list-item.list-item-inner.list-item-img.list-item-titleの変更を行います。


  .list-item{
    width: 100%; /* 追記 */
    /*削除 flex-basis: 48.5%; */
    margin: 8px 0 10px;
    border-radius: 3px;
    background: $(other.back);
    position: relative;
    z-index: 1;
    box-shadow: 0 0 3px 0 rgba(0,0,0,.12), 0 2px 3px 0 rgba(0,0,0,.22);
  }


  .list-item-inner{
    padding: .5em; /* 変更 */
    border-top: none;
    display: flex; /* 追記 */
    flex-direction: column; /* 追記 */
    justify-content: space-between; /* 追記 */
    flex-grow: 1 /* 追記 */
  }


  .list-item-img{
    display: block;
    /*削除 width: 100%; */
    width: 40%; /* 追記 */
    padding: .3em; /* 追記 */
    align-self: center; /* 追記 */
  }


  .list-item-title{
    /*削除 margin: 1.3em .5em; */
    font-weight: bold;
    font-size:20px; /* 変更 */
  }

CSS 追記

以下の CSS を Blogger テンプレートの CSS 欄に記述します。

先ほど編集した CSS.list-itemの近くに記述すると、メンテナンス性もいいと思います。


  .list-item article{
    display: flex;
  }

まとめ

QooQ デフォルトである記事一覧リスト表示よりも、サムネイル画像が小さくなく、タイトルも読みやすくなって個人的には良くなったと思います。

参考になれば幸いです。

QooQ