最新情報

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

このサイトに関して



当サイトご利用上の注意

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

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

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



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


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




特設コーナー

  • Banner_kanan_fund


















外部サイト(その他)

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


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









管理人ポータル

大師小同窓会関連












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


我が町!大師の情報

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

各種ノウハウ集



私家版スクラップブック

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

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

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

友達の輪・お薦めSHOP

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




    かわさき楽大師

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

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


« 【ココログ新システム】画像の挿入方法/サムネイル画像を巡る諸問題と当面の対応策 | トップページ | 小笠原の甘露ハチミツ/甘露ハチミツって何? »

2019/03/24

【ココログ新システム】画像の周囲のマージン

※環境: Windows8.1、Firefox

   

HTMLタグをいじるので、やや上級向け

新システムでは画像の周囲にマージン(余白)が開かないようです。

これにより、画像を例えば左寄せにして、テキストを右側に回り込ませた場合、画像との隙間が空かず、やや見た目が悪くなっています。

以前は、下のように画像の右側と下に5pxのマージンが自動的に設定されていました。

   

   

Cocolog_my_photo_05

   

以下で説明することは、あくまでも「どうしてもマージンを入れたい」という方向けで、従来通り、自動的にマージンを付けてくれる方が良いので、そのようにブログ主から依頼を出しておきます。

ただ、「マージンとはどういうものか」ということを知っておくのも悪くないので、そのつもりでご一読ください。

   

画像の周囲にマージンを入れる

下は既にマージンを付け、文字の回り込みの解除をした後ですが、従来通り、画像の右と下に5pxを設定していますが、このようにするには、ソースコード(「<>」ボタンを押す)を開いて、画像のHTMLタグに「style="margin: 0px 5px 5px 0px;"」を追加します。

   

Image_test03ああああ
   

上の画像と「ああああ」の部分は下のようなHTMLタグになっています。

   

<a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/image_test03.jpg" target="_blank" rel="noopener"><img style="margin: 0px 5px 5px 0px;" src="http://daishi100.cocolog-nifty.com/blog/images/image_test03.jpg" alt="Image_test03" width="150" height="150" align="left" border="0" /></a>ああああ

上の例では、「<img 」の直後に入っていますが、<img~/>の中の要素は順不同なので、自分で挿入する場合は、前後に半角スペースを入れれば、どこでも構いません。

分かりやすいように「border="0"」の後ろにでも入れればいいかと思います。つまり、「border="0" style="margin: 0px 5px 5px 0px;"  />」という感じです。

   

上の例では、上下左右を個別に指定していますが、全て10pxなら、「style="margin: 10px;"」とすればOKです。(下図)

   

Image_test03ああああ
   

画像の上にも10pxのマージンが空いたので、「ああああ」の文字列より10px分下がっているのが分かるかと思います。

   

   

回り込みの解除

回り込みの解除は「ああああ」の後ろ、</div>の前にに「<br clear="left" />(全角スペース3つくらい)」を入れます。

つまり、「<br clear="left" />   」のような感じです。(全角スペースは1つだと無視されるようなので3つ入れているだけで、あまり意味はありません。)

   

<div><a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/image_test03.jpg" target="_blank" rel="noopener"><img style="margin: 10px;" src="http://daishi100.cocolog-nifty.com/blog/images/image_test03.jpg" alt="Image_test03" width="150" height="150" align="left" border="0" /></a>ああああ<br clear="left" />   </div>

   

なお、画像を入れると<div>~</div>で囲まれるので、ブログ主は画像の上下にスペース行を入れる意味もあり、予め、①スペース3個を打って改行→②改行→③スペース3個 を入力してから、スペースを打っていない行に画像を挿入しています。そうすると、画像の下にテキストを入力する際、<p>タグが維持されるからです。

イメージとしては下のような感じです。

   

■■■[改行キー] (■はスペースのつもり)

[改行キー] (←画像はこの行に挿入。画像は<div>~</div>で囲まれるので。)

■■■[改行キー]

   

実際のHTMLタグ

   

<p>  </p>
<div><a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/image_test03.jpg" target="_blank" rel="noopener"><img style="margin: 10px;" src="http://daishi100.cocolog-nifty.com/blog/images/image_test03.jpg" alt="Image_test03" width="150" height="150" align="left" border="0" /></a>ああああ<br clear="left" />   </div>
<p>  </p>

   

  

  


 

 

 

 

 

« 【ココログ新システム】画像の挿入方法/サムネイル画像を巡る諸問題と当面の対応策 | トップページ | 小笠原の甘露ハチミツ/甘露ハチミツって何? »

コメント

テスト
www.sankei.com/premium/amp/170927/prm1709270001-a.html?__twitter_impression=true

【ブログ主】
さいあきら様

わざわざ、コメントをありがとうございました。
本当に、困ったものです。
ユーザに検収をさせているようなものですねw

とても参考になります。しかし、ユーザーにこの処理を毎度強いるのはブログのシステムとしては破綻してるので、早く改善していただけると良いですねぇ。

コメントを書く

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

« 【ココログ新システム】画像の挿入方法/サムネイル画像を巡る諸問題と当面の対応策 | トップページ | 小笠原の甘露ハチミツ/甘露ハチミツって何? »

最近のコメント

counter since 2018/12/25

  • Flag Counter

    FLAG Counterのロゴをクリックすると、更に詳しい分析結果が表示されます。
    ココログのアクセス解析よりは少ない数字になるようです。
サイト内検索
ココログ最強検索 by 暴想
2019年7月
  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


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

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

カテゴリー

無料ブログはココログ