2015/01/23

画像貼りテスト

(# ゚Д゚)ノ モニカ投下  おかしい文字の位置が上に行かなくなった…


・・・記述すると、ちゃんと並ぶよ。 って、残念ながら Bloggerを含む多くのブログサービスの投稿システムでの 画像レイアウト機能は得てして余計なコトしかしないので、 本来は少し作業が必要になります・・・ が、おきつねブログテンプレートは 手抜きで気軽に投稿出来るようCSSを細工してあるので、手間は僅か。 ルイズさんが投稿していた元の状態・・・
<pre class="postset"><a href="http://1.bp.blogspot.com/-QGBwjvZkERw/VME2eq4H_WI/AAAAAAAAAbk/Y5aVp8f0XK0/s1600/%E3%83%A2%E3%83%8B%E3%82%AB.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://1.bp.blogspot.com/-QGBwjvZkERw/VME2eq4H_WI/AAAAAAAAAbk/Y5aVp8f0XK0/s1600/%E3%83%A2%E3%83%8B%E3%82%AB.png" height="200" width="153" /></a><div class="separator" style="clear: both; text-align: center;">
</div>
(# ゚Д゚)ノ モニカ投下  おかしい文字の位置が上に行かなくなった…
</pre>
・・・から、不要な記述を消してしまうだけ。 この内、まず href= に続く内容がアップロードした画像ファイル本体で、 src= に続いているのは劣化版。 だから aタグは捨てて、imgタグのsrcに aタグのhrefのURLを割り当てるだけ。 そのように変更した添削がコレ・・・
<pre class="postset">(# ゚Д゚)ノ モニカ投下
<img src="http://1.bp.blogspot.com/-QGBwjvZkERw/VME2eq4H_WI/AAAAAAAAAbk/Y5aVp8f0XK0/s1600/%E3%83%A2%E3%83%8B%E3%82%AB.png" />
・・・画像の下にも続きの文章入れられますよ。
</pre>
自動で枠内に収まるようCSSで指定してあるので、仮に画像サイズが大きなモノだったとしても、コンな簡単な記述で大丈夫w - 添削表示結果 ------------------ (# ゚Д゚)ノ モニカ投下 ・・・画像の下にも続きの文章入れられますよ。 -------------------------- もし、画像サイズを調整したい場合は、幅か高さのいずれかを指定する・・・
<pre class="postset">(# ゚Д゚)ノ モニカ投下
<img style="width:250px;" src="http://1.bp.blogspot.com/-QGBwjvZkERw/VME2eq4H_WI/AAAAAAAAAbk/Y5aVp8f0XK0/s1600/%E3%83%A2%E3%83%8B%E3%82%AB.png" />
・・・画像の下にも続きの文章入れられますよ。
</pre>
コレは幅だけ指定してある。 高さ指定ならwidthの代わりにheightを使う。 - 添削表示結果 ------------------ (# ゚Д゚)ノ モニカ投下 ・・・画像の下にも続きの文章入れられますよ。 --------------------------

・・・ブログは チャットと違って、メール以上にタイトルが重要だったりします、忘れずに入力して下さいね・・・(;^ω^)


また、ラベルも活用出来る様になると、よりコンテンツっぽくなりますよ(^_^)


・・・ログを投稿する場合、[作成]モードは避け、 [HTML]モードを利用して下さいね。 [作成]モードでは、投稿編集画面で見えない状態でタグが追加されます。 ・・・セキュリティ的には無害ではありますが、見た目が壊れる事も多いので使用しないで下さい。 もし、[作成]モードにしてしまったり、[作成]モードから[HTML]モードに切り替えた直後は、 表示破綻を避ける為、編集を破棄して下さい。 一度 [HTML]モードを選択しておけば、次回からは[HTML]モードで投稿を開始出来ます。

1 件のコメント: