3歩

アクセスカウンタ

zoom RSS 初心者向け/ウエブリブログの写真・画像を貼り付ける ワンポイント

<<   作成日時 : 2011/07/06 19:02   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0



ウエブリブログ・中高年・初心者のワンポイント
初心者向け/ウエブリブログ の 写真・画像を貼付ける ポイント



ブログの初期で戸惑った内容です

画像を貼り付けたとき
“画像の大きさは、変えられないの”

と 思ったのがキッカケです




【 まえがき 】

画像の大きさ変更も 編集画面で 出来ます

ブログの 初めてみる編集画面は、
文字の羅列 しか見えないものです

が 直ぐになれます 

タグを編集することが 出来ます ので
タグを扱うことを お勧めします






画像設定
ブログで画像を貼り付けるときのお手伝い(項目)

  1. ブログ記事欄の 写真サイズ を変更する 方法
  2. 横位置の中央で 2枚の写真 を並べる方法
  3. 写真の 枠線 を無くす方法

  4. 画像ファイル名は、半角の英数字を推奨
  5. ページの横位置で 画像の配置指定

    (記事追加)
  6. 写真周辺の余白を取る方法
  7. 複数写真を同じ高さ(又は幅)に合わせる方法(サイズ変更2)
  8. 写真下に写真名を入れる方法
  9. 文字と画像を並べる方法(“5”の追加記事)
  10. 一口メモ

●ウエブリブログ編集画面

画像
画像(A)


画像
画像(B)


ウエブリブログの編集画面


画像(A);
編集画面の“タグ”は、2枚の写真を表記しています


画像(B)
それぞれ 緑枠 と 青枠 で囲んでいます
● 1 写真サイズの変更

画像
画像(C)

(2枚の画像は 便宜上 横に並べています)

画像左は元画像
画像右は変更画像


  画像の 長さ半分 にします


タグ6”の位置の数字を変更する
hight width変更
  • width(幅)  187⇒93
  • hight(高さ) 320⇒160
  • 幅と高さの比率は一定にする

左写真のようになります
● 2 写真2枚を並べる

画像
タグ1”とタグ2”を削除 後の編集画面


画像
画像(D)

中央で2枚並べる



・画像を中央に2枚貼り付ける
  (上下に画像が配置されます)

次に (画像Bを参照)
タグ1”とタグ2”を削除する
  • </div> のタグを削除
  • <div align="center"> のタグを削除
    但し 横幅は、2枚並べるスペースがあること
★ 3 枠線をなくす

画像
タグを追加 後の編集画面


画像
画像(E)


編集画面の5”の位置へ挿入
次のタグをコピーして貼り付けてください
  • style="border:none;"
  • タグの前後は、半角スペースを入れる


(CSS設定で一括削除もできる)
● 4 画像元ファイル名が半角と全角文字



画像
画像(F)

画像Bを参照
タグ3”とタグ4”


ファイル名が日本文(全角文字)
 ウエブリブログでは受付けますが
 ファイル名は、数字に変換されます

(このため 
多数写真を使用するとき 編集に手間がかかる)



元ファイル名が半角文字
 ファイル名の一部に元名が残ります

画像のファイル名は半角英数字で入れる(お勧め事項)
● 5 写真の水平方向の貼付位置


画像
画像(G)


画像の配置位置は。ブログで準備されています
左・中央・右  (画像G)


基本は中央です
(ただし ”左””右”は注意が必要)


★6 写真周辺の余白を取る
画像
余白なし画像


画像
編集画面の削除場所


画像周囲はわずかな余白があります
写真を2枚並べると余白が良くわかります
この 余白を取りたいとき



「class="up-image" 」を削除する
 写真タグの2箇所(左 画像参照)


★7 同じ高さ(又は幅)にする方法

画像
画像(D)


画像
autoの記載位置


違うサイズの写真の高さを揃える
 (例)高さ320にするとき
   幅値は auto を入れる


.hight width変更
  • width(幅)  93 ⇒ auto
  • hight(高さ) 160 ⇒ 320



幅と高さの比率は一定ですが写真の解像度に注意(計算しなくて簡単)
★8 写真下に写真名を入れる

画像


画像
文字の追加位置


・写真名入れる位置は 写真の下で 中央です


・写真名文字の入れ場所
<div aligh・・・><a href=・・・></a>文字</div>

注意
・文字入れ場所は改行して書きます
<div aligh・・・><a href=・・・></a>
文字
</div>
★9 文字と画像を並べる

ポイント
1、画像位置と文字書き出し位置が違う
2、短い文字と長い文章の改行が違う


画像



画像
<br clear="all"> 最後に入れる例





中央に並べる(通常の書き方)
・画像位置;“中央”にチェック
<div aligh・・・><a href=・・・></a></div>文字

中央に並べる(上の★8と同じ方法)
・画像位置;“中央”にチェック(画像G参照)
・文字の入れ場所は次に示す
<div aligh・・・><a href=・・・></a>
文字</div>
(左画像 上 参照)


画像を左側に並べる
・画像位置;“左”にチェック(画像G参照)
・画像や文字の後に必ず次の文字を記載する
 <br clear="all"> 
(コピーして張り付けて下さい)
(左画像 中 参照)


画像を右側に並べる
・画像位置;“右”にチェック(画像G参照)
・画像や文字の後に必ず次の文字を記載する
 <br clear="all"> 
(コピーして張り付けて下さい)
(左画像 下 参照)


・詳細記事/ウエブリブログ記事
http://lesson.at.webry.info/200701/article_4.html

★9−2 
文字と画像を並べる(テーブルタグを使用)



1行2列テーブル
1●2■


画像
説明文章はここに書き込みます
サンプル



一例として記載しています

・詳しく知りたい方は専門ページでお願いします
・練習用タグは次に記載します

コピーしてお試しください


コピー用 (1行2列テーブル)
<table width="100px" bgcolor="#ffffcc" border=1px><tr><td>1●</td><td>2■</td></tr></table >


使い方
  1. 横幅(任意)を200にするとき;
    width="100px" ⇒ width="200px"
  2. 背景色を削除する;
    bgcolor="#ffffcc"  を削除
  3. 枠線を失くす;
    border=1px ⇒  border=0px
  4. 1● ⇒画像を貼り付ける
  5. 2■ ⇒文字を書き込む

一口メモ
画像タグの構成をチョコっと

タグ構成 1
<img src="(画像/場所+ファイル名)" alt="(画像代替文字)" width="(幅) height(高さ)" class="up-image"(スタイル指定) style="border:none;"(スタイル指定) aligh="left"(位置指定) > 

タグ構成 2
(画像 中央) <div align="center"><a href=・・・></a></div>
(画像 左)   <a href=・・・ align="left" ></a><br clear="all">
(画像 右)   <a href=・・・ align="right" ></a><br clear="all">




【 あとがき 】

  1. 画像の大きさを変更したのが
    タグの編集の 始まりでした

    タグの扱いを知った結果 ホームページも出せるようになりました

  2. 時々 忘れるため 記事を追加し まとめています 2015/11/01




●●●●●   END

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
初心者向け/ウエブリブログの写真・画像を貼り付ける ワンポイント 3歩/BIGLOBEウェブリブログ
文字サイズ:       閉じる