QooQ_LISTテンプレートの記事一覧の画像をカスタマイズ！丸型を四角にしてちょっと大きな画像でキレイにする！-monocotoyom

　今回は、QooQ_LISTタイプの記事一覧の画像を四角型に変更します！
　QooQは記事一覧がタイル型になる通常版とリスト状になるLIST版があります。
　リスト版の画像は丸型のウインドウ内に表示されるのですが、四角い方がいいかなと感じています。

　ということで、今回はQooQ_LIST版の記事一覧を四角にした体験を具体的にわかりやすくまとめて記事にしています。

QooQ_LISTの記事一覧の画像をカスタマイズ！丸型を四角にしてちょっと大きな画像でキレイにする！

　Bloggerでブログを作っている方は標準のテーマで満足でしょうか？
　問題けど、ちょっといじってみたいかもなんて感じてませんか？
　そんな時はBlogger用のテンプレートを使ってみるのもいいかもしれません。

　今回の記事は無料で入手できるテンプレートQooQをカスタマイズしてみるといった記事です。
　QooQはくうく堂様で配布されています。
　QooQの導入時の記事もありますのでよければご覧ください。

さて、話をQooQのカスタマイズに戻します。

　QooQは無印のQooQ（ホームの記事がタイル型、以降　通常版）とQooQ_LIST（ホームの記事がリスト状、以降　LIST版）の2種類あります。
　どちらがいいか悩みませんでしたか？

　まずは、LIST版のカスタマイズをする前に、通常版とLIST版のホームの記事表示数の違いを比較してみます。
　結果を先に述べますと、

通常版では、PC画面では4記事、スマホ画面では2記事の表示
LIST版は、PC画面では4記事、スマホ画面は4記事の表示

　スマホからの検索が多いことを考えるとLIST版の方が見通しがよいと思います。
　具体的なイメージを以降に記載します。

QooQ通常版

PC画面

スマホ画面

LIST版

PC画面

スマホ画面

　LIST版のホーム画面にはPC画面と同様に4記事程度が掲載されてます。

　わたしの感覚ですと、LIST版の方がホームを見た時に見通しがいいかなと。
　ただ、丸型に額縁されていて画像が把握しにくいのと、やはり少し通常版と比べると画像が小さいかなぁという印象でした。

QooQ_LISTの記事一覧カスタマイズ結果！

　という事で、QooQ_LIST版のホーム画像を丸型を四角型の額縁に変更し、画像を大きくするカスタマイズを行ってみます。

　結果をはじめに紹介します。

LIST版は、PC画面では4記事、スマホ画面は3記事の表示

具体的なイメージを以降に記載します。

カスタマイズ済み_LIST版

PC画面

スマホ画面

　スマホ版は4記事から3記事になりましたが画像が大きくなりわかりやすい印象になりました。

QooQ_LISTの記事一覧をカスタマイズコード変更点

　さて、上記の画像を四角の額縁にして、ちょっと大きめにした記事一覧はいかがでしたでしょうか？

　画像の大きさは、カスタマイズで決められますよ。

　カスタマイズの要点は以下になります。

丸い額縁を四角に変更する。
画像をキレイに大きく変更する。

　QooQ_LISTでは、アイキャッチ画像はサムネイル画像を使用しているのでサイズを大きくするとかなぼやけた画像になります。
　そこで、画像を大きいものにしているのです。
　しかし、読み込みスピードとトレードオフの関係ですので、悩むところです。
　今回はキレイにすることを選んでいます。

　具体的な手順を以降に記載します。
　尚、このカスタマイズはわたしが実際にいじってやってことですが、知識不足のところもありますので、実施する場合は自己責任でお願いします。
　また、コードの変更はHTML編集を使用します。
　Bloggerの管理画面→テーマ→カスタマイズの隣の▼→HTML編集
　の順でHTML編集画面をご利用ください。
　テンプレートの編集を行いますのでテーマをバックアップしてから作業することをお勧めします。

丸い額縁を四角に変更

　オリジナルソースの".list-item-img"を検索します。
　HTML編集画面で、Ctrl＋Fで検索ダイアログがでますのでそこに上記の文字をいれてキーボードのenterを押してください。

　尚、ブラウザ側の検索が開く場合があります。その場合はコードが表示されている部分を一度クリックしてからCtrl＋Fを実行してください。

オリジナルコード部分

.list-item-img{
display: block;
border-radius: 50%; width: 72px; height: 72px; object-fit: cover;

上記のコードを以下のように書き換えます（赤文字部分です）

.list-item-img{
display: block;
width: 100%; object-fit: cover;

具体的にはオリジナルソースコードに以下の変更を実施しました。
　　　border-radius: 50%;を削除
　　　width:75px→ 100%;に変更
　　　height:75px;を削除

わたしは、オリジナルコードはコメントアウトして残すようにしています。

画像をキレイに大きく変更

　オリジナルソースの”<img class='list-item-img' expr:src='data:post.thumbnailUrl'/>”を検索してください。

検索方法は、".list-item-img"と同じ手順ですので参考してください。

オリジナルコード部分

このコードを以下に修正します。

わたしはオリジナルコードをコメントアウトして残すようにしています。

　このresizeImageは、テンプレートコマンドと呼ばれるBloggerのサーバー機能のようです。
resizeImage(画像URL, 新しい画像の幅, アスペクト比)
　というパラメータをもっているようです。

画像の大きさは、”新しい画像の幅”で決まります。
具体的には、

　で赤字で示す数字を変更することになります。
　”丸い額縁を四角に変更”章で、width: 100%;に変更、height:75px;を削除したのは、あたらしい画像の幅で表示画像を決めたいからです。

　ちなみアスペクト比を省略するとオリジナル画像比のままになるようです。

まとめ

　今回のポイントは、以下2点になります。

border-radiusを削除して丸型を四角に変更
resizeImageテンプレートコマンドでキレイな画像を生成

　見た目のために、アイキャッチ画像を大きめのサイズに変更したのはいいことなのだろうか？ちょっと悩むところですね。

編集後記

　今回は、HTML編集もありちょっと難易度が高かったのです。
　いろいろ参考にしながらいじってたらこうなった！
　感は拭えませんね。

　まずは、".list-item-img"側だけ大きいサイズに変更したのですが画像がぼやけて残念な感じでした。

　そこで、resizeImageテンプレートコマンドで指定した大きさの画像をつくるように変更しました。

　ちなみに今回、".list-item-img"側のheightパラメータを削除しました。
　しかし、height　100%を指定しても同様な扱いになりました。
　widthは%指定できるとのことですが、heightは％指定できないらしいので今回は削除しました。

　このへんまだ知識不足でトライアンドトライでした。
　あとは、タイトルとラベル、日付の位置の装飾や位置の変更をして、Smart風にできるといんだけどなぁと日夜調査して楽しい毎日です！

　その他のカスタマイズもこちらにまとめていますので参考にご覧ください。

　→Blogger用無料テンプレートQooQ導入とカスタマイズまとめ

　ほかにやり方、対処の仕方をご存知の方はコメントいてだけると助かります。

　また、おなじお悩みを抱えていた方もこの記事で解決できたらコメントいただけるとはげみになりますので、コメントをお願いします

QooQ_LISTテンプレートの記事一覧の画像をカスタマイズ！丸型を四角にしてちょっと大きな画像でキレイにする！