最新情報

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

このサイトに関して



当サイトご利用上の注意

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

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

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



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


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




特設コーナー

  • Banner_kanan_fund


















外部サイト(その他)

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


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









管理人ポータル

大師小同窓会関連












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


我が町!大師の情報

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

各種ノウハウ集



私家版スクラップブック

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

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

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

友達の輪・お薦めSHOP

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




    かわさき楽大師

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

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


« 【森友問題】読売が朝日の報道を裏付ける記事!? | トップページ | 【森友文書問題】財務省が決裁書の書き換えを認める/朝日新聞、毎日新聞の内部対立 »

2018/03/10

【ブログの楽しみ方】画像の周囲の余白を調節する【cocolog】

ブログ主の覚え書きとして画像を「左寄せ・記事回り込み」した際に周囲の余白を調整する方法を記します。

 

画像の「左寄せ・記事回り込み」とは、下のように、画像を挿入するときに「画像の位置」で「左(記事回り込み)」を選択します。(挿入画面の画像はこちら

 

  • 左 : 続く文章は画像の下に配置される
  • 中央 :続く文章は画像の下に配置される
  • 左(記事回り込み): 続く文章は画像の右に配置される
  • 右(記事回り込み): 続く文章は画像の左に配置される

Cocolog_my_photo_03

 

サンプル1

Cocolog_my_photo_trouble_img01

画像とテキストの間に若干の余白(隙間=正しくは「マージン」と呼ぶ)があるのが分かるかと思います。

ココログでは自動的に空く隙間は5px(ピクセル)に設定されていますが、個人的にはやや狭すぎる感があるので、いつも、HTMLタグをいじって調整しています。

この余白を調整する方法を説明するのが、この記事の目的です。

 

HTMLタグ:style="float: left; margin: 0px 5px 5px 0px;"

画像の左寄せ、あるいは右寄せを指定した場合、「HTMLの編集」に切り替えてHTMLタグを見ると、「style="float: left; margin: 0px 5px 5px 0px;"」という要素が記述がされています。これはココログが自動的に設定したものです。

 

<a href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2016/12/08/cocolog_my_photo_trouble_img01.jpg" class="mb"><img alt="Cocolog_my_photo_trouble_img01" title="Cocolog_my_photo_trouble_img01" src="http://daishi100.cocolog-nifty.com/blog/images/2016/12/08/cocolog_my_photo_trouble_img01.jpg" width="160" height="242" border="0" style="float: left; margin: 0px 5px 5px 0px;" /></a>

 

このうちの「float: left」は左寄せ(右側に文字の回り込み)を意味し、「margin: 0px 5px 5px 0px」は画像の周囲の余白を表します。(下図)

 

Cocolog_my_photo_05
 

余白を調節するときは、「HTMLの編集」に切り替えてこの数字を変更します。

 

サンプル2(余白調整後)

Cocolog_my_photo_trouble_img01

従って、HTMLタグのこの数字をいじれば、余白を微調整することができます。

左の画像では、分かりやすく、

margin: 0px 30px 5px 30px;"

と、左右のマージンを30pxにしてみました。

 

HTMLタグを編集するときは、必ず半角文字を使うこと、タグ内の各要素の前後には必ず半角スペースを空ける必要があることに注意して下さい。

 

記事(文字)の回り込みを解除する

以前も記事にしましたが、ここでも簡単に説明します。

上の例のように文字の回り込みを途中でやめたいときは、「HTMLの編集」に切り替え、「<p>を指定。</p>」となっているのを、「<br clear="left" />」と一文字のスペース(下では便宜的にスペースの代わりに■と表記)を追加して、

 

<p>を指定。<br clear="left" />■</p>

 

とし、更に、 最後の「</p>」の右側に文字、例えば「ああ」と記入して、

 

<p>を指定。<br clear="left" />■</p>ああ

 

のようにし、

「記事の作成」タブに切り替えると、記事の回り込みは解除されて、「ああ」は画像の下に配置されます。

これを再び「HTMLの編集」モードに切り替えると、「<p>ああ</p>」のように、ココログが自動的に改段落タグ(「<p>~</p>」)を付加してくれます。

画像の下に文章を続けるときは、この「ああ」を上書きするようにして記入します。

 

注)HTMLタグはブログシステムの違いに関わらず共通ですが、ブログシステムによって使用できるタグ・できないタグがあったり、「記事の作成」で入力した内容をどのようなHTMLタグにするのかは、ブログシステムの仕様によって異なります。

ここでの説明はココログでの作業方法を説明したものです。

  

Br_clear_left

 

 

 

 


« 【森友問題】読売が朝日の報道を裏付ける記事!? | トップページ | 【森友文書問題】財務省が決裁書の書き換えを認める/朝日新聞、毎日新聞の内部対立 »

コメント

コメントを書く

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

« 【森友問題】読売が朝日の報道を裏付ける記事!? | トップページ | 【森友文書問題】財務省が決裁書の書き換えを認める/朝日新聞、毎日新聞の内部対立 »

最近のコメント

counter since 2018/12/25

  • Flag Counter

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

sponsored link


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

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

カテゴリー

無料ブログはココログ