【つぶやき】切り貼りHTML～画像配置編～
今日の幸ちゃんの更新が少し止まってしまっているのに、
今回も幸ちゃんとは関係がない記事を描いちゃいます。
※過去の分は、まとめて追加するもんね。←開き直り。
今回は、切り貼りHTMLと題して、
私が良く使っているHTMLのタグを紹介します。
綴り覚えてタイピングとかできません。
メモ帳に貼ったタグをコピペして使ってます。
こんな状態ですが、今回は画像を横並びにするときに使うタグの紹介です。
ぴったり横並び
このように複数枚で繋げられるような絵を並べる時に便利です。
【タグはコチラ】 このタグを絵の数だけ配置しましょう
divタグにある
style="float: left;"は、タグで囲んだ画像を左側に入れ込むという意味らしい。
コラボイベントの会話部分で使った画像も、画像をセリフの左側に…というコレが使われています。
imgタグにある
src=""は、埋め込みたい何かのURLを入れるところ。
ここの指定を間違うと画像が表示されなかったりします。
titleは、カーソルを画像の上に置いた時にちょろっと出てくる画像の名前のテキスト。
オトモダチのドット絵などで良く使う仕掛けです。
少し余白を開ける
この絵のように一定間隔を開けて配置する時に便利です。学校の教室みたいですね。
【タグはコチラ】このタグを絵の数だけ配置しましょう
float: left;のあとに margin: 20px;を追加すると20pxの余白を追加します。
画像の両端に余白がない画像か、縁取りがされている画像などを配置すると見栄えが良いかも？
最後に
画像のURLについては、色んな調べ方がありますが、
慣れるまでは画像を先に投稿して、記事のHTML編集タブから
URLを取得する方法が手っ取り早いと思われます。
余白や間隔を気にしないのであれば、写真投稿画面下に、
記事での並べ方という選択肢があるので、そこを横並びにすると
等間隔に配置してくれるので、オススメです。
ちっこい画像２枚だと、いつになく寂しい仕上がりになったりするので、
私は、写真投稿の横並び機能は使ってません…。
HTML編集時は、
開始タグ（スラッシュが頭にない）と、終了タグ（スラッシュが頭にある）に注意し、
プレビューを見ながら編集しましょう。
メモ帳などでタグを整形して貼り付けても、自動的に整形しなおされちゃうので、
見失ったりする事があります。←私だけかな？
一切タイピングをせずに切り貼りだけで画像を配置する方法でしたー。
テキストボックス？の表示も覚えたし、素材のURL公開した方がいいかなぁ？
と思う今日この頃でした。
ぽぽんた(id:mgpoponta)さん、参考になりましたでしょうか？(^＿^；
ぽぽんた(id:mgpoponta)さんの最新記事はコチラ↓↓
