すたすた式
Blogger QooQ
テンプレートQooQ ver.2.00で確認
画像本体よりもクリックできる範囲が広い状態で画像が表示されてしまう。（画像の外側でもクリック可能な状態）
以下の手順で挿入した画像で発生
（2022年10月時点）投稿エディターの「HTMLビュー」で「画像を挿入」ボタンを使うと、以下のようなHTMLで画像が挿入されます。
<div class="separator" style="clear: both;"> <a href="" style=""> <img/> </a> </div>
「レイアウトの選択画面」の「配置」を選択するときに「なし」または「中央」を選択すると、aタグの中にstyleの属性値として以下が付与されます。
a
style
display: block; padding: 1em 0; text-align: center;
いくつか修正方法が考えられましたが、今回は該当するaタグに対してCSSを追加する方法を採用しました。
下記を追加
.separator a { width: fit-content; margin: 0 auto !important; }
※QooQは初期設定で下記が設定されているので!importantが必要
!important
.separator a { margin-left: 0!important; margin-right: 0!important; }
外側の.separatorに対して
.separator
.separator { width: fit-content; margin: 0 auto; }
とすると、「レイアウトの選択」の「配置」を「左」か「右」にしたときに、画像が中央に寄る。
配置が「左」のときに付与されるstyle
display: block; padding: 1em 0; text-align: center; clear: left; float: left;
自分の運用だとaタグの削除やstyle属性の削除でも問題ないかな？とも思いましたが、今回aタグは残しておくことにしました。
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿