最新情報

  • 2019/08/18
    ブログを更新しました。
    2018/04/30
    冷やし中華...じゃなかった、Twitterはじめました。

このサイトに関して



当サイトご利用上の注意

  • 記事へのリンクはご自由になさって結構です。
    但し、画像等、記事内のコンテンツの無断転載、画像への直接リンクによるまとめサイト等他サイトへの転載は固くお断りします。

    2019/04/14現在、コメント欄の認証方法やNGワード設定等、時々変更しています。メールアドレスの入力が求められる場合、とりあえずメールアドレスの形をしていれば(@の前は適当でも)OKです。

    上記に関し、詳しくは下記バナーから「当サイトについて」をお読み下さい。



    このブログの趣旨など。コメント欄はゲストブックとしてご利用下さい。


    記事についてご不明な点などはメールでは回答しかねますので、各記事のコメント欄にお願いします。




特設コーナー

  • Banner_kanan_fund


















外部サイト(その他)

  • 台湾の名前で東京オリンピック参加を!署名活動


    憲法改正を実現する1,000万人ネットワーク 美しい日本の憲法をつくる国民の会









管理人ポータル

大師小同窓会関連












  • 画像を提供、あるいはオリジナル写真を貸して下さる方は管理人までご連絡ください。


我が町!大師の情報

  • 大師の歴史・町名の由来

各種ノウハウ集



私家版スクラップブック

  • ブログ主の個人的スクラップブック集です。

    100円ショップの木箱やディスプレイケースなどを利用したドールハウスのまとめページです。

    メンテナンス中のため一時アクセスを制限しています。

友達の輪・お薦めSHOP

  • CHITIのボディデザイン
    魅せるボディデザイン/カラダ作りの本質とは!?
    川崎市在住のインストラクターが近隣のスポーツ施設や公園・ご自宅でのパーソナルトレーニング受け付けます。




    かわさき楽大師

    ファッション・雑貨の店 「+R」

    ヘアーサロンE'(イーダッシュ)


« 【ブログの楽しみ方】ブログパーツのリスク【ココログ】 | トップページ | 【ブログ主覚書】水道管洗浄と排水マスの修理/キッチンガーデニング/NHK BSゴジラ特集 »

2014/06/22

【ブログの楽しみ方】画像の横の「記事の回り込み」を解除する【ココログ】

この記事の目的

HTMLタグの知識がない方でも『HTMLの編集』モードでタグを編集するテクニックをご紹介するものですが、HTMLタグを体系的に説明するものではありません。

 

「記事の回り込み」を解除して画像をきれいに配置する

ココログでは画像を右や左に寄せて、記事(文)をその右や左に回り込むように配置することができます。(図-1の右側が「画像の左寄せ+記事の回り込み」、左側は回り込みなしの指定。)

Clear_left01 図-1

画像を左寄せにして記事をその右側に回り込みさせる場合、2枚目の画像や文を1枚目の画像の真下にきれいに配置するために、何度か改行して調節したにも関わらず、公開したらずれていた、という経験はありませんか?(図-2)

Clear_left02 図-2

これは、編集画面を「記事の編集」から「HTMLの編集」モードに切り替えて、画像の回り込みを解除するHTMLタグ「<br clear="left" />(左寄せ解除)を記述することで解消(※注意)できます。

※注意:ココログでは、HTMLタグを知らなくてもブログ(=HTML文書)を書けるように、「記事の作成」モード、HTMLタグを編集できるように、「HTMLの編集」モードが提供されています。(図-3)

Clear_left03図-3

しかし、全てのHTMLタグが使えるわけではなく、また、正しいHTMLタグを手で入力しても、「記事の作成」モードとの整合性をとるために、自動的に編集しなされたり、一部のタグや要素が無視されたりしてしまいます。これは仕様なのでしかたがありません。

このため、ここでの説明は、ココログで受け入れられるような“コツ”を加味した説明になっています。

 

ココログでの<br clear="left" />の使い方

以下、「画像の左寄せ+記事の回り込み」を例に説明します。

まずはサンプルです。


Asahi2

あああ

(ここは一行分のスペース+上下にマージンが開いています。)

Asahi2

いいい

ううう
えええ

おおお


以下は、上の部分のHTMLタグです。


<p><a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/01/31/asahi2.jpg"><img width="200" border="0" alt="Asahi2" title="Asahi2" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/01/31/asahi2.jpg" style="float: left; margin: 0px 5px 5px 0px;" /></a>
</p>

<p>あああ<br clear="left" /> </p>

<p> (ここは一行分のスペース+上下にマージンが開いています。)</p>

<p><a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/01/31/asahi2.jpg"><img width="200" border="0" alt="Asahi2" title="Asahi2" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/01/31/asahi2.jpg" style="float: left; margin: 0px 5px 5px 0px;" /></a>
</p>

<p>いいい</p>

<p>ううう<br clear="left" />えええ</p>

<p>おおお</p>


ピンクの背景部分は画像を表示するためのHTMLタグです。

そもそも「<br />」とは「改行」タグで、ブラウザがFirefoxなら、[Shift]キー+[Enter]キーで、間(マージン)を空けずに改行できますが、この時に挿入されるタグです。(下の例)

あああ
いいい

これに「clear="left"」という左回り込みの解除を行うオプションを追加したのが、「<br clear="left" />」です。

上のサンプルで「<br clear="left" />」は2カ所ありますが、下の方から説明すると、同一段落(<p></p>)内で「ううう」と「えええ」の間に入っているために、“左回り込みを解除し、且つ改行”してくれます。そのために、「えええ」は画像の右側ではなく、下に配置されます。

上の方の、「<p>あああ<br clear="left" /> </p>」では、「<br clear="left" /> は、実は、右側に半角スペースが入っています。(「</p>」の前。半角スペースを■で表現すると、「<br clear="left" />■」となっています。)

これは「<br clear="left" />」だけだと無視されてこのタグが消えてしまうので、苦肉の策で半角スペースを加えています。

このようにちょっと“コツ”が必要ですが、改行キーをやみくもに叩くよりはスマートに行を改めて画像を配置することができます。

  

« 【ブログの楽しみ方】ブログパーツのリスク【ココログ】 | トップページ | 【ブログ主覚書】水道管洗浄と排水マスの修理/キッチンガーデニング/NHK BSゴジラ特集 »

コメント

コメントを書く

(ウェブ上には掲載しません)

« 【ブログの楽しみ方】ブログパーツのリスク【ココログ】 | トップページ | 【ブログ主覚書】水道管洗浄と排水マスの修理/キッチンガーデニング/NHK BSゴジラ特集 »

counter since 2018/12/25

  • Flag Counter

    FLAG Counterのロゴをクリックすると、更に詳しい分析結果が表示されます。
    ココログのアクセス解析よりは少ない数字になるようです。
サイト内検索
ココログ最強検索 by 暴想
2019年8月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

sponsored link


ドールハウス工作おすすめ参考図書

ドールハウス工作おすすめアイテム(材料・工具)

カテゴリー

無料ブログはココログ