2015/01/23

画像貼りテスト 




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



 
･･･記述すると、ちゃんと並ぶよ。


って、残念ながら Bloggerを含む多くのブログサービスの投稿システムでの 画像レイアウト機能は得てして余計なコトしかしないので、
本来は少し作業が必要になります･･･ が、おきつねブログテンプレートは 手抜きで気軽に投稿出来るようCSSを細工してあるので、手間は僅か。

ルイズさんが投稿していた元の状態･･･



<pre class="postset"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguUNBovb804wxqZ43sgZJspecy6-wnfd_bdDOBGJ8ldYXIrGrSVHvlyy1KgfQudpRHzEkAlY1ssJXhLLQ32p6XoYLvXjKji96mXx2jV5B7qn4kSnyXcL6PZ2A0H6mVN-UC9fKgGnwMYxo/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguUNBovb804wxqZ43sgZJspecy6-wnfd_bdDOBGJ8ldYXIrGrSVHvlyy1KgfQudpRHzEkAlY1ssJXhLLQ32p6XoYLvXjKji96mXx2jV5B7qn4kSnyXcL6PZ2A0H6mVN-UC9fKgGnwMYxo/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguUNBovb804wxqZ43sgZJspecy6-wnfd_bdDOBGJ8ldYXIrGrSVHvlyy1KgfQudpRHzEkAlY1ssJXhLLQ32p6XoYLvXjKji96mXx2jV5B7qn4kSnyXcL6PZ2A0H6mVN-UC9fKgGnwMYxo/s1600/%E3%83%A2%E3%83%8B%E3%82%AB.png" />
･･･画像の下にも続きの文章入れられますよ。
</pre>







自動で枠内に収まるようCSSで指定してあるので、仮に画像サイズが大きなモノだったとしても、コンな簡単な記述で大丈夫w



－ 添削表示結果 －－－－－－－－－－－－－－－－－－
（# ﾟДﾟ)ﾉ モニカ投下

･･･画像の下にも続きの文章入れられますよ。
－－－－－－－－－－－－－－－－－－－－－－－－－－



もし、画像サイズを調整したい場合は、幅か高さのいずれかを指定する･･･



<pre class="postset">（# ﾟДﾟ)ﾉ モニカ投下
<img style="width:250px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguUNBovb804wxqZ43sgZJspecy6-wnfd_bdDOBGJ8ldYXIrGrSVHvlyy1KgfQudpRHzEkAlY1ssJXhLLQ32p6XoYLvXjKji96mXx2jV5B7qn4kSnyXcL6PZ2A0H6mVN-UC9fKgGnwMYxo/s1600/%E3%83%A2%E3%83%8B%E3%82%AB.png" />
･･･画像の下にも続きの文章入れられますよ。
</pre>







コレは幅だけ指定してある。　高さ指定ならwidthの代わりにheightを使う。



－ 添削表示結果 －－－－－－－－－－－－－－－－－－
（# ﾟДﾟ)ﾉ モニカ投下

･･･画像の下にも続きの文章入れられますよ。
－－－－－－－－－－－－－－－－－－－－－－－－－－


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


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




･･･ログを投稿する場合、[作成]モードは避け、


[HTML]モードを利用して下さいね。



[作成]モードでは、投稿編集画面で見えない状態でタグが追加されます。
･･･セキュリティ的には無害ではありますが、見た目が壊れる事も多いので使用しないで下さい。

もし、[作成]モードにしてしまったり、[作成]モードから[HTML]モードに切り替えた直後は、
表示破綻を避ける為、編集を破棄して下さい。

一度 [HTML]モードを選択しておけば、次回からは[HTML]モードで投稿を開始出来ます。
: ■

1 件のコメント:

注: コメントを投稿できるのは、このブログのメンバーだけです。

登録: コメントの投稿 (Atom)