テーマをstinger8に変えました
このブログは、今までワードプレスの「stinger5」を使用させていただいておりましたが、stinger8にテーマを変更しました。ヘッダー画像を全幅に変更したかったのが一番の理由です。元の「stinger5」をカスタマイズしようと思ったのですが、「stinger5」もいろいろカスタマイズしてごちゃごちゃになっていたので、思い切って変更しました。
テーマの変更は思いのほか簡単にできました。すべてデフォルトされてしまうのかと心配でしたが、プラグイン・ファビコンなどは引き継いでくれたのでありがたいです。
stinger8で大きく変わったナと感じたのは画像の位置です。画像を入れた過去記事を修正するのが大変でした。
スポンサーリンク
stinger8ではメディア追加で「左」「右」を選ぶと画像の横に文章が回りこまれる
stinger8では、画像を「左寄せ」「右寄せ」にすると自動的にその横に文章を回りこませることができます。回り込みなしにしたい時は画像の位置は「なし」か「中央」を選びます。
今までは子テーマに自分で設定していたので、これは画期的です！
しかし、それは文章中ならこれでいいのですが、画像の後に見出しタグがくると画像の横に見出しがくっついてしまうんです(-_-;)
これは少し見苦しいので、見栄え良くなるように体裁を整えたいと思います。
見出しタグの前に左回り込み画像を入れた場合
見出しタグの前に画像(class=”alignleft”)を入れると、このように見出しの横に画像が来てしまいます。これはこれで悪くはないのですが、画像が大きい場合はもっと崩れます。
それでは回り込み解除の方法ですが、テキスト入力画面で、管理画面の上の方に回り込み解除というボタンがあります。
回り込みを解除したい範囲を反転させてこのボタンを押せば回り込みが解除されます。今回の例では画像タグを範囲指定して「回り込み解除ボタン」を押しました。自動的にclearfixというタグが囲んでくれます。このタグはfloatで左寄せ（もしくは右寄せ）になった要素の回り込みを解除します。
同じような働きをするタグで
<br clear=”all” />
というのがありますが、私はこれをよく使います。画像の後に<br clear=”all” />と入れるだけで回り込みを解除します。
下記の例では、画像の下に<br clear=”all” />と入れました。
stinger8画像の回り込み解除－他の方法
メディア追加で画像を挿入した場合、左・右を選ぶと下記のようなタグになります。「あ、間違えた！」と思ったら、この「left」「right」の部分をnoneに直せば単純な左寄せ画像になりますね。
<img class="alignleft size-full wp-image-xxx" src="http://xxxxx/wp-content/uploads/sample.jpg" alt="" width="200" height="256" />
<img class="alignright size-full wp-image-xxx" src="http://xxxxx/wp-content/uploads/sample.jpg" alt="" width="200" height="256" />
もう一つの方法ですが、
class=”alignleft” で回り込むのがどうしてもいやなら、子テーマに
img.alignleft {display: block; margin: 0 auto 0 0; }/* 配置位置 左 */
と入れておけばメディアを追加で「左」を選んでも文章は回り込みません。
????????
ランキングに参加しています。ポチッと応援よろしくお願いいたします。
