最新情報

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

このサイトに関して



当サイトご利用上の注意

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

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

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



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


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




特設コーナー

  • Banner_kanan_fund


















外部サイト(その他)

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


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









管理人ポータル

大師小同窓会関連












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


我が町!大師の情報

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

各種ノウハウ集



私家版スクラップブック

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

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

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

友達の輪・お薦めSHOP

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




    かわさき楽大師

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

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


« 【ドールハウス工作】 No.129 テーブルと棚のミニチュア/Gemuetlichkeit No.3 | トップページ | 【我が町】東海道かわさき宿交流館10月1日オープン »

2013/09/20

【ブログの楽しみ方】複数の画像を横に並べる方法【ココログ】

ここでは下のように複数枚の画像を横に並べる方法と、上手くいかないときの対処方法を説明します。

Wallp01

Wallp02

Wallp03

このように複数枚の画像を横に並べ、文章をその下に配置するには、左の画像と中央の画像を挿入するときは「画像の挿入」ダイアログボックス(下の図)の「画像の配置」で、『左(記事回り込み)』を、最後(右)の画像を挿入するときは『左』を選びます。最後の画像で『左』を指定することで「記事の回り込み」が解除され、次の文字を画像の下から始めることができるのです。

Cocolog_img01 図-1

 

しかし、場合によっては2枚目の画像が思ったところではないところに挿入されてしまったり、3枚の画像の横幅がブログの幅より大きくなり、きれいに横に並ばずに、例えば一番右の画像が下に落ちてしまったりすることがあるかもしれません。

そういう場合、「HTMLの編集」モードで修正するコツを知っていると便利です。

ココログでは、「記事の編集」モード(リッチテキストモード)を使用してワープロソフト感覚で文字を装飾したり、画像を挿入したりして記事を書くことができますが、実際はHTMLタグと呼ばれるコードで書かれており、それを編集できるのが「HTMLの編集」モードです。

 

■1枚目の画像の挿入

図-1のように、『左(記事回り込み)』を指定して挿入します。

 

■2枚目の画像の挿入

Cocolog_img02図-2

『左(記事回り込み)』を選ぶと、文字を書く場合はそのすぐ右側から始められるので、画像の右側でクリックすればカーソルを図のような位置に置くことができるはずです。

これが上手くいかない(上手くクリックできない)ときは、「HTMLの編集」モードに変えて、下のように操作してみて下さい。

Cocolog_img03 図-3

【図-3訂正】①の位置で(改行することなく)③画像の挿入を行っても構いません。(ブログ主は「HTMLの編集」画面で操作することが多いので、見やすいように改行しているだけです。)

下図の上の画面のように画像が挿入され、「リッチテキスト」モード(下の画面)に切り替えると、画像が並んでいるのが分かります。(作業をブログ記事ではなくwebページで行っているので「記事の作成」ではなく「リッチテキスト」と表示されていますが、同じ意味です。)

Cocolog_img04図-4

次は最初に説明したように、2枚目の画像の右側にカーソルを置いて、画像の挿入を行う際に「画像の配置」で『左』を指定すればいいのですが、トラブル対処のための知識として、もう少し説明を続けます。

 

ここもう一度、「HTMLの編集」に切り替えてみます。

Cocolog_img05図-5

図-4の上の画面ではなかった、「<p>」、「</p>」が自動的に付加されています。これは改行マーク(正確には「段落」タグ)で、「<p>~</p>」で挟まれた部分は“一つの段落”になります。

通常、段落と段落の間は改行され、少しスペース(見た目は1行くらいの空白行)が空きますが、1枚目の画像を挿入したときに『左(記事回り込み)』を指定したために改行されることなく、次の段落(=次の画像)が続いているのです。

図-1を見ると分かりますが、『左(記事回り込み)』を選択すると、右側に下のようなサンプルが表示されます。

Cocolog_img06図-6

 

■3枚目の画像を挿入

「画像の配置」で『左』を指定します。この時、「HTMLの編集」モードで挿入する場合は、一度「記事の編集」(リッチテキスト)モードに切り替えてからもう一度「HTMLの編集」にして、2枚目の画像のHTMLタグに「<p>~</p>」が挿入されている状態で行って下さい。

なお、図-1のように、クリックすると拡大画像(元々の大きさの画像)が別ウィンドウで表示されるように画像を挿入した場合、HTMLタグは下のような構造をしています。

<p><a href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2013/09/19/cocolog_img01.jpg" onclick="window.open(this.href, '_blank', 'width=468,height=719,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img width="200" height="307" border="0" alt="Cocolog_img01" title="Cocolog_img01" src="http://daishi100.cocolog-nifty.com/blog/images/2013/09/19/cocolog_img01.jpg" /></a> 図-1


</p>

緑の部分(<a href="画像の存在する場所(URL)" >~</a>)はサムネイル画像(ブログ記事に表示される小さな画像)をクリックしたときに開くリンク先を表すHTMLタグで、いずれにしてもその前後を「<p></p>」で囲んでいるのが分かると思います。

さらに付け加えると、黒地の部分はサムネイル画像が存在している場所を示しています。(<img ~ src="サムネイル画像が存在する場所(URL)"/>)

これで分かるように、ブログ記事に画像を貼るということは、記事に直接画像が貼り付いているのではなく、ある場所に“元画像”と“サムネイル画像”を保存し、実際はHTMLタグでその場所を指定しているだけです。(ページが表示されるときに画像を呼び出しているので、1ページ内に大きな画像を多用すると、それだけ表示が遅くなり、“重たい”ページとなります。)

 

■ 「画像の配置」で、『左(記事回り込み)』や『左』を指定し間違えてしまった場合

「HTMLの編集」で2枚目と3枚目の画像のHTMLタグを比較してみます。

●2枚目(画像名:Wallp02)

<p><img border="0" alt="Wallp02" title="Wallp02" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/09/19/wallp02.jpg" style="float: left; margin: 0px 5px 5px 0px;" />
</p>

●3枚目(画像名:Wallp03)

<p><img border="0" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/09/19/wallp03.jpg" title="Wallp03" alt="Wallp03" />
</p>

画像名が異なるのは当然ですが、大きな違いは2枚目には青地で示した「style="float: left; margin: 0px 5px 5px 0px;"」があり、3枚目の画像にはないことです。

実は『左(記事回り込み)』と『左』はこのHTMLタグを挿入するかどうかを指定するもので、このHTMLタグ(style要素)があるから次の段落がすぐ左から始まるのです。

詳しい説明は避けますが、この中にある「margin」は画像の周囲のスペース(マージン)の大きさを表していて、画像と画像の間に少し隙間が空くのは、「5px(ピクセル)」という指定のためです。

ですから、指定し間違えても、「HTMLの編集」で、1枚目と2枚目にこのstyle要素を貼り付け、3枚目にはないように手で編集すればいいのです。「style="float: left; margin: 0px 5px 5px 0px;"」の前後には必ず半角のスペースを一つ入れて下さい。

 

■画像を並べたら、記事の幅より大きくて、横に並ばなかった(下の行に落ちてしまった)場合

ブログの記事の幅はブログのデザインによって異なり、このブログは450px(ピクセル)くらいの幅があります。3枚の画像を横に並べたとして、各画像の幅とマージンの合計がこれよりも大きいと、横に入りきれずに最後の画像が下の行に落ちてしまったりします。

このような場合は「width要素」でサムネイル画像の表示サイズを小さくすることで解決します。

以下、このwidth要素について解説します。

「■3枚目の画像を挿入」で説明したように記事上に表示される画像は「<img ~ src="サムネイル画像が存在する場所(URL)"/>」で指定されています。

下の画像は、「画像の挿入」時、「ページに表示する画像サイズ」で『サイズを指定する』を指定して「64px」と入力しました。

Wallp01_2

ここでこの画像のHTMLタグのうち、<img ~ />の部分だけを注目して見てみると、下のようになります。

<img width="64" height="64" border="0" alt="Wallp01_2" title="Wallp01_2" src="http://daishi100.cocolog-nifty.com/blog/images/2013/09/19/wallp01_2.jpg" />

注目すべきはピンクの部分です。『幅』(=width)を「64px」指定したので、(元々128×128の画像のため、)『縦』(=height)のサイズも自動的に「64」と設定されます。この数字を弄れば、記事上に表示される画像のサイズも微調整できます。

この、widthとheightは片方だけ指定してもよく、例えばwidthだけ指定しても、縦横比を維持して表示してくれます。

ためしに「width="40"」と指定し、「height」の部分は削除してみると、下のように表示されます。

Wallp01_2

このHTMLタグは以下の通りです。

<a onclick="window.open(this.href, '_blank', 'width=128,height=128,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2013/09/19/wallp01_2.jpg"><img width="40" border="0" src="http://daishi100.cocolog-nifty.com/blog/images/2013/09/19/wallp01_2.jpg" title="Wallp01_2" alt="Wallp01_2" /></a>

このように、「width="xx"」を「img」の直後にでも記入すれば、サイズを微調整できるのです。(前後に必ず半角スペースを入れて下さい)

下はこのページの上に貼った3枚の画像のHTMLタグをコピーして貼り付け、<img ~/>タグの中に「width="100"」を追加しました。

Wallp01

Wallp02

Wallp03

 

なお、「<img ~ />」タグの中は比較的自由に各要素(ex width要素)は置くことができるので、「「img」の直後にでも」と書きました。

 

web拍手 by FC2

(拍手はブログ主のモチベーションup程度の目的です。面白かった、役に立った、等々、宜しければクリックしてください。)

« 【ドールハウス工作】 No.129 テーブルと棚のミニチュア/Gemuetlichkeit No.3 | トップページ | 【我が町】東海道かわさき宿交流館10月1日オープン »

コメント

コメントを書く

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

« 【ドールハウス工作】 No.129 テーブルと棚のミニチュア/Gemuetlichkeit No.3 | トップページ | 【我が町】東海道かわさき宿交流館10月1日オープン »

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


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

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

カテゴリー

無料ブログはココログ