デフォルトではタイトルの長さでボックスが長くなってしまい崩れて統一感が無くなります。
高さを固定する事にしました。
記事タイトル長さを固定
【Blogger/QooQ】トップページの一覧に表示される記事のタイトルの長さを固定値とする
QooQのトップページについてカスタマイズしています。 今回はトップページの記事タイトル表示について。 長いタイトルが折返して表示される場合、高さが伸びて不揃いになる事を変更してみた。
phoodev.blogspot.com
この記事を参考にしています。
HTML編集
.list-item-titleを探して青字を追加します。
height : 60px;の数字を変える事でタイトルの行数を変えれます。
1行20pxなので60pxは3行です。
デフォルト画像の設定
画像が無いと大きくレイアウトが崩れてしまうのでその対策です。
【Blogger/QooQ】トップページに表示させるサムネイル無し記事にデフォルト画像を表示させる
新しく無料のテンプレート「QooQ」をカスタマイズする第1弾。 画像無しの記事でも、トップページにデフォルト画像が表示される様にした。
phoodev.blogspot.comこの記事を参考にしています。
HTML編集
<a expr:href='data:post.url'>を探して青字を追加します。CSSを変更
.list-item-imgを探して青字を追加します。
参考サイトでは高さの指定もあるのですが、設定すると他の投稿と画像の大きさが違ってしまいます。
指定しなければ同じ比率を保ってくれるので削除しました。
サムネサイズを2:1から16:9へ変更
それでもこのブログを確認するとサイズが違うんですが…なんで💦➯QooQは画像サイズ2:1で表示している。私が使う画像は16:9が多いので指定する必要がありそう。
赤字の部分を16:9にしておきました。
<a expr:href='data:post.url'>の下にあります。
あと、ブログカードを利用した時はデフォルト画像よりブログカード（人の記事）のサムネになるのが問題ありそう。
0 件のコメント:
コメントを投稿