2017年 01月 08日
画像の拡大表示(その4)画像の挿入
一部修正しました(1月9日午後4時)
次はブログ記事に画像を挿入します。
【ご注意】エキサイトブログの新管理画面で説明します。
① [投稿]をクリックし「記事を書く」画面を出します。
タイトルを入力し[HTML編集](または普通編集)タブを開きます。
②まず最初に記事に挿入する画像をアップロードします。
エクスプローラを開きます。
画像を保存したフォルダを開き、ウインドウを左半分に配置します。[表示]タブを開き[大アイコン]にすると見やすいでしょう。
挿入する画像をドラッグして所定のエリアで離すとアップロードが始まります。
【重要④!】
ファイルサイズが500KBを超えると既定値(後述)のサイズに縮小されてからアップロードされます。
画像にマウスポインタを合わせると画像サイズとファイルサイズが表示されますので、確認してください。
アップロードが終わると右サイドのアップロード欄に画像が表示されます。
③ 挿入する位置へカーソルを立ててアップロード欄の画像をクリックします。
「HTML編集」では画像タグと呼ばれる文字列が挿入され、
[普通編集]では画像そのものが挿入されます。
④ [プレビュー]をクリックしてみましょう。
下のような画像が表示され、クリックすると拡大画像が表示されます。
【重要⑤!】
画像の表示には2つの決まり事があります。
① アップロードした画像のサイズが既定値(後述)より大きいときは既定値のサイズで表示される。
②クリックで表示される拡大画像はアップロードした画像のサイズで表示される。
【既定値とは】
本文に表示できる画像の最大幅は設定によって決められています。この値を既定値と呼びます。
通常はブログの本文の幅より少し小さい値に設定されています。
既定値の確認方法は次回説明しますが、私のブログの既定値は横520ピクセルです。
従って、上の画像は横520ピクセルX縦347ピクセルとなり、500KBを超える画像は横幅520ピクセルに縮小されてアップロードされるということになります。
ここからは、HTML編集でなければできないことです。
画像の大きさを変えたり、配置を変えたりして楽しいブログを創りましょう。
【画像タグの説明】
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|900|600#]
青字の部分:アップロードしたJPEG画像
緑字の部分:アップロードした日付
mid:画像の配置(中央配置)
(mid:中央配置、left:左寄せ配置、right:右寄せ配置)
900:画像の横サイズ(900ピクセル)
600:画像の縦サイズ(600ピクセル)
アップロードされた画像が中央配置で挿入されたことになります。
HTML編集では画像タグの中を直接書き替えて、配置を変えたりサイズを変えたりすることができるのが特徴です。
【画像の配置変更】
画像の配置は変更できます。例えば左寄せ配置に変更するには、
HTML編集の場合、midをleftに書き替えます。
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|left|900|600#]
普通編集の場合は画像をクリックすると選択肢が出て来ますので[左]をクリックします。
下の画像が実際の表示です。。
【中央配置】
【左寄せ配置】
画像の右側に文字が入力できるようスペースが確保されます。
【表示する画像のサイズを変更する】
横90ピクセル×縦60ピクセルに書き替えてみましょう。
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|90|60#]
実際の画像は下の様になります。
クリックして拡大画像も確認してください。
【中央配置】
【左寄せ配置】
【用語説明】
【HTML】
HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略称です。ウェブ上の文書を記述するための言語です。
文章の中に記述することで、さまざまな機能を記述設定することができます。
「テキストを超える」という意味から"hyper-"(~を超えた) "text"(文書)と名付けられました。
【タグ】
HTML編集で記事を入力していくと、いろいろな文字列が挿入されます。これをタグと呼びます。
画像タグもその一つです。
取り敢えず次のタグも頭に入れてください。
<br>:改行タグA
文章の改行を意味します。
通常はENTERキーで改行すると挿入されます。
<br clear=all>:改行タグB
画像を左寄せや右寄せで配置したとき文字がその横に表示されます。これを文字の回り込みと言いますが、その回り込みを途中で解除するときに使います。
画像を左寄せ配置や右寄せ配置で挿入したときに最後に挿入します。
例えば下の例で「2016年8月1日撮影」の最後にこのタグを入力します。
凄い迫力です。
クリックしてご覧ください。
2016年8月1日撮影
今日はここまで、
次回は画像の表示と配置の応用です。
次はブログ記事に画像を挿入します。
【ご注意】エキサイトブログの新管理画面で説明します。
① [投稿]をクリックし「記事を書く」画面を出します。
タイトルを入力し[HTML編集](または普通編集)タブを開きます。
②まず最初に記事に挿入する画像をアップロードします。
エクスプローラを開きます。
画像を保存したフォルダを開き、ウインドウを左半分に配置します。[表示]タブを開き[大アイコン]にすると見やすいでしょう。
挿入する画像をドラッグして所定のエリアで離すとアップロードが始まります。
ファイルサイズが500KBを超えると既定値(後述)のサイズに縮小されてからアップロードされます。
画像にマウスポインタを合わせると画像サイズとファイルサイズが表示されますので、確認してください。
アップロードが終わると右サイドのアップロード欄に画像が表示されます。
③ 挿入する位置へカーソルを立ててアップロード欄の画像をクリックします。
「HTML編集」では画像タグと呼ばれる文字列が挿入され、
[普通編集]では画像そのものが挿入されます。
④ [プレビュー]をクリックしてみましょう。
下のような画像が表示され、クリックすると拡大画像が表示されます。
【重要⑤!】
画像の表示には2つの決まり事があります。
① アップロードした画像のサイズが既定値(後述)より大きいときは既定値のサイズで表示される。
②クリックで表示される拡大画像はアップロードした画像のサイズで表示される。
【既定値とは】
本文に表示できる画像の最大幅は設定によって決められています。この値を既定値と呼びます。
通常はブログの本文の幅より少し小さい値に設定されています。
既定値の確認方法は次回説明しますが、私のブログの既定値は横520ピクセルです。
従って、上の画像は横520ピクセルX縦347ピクセルとなり、500KBを超える画像は横幅520ピクセルに縮小されてアップロードされるということになります。
ここからは、HTML編集でなければできないことです。
画像の大きさを変えたり、配置を変えたりして楽しいブログを創りましょう。
【画像タグの説明】
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|900|600#]
青字の部分:アップロードしたJPEG画像
緑字の部分:アップロードした日付
mid:画像の配置(中央配置)
(mid:中央配置、left:左寄せ配置、right:右寄せ配置)
900:画像の横サイズ(900ピクセル)
600:画像の縦サイズ(600ピクセル)
アップロードされた画像が中央配置で挿入されたことになります。
HTML編集では画像タグの中を直接書き替えて、配置を変えたりサイズを変えたりすることができるのが特徴です。
【画像の配置変更】
画像の配置は変更できます。例えば左寄せ配置に変更するには、
HTML編集の場合、midをleftに書き替えます。
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|left|900|600#]
普通編集の場合は画像をクリックすると選択肢が出て来ますので[左]をクリックします。
下の画像が実際の表示です。。
【中央配置】
【左寄せ配置】
画像の右側に文字が入力できるようスペースが確保されます。
【表示する画像のサイズを変更する】
横90ピクセル×縦60ピクセルに書き替えてみましょう。
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|90|60#]
実際の画像は下の様になります。
クリックして拡大画像も確認してください。
【中央配置】
【左寄せ配置】
【用語説明】
【HTML】
HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略称です。ウェブ上の文書を記述するための言語です。
文章の中に記述することで、さまざまな機能を記述設定することができます。
「テキストを超える」という意味から"hyper-"(~を超えた) "text"(文書)と名付けられました。
【タグ】
HTML編集で記事を入力していくと、いろいろな文字列が挿入されます。これをタグと呼びます。
画像タグもその一つです。
取り敢えず次のタグも頭に入れてください。
<br>:改行タグA
文章の改行を意味します。
通常はENTERキーで改行すると挿入されます。
<br clear=all>:改行タグB
画像を左寄せや右寄せで配置したとき文字がその横に表示されます。これを文字の回り込みと言いますが、その回り込みを途中で解除するときに使います。
画像を左寄せ配置や右寄せ配置で挿入したときに最後に挿入します。
例えば下の例で「2016年8月1日撮影」の最後にこのタグを入力します。
凄い迫力です。
クリックしてご覧ください。
2016年8月1日撮影
今日はここまで、
次回は画像の表示と配置の応用です。
by PC-otasukeman | 2017-01-08 16:28 | Comments(4)
Commented
by
mihayashi6 at 2017-01-09 12:59
エキサイト新管理画面で投稿してみました。
丁寧な説明をコツコツ読みながら・・
画像が大きくなり迫力があります。
メジロの沢山の画像・・・クリックすると
すべての画像が拡大して素晴らしいです。
のテクニックはまだ理解出来ません。
小次郎じじ
*まだ理解できない部分もたくさんありますが
ぼちぼち頑張ります。
丁寧な説明をコツコツ読みながら・・
画像が大きくなり迫力があります。
メジロの沢山の画像・・・クリックすると
すべての画像が拡大して素晴らしいです。
のテクニックはまだ理解出来ません。
小次郎じじ
*まだ理解できない部分もたくさんありますが
ぼちぼち頑張ります。
0
Commented
by
PC-otasukeman at 2017-01-09 16:32
Commented
by
h-ちゃん
at 2017-01-09 16:58
x
お助けマンさま こんにちは。
丁寧な資料をありがとうございます。
今、説明書をコピーさせて頂きました
タグ説明あり、用語説明ありで感謝です
印刷して少しづつ進めていきたいと思います
老化防止になりますね!ありがとうがざいました。
丁寧な資料をありがとうございます。
今、説明書をコピーさせて頂きました
タグ説明あり、用語説明ありで感謝です
印刷して少しづつ進めていきたいと思います
老化防止になりますね!ありがとうがざいました。
Commented
by
PC-otasukeman at 2017-01-09 17:50