前提：Bloggerで、テンプレートはQooQ list
先に、画像を入れた際の文章の回り込みについて書いた。
あの時のテストサンプルは画像のみの場合で、
<a href="https://blogger.画像のURL の前に<div class="imbox">を入れていた。<div class="separator" style="clear: both; text-align: center;">
<div class="imbox">
<a href="https://blogger.googleusercontent.com/img/b/**************************.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" data-original-height="***" data-original-width="300" height="***" src="https://blogger.googleusercontent.com/img/b/**************************.jpg" width="***" />
</a>
</div>
</div>なおa href=で左右に1emのマージンが付いてるが、QooQの初期設定で、
.separator a {margin-left: 0!important;margin-right: 0!important;}があるため、この左右1emは無視されるから気にしなくていい。
だが画像だけの時、始まりは
<div class="separator"~ だ。わかりやすいように、そこからimboxで囲んだ方がいいのだろうかとも思った。そして画像にキャプション（説明文）を付けたい事もあるだろう。キャプション付きだと自動的にテーブル使用になる。それぞれの表示結果をそろえたいと思う。
/* imboxの指定*/
.imbox{
float: left;
margin-right: 1em; /*右に回り込んだ文字とのスペース*/
margin-bottom: 0;
}左右に画像を置くならこうして、右画像と左画像でクラス指定を使い分ける。
.imbox-r {
float: right;
margin-left: 1em; /*左に回り込んだ文字とのスペース*/
margin-bottom: 0;
}
.imbox-l {
float: left;
margin-right: 1em; /*右に回り込んだ文字とのスペース*/
margin-bottom: 0;
}というわけで３パターンを試してみた。
以下の編集画面は上から、
1. 画像のみ
<div class="separator"~ の前に<div class="imbox">入れた。2. 画像のみ
<a href="https://blogger.~ の前に<div class="imbox">入れた。3. キャプション付き
<table align="center"~ の前に<div class="imbox">入れた。
画像のみの場合は、1.でも2.でも結果は変わらない。しかし3.のキャプション付きはテーブルになっている分、画像が少し右にズレている。このため、画像のみとの混在では差が生じ、美しくない。
ソースを見たところ、BloggerデフォルトのCSSは、
table.tr-caption-container {
padding: 4px;
margin-bottom: .5em;
}となっていた。パディングが邪魔なんだな。こう修正。
table.tr-caption-container {
padding: 0 !important;
margin-bottom: 0 !important;
}結果は、うまくいった。
<div class="shime"></div>を入れている。CSSは、
.shime {clear: both; display:block; padding:1em;}隙間を少なくしたいのなら、パディングの数値を減らせばいい。
寄せた画像を、スマホ表示時は中央画像にするためのCSS。
/* モバイル時、画像を中央寄せにする*/
@media ( max-width : 480px ) {
.imbox{float: none; text-align:center; margin-right: 0;}
}左右に画像を置いていたのなら、
@media ( max-width : 480px ) {
.imbox-l,.imbox-r {float: none; text-align:center; margin-right: 0;}
}と、いうわけで前の記事は忘れて。
まー、ブログで画像に文章回り込ませるとか、わざわざやる人は少ないだろうけどさ。
投稿
0 件のコメント:
コメントを投稿