2012年 11月 30日
文字と画像の配置について(5)
次回投稿は12月4日になります。お待ちください。
今回は小さな画像を扱ってみましょう。
実験8で使った記事入力欄の次の部分をコピーして、記事入力欄に貼り付けて、画像タグを加工します。
【画像タグの説明】
[#IMAGE|d0181824_161535.jpg|201211/28/24/|left|520|365#]
【d0181824_161535.jpg】
画像のファイル名です。アップロードした際、この名前でサーバーに保存されます。
【left】
画像の配置です。
中央はmid、左配置はleft、右配置はright。アップロードした際に指定したものです。
【520|365#】
画像の大きさです。単位はピクセル。
サーバーに保存された画像の大きさです。
上記の場合 520×365ピクセルの大きさの画像が保存されています。
アップロードする際、データサイズが500KBを超えると、自動縮小されてしまいます。
3枚のデジカメ画像はいずれも500KBを超えていた為、 520×365ピクセルに縮小されたものです。
この大きさはこのブログで表示出来る最大値なのです。納得ですね。
言い換えれば、データサイズが500KB以下であれば、大きな画像、例えば、パソコン画面 1366×768ピクセルもアップロードすることが出来るということです。
私は写真をアップロードする際、横幅を800ピクセルに加工しています。
横幅1024ピクセルの写真も絵柄によって500KB以下に収まる場合がありますが、100%ではありません。
大きな画像をアップロードしたい時はデータサイズを確認してからアップしています。
本文画像をクリックすると別画面が出てきますが、大きな画像をアップロードしておけば、皆さんに大きな画像を見て頂けます。
画像タグは削除したり、追加したり、書き換えて内容を変えることができます。
以下は、画像の大きさ等を書き換えるとどうなるかという実験です。
【実験10】
① 改行タグを削除
② 画像サイズを3枚とも150×105ピクセルに書き換える。
(下のご注意とご参考をお読みください)
③ 配置を中央配置のmidに書き換える。
ブログの表示は下のようになります。
中央配置では自動改行され、ブログの中央に画像が配置されます。
【実験11】
実験10の入力記事の中央配置のmidを左配置のleftに書き換える。
ブログの表示は下のようになります。
左から一列に表示されます。
【実験12】
実験11の入力記事の 左配置のleftを右配置のrightに書き換える。
ブログの表示は下のようになります。
右から一列に表示されています。写真の並びが反対になります。
【実験13】
右配置、左配置、中央配置を混在させてみましょう。
記事入力とブログ本文表示を見比べてください。組み合わせによりいろいろな配置にすることが出来ます。
余り意味は有りませんが遊んでみてください。
例1
例2
例3
【ご注意】
次の事に注意してください。
① 小さな画像をアップロードした場合、画像の大きさを大きく書き換えても、アップロードした画像より大きくなりません。
② 一行に並べる画像の枚数は制限ありませんが、余白を含めた横幅の合計がブログ本文の横幅を超えないようにしてください。
【ご参考】
このブログの横幅は530ピクセルです。余白は画像1枚につて10ピクセルです。
(スキンで設定されています)
同じ横幅にした場合の枚数と横幅は次のようになります。
1枚・・・・530-10 =520
2枚・・・・{530-(10×2)}÷2=255
3枚・・・・{530-(10×3)}÷3=166.66
きっちりと左右を合わせるには1ピクセル内で調整します。
1枚目:166ピクセル、2枚目167ピクセル、3枚目167ピクセル
皆さんのブログはどうでしょうか。
不明な場合はいろいろと試してみてください。
今日はここまで、
次回は画像に文章を加えてみましょう。
次回は12月3日の予定です。
今回は小さな画像を扱ってみましょう。
実験8で使った記事入力欄の次の部分をコピーして、記事入力欄に貼り付けて、画像タグを加工します。
【画像タグの説明】
[#IMAGE|d0181824_161535.jpg|201211/28/24/|left|520|365#]
【d0181824_161535.jpg】
画像のファイル名です。アップロードした際、この名前でサーバーに保存されます。
【left】
画像の配置です。
中央はmid、左配置はleft、右配置はright。アップロードした際に指定したものです。
【520|365#】
画像の大きさです。単位はピクセル。
サーバーに保存された画像の大きさです。
上記の場合 520×365ピクセルの大きさの画像が保存されています。
アップロードする際、データサイズが500KBを超えると、自動縮小されてしまいます。
3枚のデジカメ画像はいずれも500KBを超えていた為、 520×365ピクセルに縮小されたものです。
この大きさはこのブログで表示出来る最大値なのです。納得ですね。
言い換えれば、データサイズが500KB以下であれば、大きな画像、例えば、パソコン画面 1366×768ピクセルもアップロードすることが出来るということです。
私は写真をアップロードする際、横幅を800ピクセルに加工しています。
横幅1024ピクセルの写真も絵柄によって500KB以下に収まる場合がありますが、100%ではありません。
大きな画像をアップロードしたい時はデータサイズを確認してからアップしています。
本文画像をクリックすると別画面が出てきますが、大きな画像をアップロードしておけば、皆さんに大きな画像を見て頂けます。
画像タグは削除したり、追加したり、書き換えて内容を変えることができます。
以下は、画像の大きさ等を書き換えるとどうなるかという実験です。
【実験10】
① 改行タグを削除
② 画像サイズを3枚とも150×105ピクセルに書き換える。
(下のご注意とご参考をお読みください)
③ 配置を中央配置のmidに書き換える。
ブログの表示は下のようになります。
中央配置では自動改行され、ブログの中央に画像が配置されます。
【実験11】
実験10の入力記事の中央配置のmidを左配置のleftに書き換える。
ブログの表示は下のようになります。
左から一列に表示されます。
【実験12】
実験11の入力記事の 左配置のleftを右配置のrightに書き換える。
ブログの表示は下のようになります。
右から一列に表示されています。写真の並びが反対になります。
【実験13】
右配置、左配置、中央配置を混在させてみましょう。
記事入力とブログ本文表示を見比べてください。組み合わせによりいろいろな配置にすることが出来ます。
余り意味は有りませんが遊んでみてください。
例1
例2
例3
【ご注意】
次の事に注意してください。
① 小さな画像をアップロードした場合、画像の大きさを大きく書き換えても、アップロードした画像より大きくなりません。
② 一行に並べる画像の枚数は制限ありませんが、余白を含めた横幅の合計がブログ本文の横幅を超えないようにしてください。
【ご参考】
このブログの横幅は530ピクセルです。余白は画像1枚につて10ピクセルです。
(スキンで設定されています)
同じ横幅にした場合の枚数と横幅は次のようになります。
1枚・・・・530-10 =520
2枚・・・・{530-(10×2)}÷2=255
3枚・・・・{530-(10×3)}÷3=166.66
きっちりと左右を合わせるには1ピクセル内で調整します。
1枚目:166ピクセル、2枚目167ピクセル、3枚目167ピクセル
皆さんのブログはどうでしょうか。
不明な場合はいろいろと試してみてください。
今日はここまで、
次回は画像に文章を加えてみましょう。
次回は12月3日の予定です。
by PC-otasukeman | 2012-11-30 15:45 | Comments(6)
Commented
by
michi-kan at 2012-11-30 18:07
沢山の写真を載せたい時にサイズを小さくして載せますが等間隔に
載せるのが難しいのですが例1のようにleft・right・midの順にすると
等間隔になるのでしょうか?
自分のブログの横幅で計算しないとダメですか?
横幅はスキンの何処を見ると判るのでしょか?
?ばかりで申し訳ありません。
よろしくお願い致します。
載せるのが難しいのですが例1のようにleft・right・midの順にすると
等間隔になるのでしょうか?
自分のブログの横幅で計算しないとダメですか?
横幅はスキンの何処を見ると判るのでしょか?
?ばかりで申し訳ありません。
よろしくお願い致します。
0
★ michi-kan さん
次のことをお知らせください。
①お使いのスキン名
②何枚くらい載せたいのでしょうか
③例2のサイズでご自分のブログに掲載していただけますか。画像は何でも結構です。
横幅105ピクセルで3枚、配置はleft、left、rightです。
次のことをお知らせください。
①お使いのスキン名
②何枚くらい載せたいのでしょうか
③例2のサイズでご自分のブログに掲載していただけますか。画像は何でも結構です。
横幅105ピクセルで3枚、配置はleft、left、rightです。
Commented
by
michi-kan at 2012-11-30 23:07
★ michi-kan さん
テーマ投稿で取り上げて回答いたします。
テーマ投稿で取り上げて回答いたします。
Commented
by
michi-kan at 2012-12-02 10:05
Commented
by
PC-otasukeman at 2012-12-02 19:27