【ブログ設定】QooQテンプレートの一覧表示のサムネを正方形に変更
デフォルトの一覧表示
現在私が使っているbloggerのテンプレートはQooQを使用しています→QooQのダウンロードはこちら
とても使いやすいサイトで愛用していますが、今回は一覧表示のサムネの画像についてです
CAD日和のサイトはQooQのリスト版を使用していますが、別のサイトでは通常版を使用しています
通常版はブログホーム画面の一覧表示で大きなサムネイル画像が表示されるのが特徴です
画像をメインで表示したいときにとても見やすいのですが1つ気になるところがありました
それはサムネ画像の比率です
本家のサンプルページを見てもらえるとわかりますが
横の表示が長く縦が短くなっています
私はスマホで撮った画像をよく使っているので縦長の画像が多くなり、使用したときにサムネで切れてしまうことが多くなってしまいました
このサムネの画像のサイズを変える方法はないかなと調べてみました
ネットで調べてみると前からQooQを使用している人はなぜかサムネが正方形に近くなっています
そして本家サイトのリリースノートを見てみると画像サイズを変更したとの文字がありました
これが原因ですね
これをヒントに変更したいと思います
コードを確認してみるとすぐに変更箇所がわかりました
といってもコードを検索して変更してみたらたまたま変わっただけですが
変更方法
それではまず、ブログ編集画面からブログカスタマイズ > テーマ > HTMLの編集
HTMLを編集するのでバックアップは取っておきましょう
変更するときは何でもバックアップが重要です
HTML編集画面に入ったら、画面内でキーボードの「Ctrl」+「F」を押し検索画面を表示させます
そこに「2:1」と入力してください
すると「2:1」の文字が1つだけ黄色くハイライトされるかと思います
ここを「1:1」にすると正方形になります
他の比率に変えたいときはここの数字を変更すると変化しますのでお試しください
まとめ
このような方法でサムネ画像の比率を変えることができます画像を一覧で見せたいときには大きい方がきれいだと思うので是非お試しください
いまだにHTMLはよくわかりませんが、何となくいじっているだけでもどうにかなるものですね
どんどんカスタマイズを勉強していきたいです
ブログがきれいだとブログを書くモチベーションも上がりますね