【ブログ設定】QooQテンプレートの一覧表示のサムネを正方形に変更

9/11/2019

ブログ設定

t f B! P L

※当サイトではアフィリエイト広告を利用しています


【ブログ設定】QooQテンプレートの一覧表示のサムネを正方形に変更

デフォルトの一覧表示

現在私が使っているbloggerのテンプレートはQooQを使用しています
→QooQのダウンロードはこちら

とても使いやすいサイトで愛用していますが、今回は一覧表示のサムネの画像についてです
CAD日和のサイトはQooQのリスト版を使用していますが、別のサイトでは通常版を使用しています
通常版はブログホーム画面の一覧表示で大きなサムネイル画像が表示されるのが特徴です
画像をメインで表示したいときにとても見やすいのですが1つ気になるところがありました

それはサムネ画像の比率です
本家のサンプルページを見てもらえるとわかりますが

横の表示が長く縦が短くなっています

私はスマホで撮った画像をよく使っているので縦長の画像が多くなり、使用したときにサムネで切れてしまうことが多くなってしまいました

このサムネの画像のサイズを変える方法はないかなと調べてみました
ネットで調べてみると前からQooQを使用している人はなぜかサムネが正方形に近くなっています
そして本家サイトのリリースノートを見てみると画像サイズを変更したとの文字がありました

これが原因ですね
これをヒントに変更したいと思います
コードを確認してみるとすぐに変更箇所がわかりました
といってもコードを検索して変更してみたらたまたま変わっただけですが

変更方法

それではまず、ブログ編集画面から
ブログカスタマイズ > テーマ > HTMLの編集

HTMLを編集するのでバックアップは取っておきましょう
変更するときは何でもバックアップが重要です

HTML編集画面に入ったら、画面内でキーボードの「Ctrl」+「F」を押し検索画面を表示させます
そこに「2:1」と入力してください
すると「2:1」の文字が1つだけ黄色くハイライトされるかと思います

ここを「1:1」にすると正方形になります

他の比率に変えたいときはここの数字を変更すると変化しますのでお試しください

まとめ

このような方法でサムネ画像の比率を変えることができます
画像を一覧で見せたいときには大きい方がきれいだと思うので是非お試しください

いまだにHTMLはよくわかりませんが、何となくいじっているだけでもどうにかなるものですね
どんどんカスタマイズを勉強していきたいです
ブログがきれいだとブログを書くモチベーションも上がりますね


このブログを検索

スポンサーリンク

ABOUT



CAD日和 / CADデザイナー

 三次元CADのFusion360やSolidWorksなどの操作やデザイン作成の紹介、3Dプリンターや機械設計について書いてます。

ブログ情報

QooQ