画像の拡大表示(その6)画像の整列配置

大変分かりにくようです。16日投稿の改訂版をご覧ください。

ページへページへページへ

最後の仕上げは画像の整列配置です。
下の画像が完成形です。
15枚の画像が同じ余白で仕切られキチンと配置しています。
小さな画像もクリックすれば拡大表示されます。
このテクニックをマスターすれば、ブログが更に楽しくなると思います。
d0181824_16233500.jpg
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpgd0181824_16404322.jpgd0181824_16234531.jpg
d0181824_16253006.jpgd0181824_16261212.jpgd0181824_16262436.jpgd0181824_16270014.jpg
d0181824_16274145.jpgd0181824_16274980.jpgd0181824_16275402.jpg
d0181824_16284578.jpgd0181824_16285091.jpgd0181824_11025205.jpgd0181824_11032212.jpgd0181824_11035238.jpgd0181824_11042287.jpg


HTMLやCSSの難しいことを知らなくても出来る方法をご紹介します。

【画像の既定値を確認する】
上の花火の画像サイズは「既定値」になっていると説明しましたが、まずは既定値を確認します。
[設定]-[デザインスキン]-[PCデザインスキン]とクリックしていくと「PCデザインスキン」の画面が出ます。
現在使用中のスキン(Cyber 2)の[編集]をクリックします。
d0181824_12054027.jpg

「PCデザインスキン編集」の画面が出てきます。
基本設定のサイズ欄にある数値が既定値です。画像の横幅をピクセルで指定します。
私のブログは520(ピクセル)に設定されていますから、上の花火の画像は横幅が520ピクセルということになります。
標準のスキンは500ピクセルでしたが、私は520ピクセルに変更しています。
その理由はこの記事の最後に説明しましょう。
d0181824_13150258.jpg


【画像を横に並べるテクニック】
上のアオサギの写真で説明します。
ちょっと複雑ですが、パズルを解く感覚で読み進めてください。
4枚の画像を続け挿入します。アップロードした画像サイズは横1244ピクセル×縦700ピクセルです。画像タグは次のようになります。
[#IMAGE|d0181824_11025205.jpg|201610/31/24/|mid|1244|700#][#IMAGE|d0181824_11032212.jpg|201610/31/24/|mid|1244|700#][#IMAGE|d0181824_11035238.jpg|201610/31/24/|mid|1244|700#][#IMAGE|d0181824_11042287.jpg|201610/31/24/|mid|1244|700#]
画像タグの配置をすべて[left]に書き替えます。
画像タグの最後に改行タグ②(<br clear=all>)を加えます。
次に横・縦すべてのサイズを[100]に書き替えます。すべて書き替えたら[プレビュー]をクリックします。
[#IMAGE|d0181824_11025205.jpg|201610/31/24/|left|100|100#][#IMAGE|d0181824_11032212.jpg|201610/31/24/|left|100|100#][#IMAGE|d0181824_11035238.jpg|201610/31/24/|left|100|100#][#IMAGE|・・・・・87.jpg|201610/31/24/|left|100|100#]<br clear=all>
4枚の画像は下の様に表示されます。まだ右にスペースがあります。
d0181824_16091344.jpgd0181824_16095044.jpgd0181824_16102099.jpgd0181824_16105002.jpg

1枚目の横幅のみ100から200に書き替えます。書き替えたら[プレビュー]をクリックします。
[#IMAGE|d0181824_11025205.jpg|201610/31/24/|left|200|100#][#IMAGE|d0181824_11032212.jpg|201610/31/24/|left|100|100#][#IMAGE|d0181824_11035238.jpg|201610/31/24/|left|100|100#][#IMAGE|・・・・・87.jpg|201610/31/24/|left|100|100#]<br clear=all>
4枚の画像は下の様に表示されます。 大き過ぎると1行に収まらず、右の画像は次の段に移ってしまいます。
d0181824_16091344.jpgd0181824_16095044.jpgd0181824_16102099.jpgd0181824_16105002.jpg


2段になったら 横幅を少し減らし、4枚横並びに戻ったら、少し減らすという操作を繰り返し、最終的には1ピクセルで調整します。
190にして4枚横並びに戻した状態です。
[#IMAGE|d0181824_11025205.jpg|201610/31/24/|left|190|100#]
d0181824_16091344.jpgd0181824_16095044.jpgd0181824_16102099.jpgd0181824_16105002.jpg


最終調整です。1ピクセル増やして191に書き替えます。
[#IMAGE|d0181824_11025205.jpg|201610/31/24/|left|191|100#]
1ピクセル増やして2段表示になりましたので、190ピクセルが最大値ということになります。
d0181824_16091344.jpgd0181824_16095044.jpgd0181824_16102099.jpgd0181824_16105002.jpg

次に画像のサイズを求めます。
【横幅】
4枚の仮の横幅を合計し、それを4で割れば1枚分の横幅になります。
190+100+100+100=490
490÷4=122 余り2
余りが出た時は1ピクセルづつ配分します。
【縦幅】
比例計算で求めます。
新縦=元縦(700)÷ 元横(1244)X 新横(122)=69

求めた画像サイズに書き替えて[プレビュー]確認します。
[#IMAGE|d0181824_11025205.jpg|201610/31/24/|left|122|69#][#IMAGE|d0181824_11032212.jpg|201610/31/24/|left|122|69#][#IMAGE|d0181824_11035238.jpg|201610/31/24/|left|123|69#][#IMAGE|・・・・・87.jpg|201610/31/24/|left|123|69#]<br clear=all>
これで完成です。
d0181824_16091344.jpgd0181824_16095044.jpgd0181824_16102099.jpgd0181824_16105002.jpg

枚数が違っても手順は同じです。
ヒヨドリの2枚の画像は次のようになります。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|255|191#][#IMAGE|d0181824_16285091.jpg|201612/31/24/|left|255|191#]
d0181824_16284578.jpgd0181824_16285091.jpg

【横幅を計算で求める方法】
2枚と4枚の横幅が決まれば、任意の枚数の横幅を計算で求めることができます。
まず、余白のサイズを求めます。
4枚の合計横幅=122+余白+122+余白+123+余白+123=490+3余白
2枚の合計横幅=255+余白+255=510+余白
両方の合計横幅が等しいことから、
490+3余白=510+余白
余白=10ピクセルとなります。
余白が分かれば、
N枚を横に並べる時の横幅は次の式で求めることができます。
横幅=[合計横幅 -{(N-1)× 余白}]÷ N

【既定値の見直し】
1枚の場合を計算式で求めると横幅520ピクセルになります。
画像タグの横幅を520ピクセルに変更しても既定値が小さいと既定値のサイズで表示されます。
整列表示を完成させるために既定値を合計横幅(520ピクセル)に変更しなければなりません。
【既定値=500ピクセル(標準スキン)】
d0181824_16233500.jpg
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpgd0181824_16404322.jpgd0181824_16234531.jpg

【既定値を520ピクセルに変更】
d0181824_16233500.jpg
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpgd0181824_16404322.jpgd0181824_16234531.jpg


次回は最終回です。
画像の拡大表示の応用編です。

# by PC-otasukeman | 2017-01-12 16:07 | Comments(1)

画像の拡大表示(その5)画像の配置とサイズ

ページへページへページへ

前回まではHTMLを知らなくても出来たことです。
ここからは「HTML編集」で画像のサイズや配置を変えて楽しいブログ創りをしてみたい思います。
「HTML編集」の経験がない方も是非挑戦してください。

【HTML編集とは】
HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略称です。ウェブ上の文書を記述するための言語です。
文章の中に記述することで、さまざまな機能を記述設定することができます。
「テキストを超える」という意味から"hyper-"(~を超えた) "text"(文書)と名付けられました。
HTML編集はこの言語を使って記事を書くということです。
HTML編集で記事を入力していくと、いろいろな文字列が挿入されますが、この文字列をタグと呼んでいます。
タグを追加したり、タグの中身を直接書き替えることができます。
今回のテーマでは「画像タグ」「改行タグ①」「改行タグ②」だけに注目しますので頭に入れてください。

【画像タグ】
下の文字列はクリックして挿入された花火の画像タグです。

[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|900|600#]

青字の部分:アップロードしたJPEG画像の番号
緑字の部分:アップロードした日付
mid:画像の配置(中央配置)
(mid:中央配置、left:左寄せ配置、right:右寄せ配置)
900:画像の横サイズ(900ピクセル)
600:画像の縦サイズ(600ピクセル)
実際の画像は下の様に見えます。
画像の横サイズが既定値(520ピクセル)に縮小されています。
画像をクリックすると横900ピクセル×縦600ピクセルの拡大画像が表示されます。
d0181824_16233500.jpg

画像タグの赤字の部分を書き替えることによって配置とサイズを自由に変えることが出来ます。

【書き替え例1】
横180ピクセル×縦120ピクセルに書き替えてみましょう。

[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|180|120#]

実際の画像は下の様に見えます。
クリックして拡大画像も確認してください。
d0181824_16233500.jpg

【書き替え例2】
更に左寄せ配置に書き替えてみましょう。
左寄せ配置、右寄せ配置にしたときは行の最後に改行タグ②(後述)を挿入する必要があります。
[#IMAGE|・・・・.jpg|201701/07/24/|left|180|120#]<br clear=all>

実際の画像は下の様に見えます。
クリックして拡大画像も確認してください。
d0181824_16233500.jpg

【重要⑥!】
サイズを書き替えるとき横縦比が同じくなるようにしなければなりません。
元の画像が横900ピクセルX縦600ピクセルの場合
横180ピクセルのサイズにするには、縦は次の計算で求めます。学校で習った比例計算ですね。
新縦=元縦600÷元横900X新横180

【重要⑦!】
左寄せ配置、右寄せ配置にしたときは行の最後に必ず改行タグ②(後述)を挿入します。

【画像を小さくして横に並べる方法】
4枚の画像を連続して入力します。
[#IMAGE|d0181824_16232323.jpg|201701/07/24/|mid|900|600#]
[#IMAGE|d0181824_16231133.jpg|201701/07/24/|mid|900|600#]
[#IMAGE|d0181824_16230620.jpg|201701/07/24/|mid|900|600#]
[#IMAGE|d0181824_16230620.jpg|201701/07/24/|mid|900|600#]

次に4枚の画像タグを次のように書き替えます。
全て左寄せ配置にし、サイズは4枚が横に並ぶサイズ(横100ピクセル×縦67ピクセル)にします。
[#IMAGE|d0181824_16232323.jpg|201701/07/24/|left|100|67#]
[#IMAGE|d0181824_16231133.jpg|201701/07/24/|left|100|67#]
[#IMAGE|d0181824_16230620.jpg|201701/07/24/|left|100|67#]
[#IMAGE|d0181824_16230620.jpg|201701/07/24/|left|100|67#]<br clear=all>
実際の画像は次のようになります。
クリックして拡大画像も確認してください。
d0181824_16232323.jpgd0181824_16231133.jpgd0181824_16230620.jpgd0181824_16232945.jpg

【重要⑧!】
画像が2列になった場合は横幅が大きすぎるためです。横幅を小さくしてください。
横幅一杯に配列する方法は次回ご紹介します。

【改行タグ①】
<br>
文章の改行を意味します。
通常はENTERキーで改行すると挿入されます。

【改行タグ②】
<br clear=all>
画像を左寄せや右寄せで配置したとき文字がその横に表示されます。これを文字の回り込みと言いますが、その回り込みを途中で解除するときに使います。
画像を左寄せ配置や右寄せ配置で挿入したときに最後に挿入します。
例えば下の例で「2016年8月1日撮影」の最後にこのタグを入力します。

d0181824_16233500.jpg凄い迫力です。
クリックしてご覧ください。
2016年8月1日撮影

今日はここまで、
次回は画像の表示と配置の応用です。
既定値の確認方法も次回説明します。

# by PC-otasukeman | 2017-01-10 17:38 | Comments(2)

画像の拡大表示(その4)画像の挿入

一部修正しました(1月9日午後4時)

ページへページへページへ

次はブログ記事に画像を挿入します。
【ご注意】エキサイトブログの新管理画面で説明します。

[投稿]をクリックし「記事を書く」画面を出します。
タイトルを入力し[HTML編集](または普通編集)タブを開きます。
d0181824_16410370.jpg

まず最初に記事に挿入する画像をアップロードします。
エクスプローラを開きます。
画像を保存したフォルダを開き、ウインドウを左半分に配置します。[表示]タブを開き[大アイコン]にすると見やすいでしょう。
挿入する画像をドラッグして所定のエリアで離すとアップロードが始まります。
d0181824_16243257.jpg
【重要④!】
ファイルサイズが500KBを超えると既定値(後述)のサイズに縮小されてからアップロードされます。
画像にマウスポインタを合わせると画像サイズとファイルサイズが表示されますので、確認してください。

アップロードが終わると右サイドのアップロード欄に画像が表示されます。
d0181824_16520619.jpg

挿入する位置へカーソルを立ててアップロード欄の画像をクリックします。
d0181824_16174094.jpg

「HTML編集」では画像タグと呼ばれる文字列が挿入され、
d0181824_16255567.jpg

[普通編集]では画像そのものが挿入されます。
d0181824_11454122.jpg

[プレビュー]をクリックしてみましょう。
下のような画像が表示され、クリックすると拡大画像が表示されます。
d0181824_16233500.jpg

【重要⑤!】
画像の表示には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編集の場合、midleftに書き替えます。
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|left|900|600#]
普通編集の場合は画像をクリックすると選択肢が出て来ますので[左]をクリックします。

下の画像が実際の表示です。。
【中央配置】
d0181824_16233500.jpg

【左寄せ配置】
画像の右側に文字が入力できるようスペースが確保されます。
d0181824_16233500.jpg


【表示する画像のサイズを変更する】
横90ピクセル×縦60ピクセルに書き替えてみましょう。
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|90|60#]
実際の画像は下の様になります。
クリックして拡大画像も確認してください。

【中央配置】
d0181824_16233500.jpg

【左寄せ配置】
d0181824_16233500.jpg


【用語説明】
【HTML】
HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略称です。ウェブ上の文書を記述するための言語です。
文章の中に記述することで、さまざまな機能を記述設定することができます。
「テキストを超える」という意味から"hyper-"(~を超えた) "text"(文書)と名付けられました。

【タグ】
HTML編集で記事を入力していくと、いろいろな文字列が挿入されます。これをタグと呼びます。
画像タグもその一つです。
取り敢えず次のタグも頭に入れてください。

<br>:改行タグA
文章の改行を意味します。
通常はENTERキーで改行すると挿入されます。

<br clear=all>:改行タグB
画像を左寄せや右寄せで配置したとき文字がその横に表示されます。これを文字の回り込みと言いますが、その回り込みを途中で解除するときに使います。
画像を左寄せ配置や右寄せ配置で挿入したときに最後に挿入します。
例えば下の例で「2016年8月1日撮影」の最後にこのタグを入力します。

d0181824_16233500.jpg凄い迫力です。
クリックしてご覧ください。
2016年8月1日撮影

今日はここまで、
次回は画像の表示と配置の応用です。

# by PC-otasukeman | 2017-01-08 16:28 | Comments(4)

画像の拡大表示(その3)画像サイズ

ページへページへページへ

【拡大表示の画像サイズを決める】
下の画像は拡大表示をしたときの私のパソコン画面(横1366ピクセル X 縦768ピクセル)です。
黄色の枠内がブログの表示エリア(横1356ピクセル X 縦654ピクセル)、
赤色の枠内が拡大表示の画像エリア(横900ピクセル X 縦600ピクセル)です。
d0181824_11391292.jpg

【 重要①!】
画像エリアに表示される画像はアップロードした画像のサイズで表示されます。
小さな画像をアップロードすれば画像エリアの画像も小さくなります。
表示エリアをはみ出るような大きい画像をアップロードすれば、画像もはみ出てしまい、はみ出た部分は見えなくなります。
私はアップロードする写真は縦サイズを600ピクセルに統一することに決めました。
上の花火の写真は横900ピクセルX縦600ピクセルに加工してアップロードしたものです。
できる限り大きな画像にしたいのですが、閲覧者の画面事情を考慮して少し余裕を持たせました。

【重要②!】
エキサイトブログでは画像のファイルサイズが500KBを超えると縮小されてアップロードされてしまいます。
私のブログで言えば横520ピクセルX縦346ピクセルに縮小されてしまいます
下の画像がその例です。クリックしてみてください。大きな画像になりませんね。
d0181824_09015350.jpg

JPEG画像は画質を調整してファイルサイズを小さくすることができます。
下の画像は調整してからアップしたものです。クリックしてみてください。画質も気にならないと思います。
d0181824_09181673.jpg

【重要③!】
アップロードした画像はエキサイトのサーバーに保存されます。
必要なときはダウンロードで入手できますので、画質の良い大きな画像をアップロードしておくと良いでしょう。
ただし、無料コースは1GBの容量制限がありますので注意してください。

【画像加工手順】
画像加工ソフト「PhotoScape」のリサイズ機能と画質調整機能を使って写真を加工してみましょう。
PhotoScapeを起動します。
[画像編集]をクリックします。
d0181824_10095743.jpg

画像編集画面が開きます。加工する写真が保存されているフォルダーをクリックすると、下に写真が表示されます。
加工する写真を探してクリックします。
d0181824_10100813.jpg

写真の画像が表示されます。
画像サイズ、ファイルサイズが表示されています。デジカメの原版の画像サイズとファイルサイズは大きいですね。
d0181824_10211026.jpg

画像サイズを縦600ピクセルになるよう加工します。
[リサイズ]ボタンの▼をクリックするとリストが出て来ますので、[高さの調整]をクリックします。
d0181824_10102395.jpg

高さ(ピクセル)欄に[600]と入力して[OK]をクリックします。
d0181824_16574670.jpg

横900ピクセルX縦600ピクセルの画像が出来ました。OKであれば[保存]をクリックします。
:ファイルサイズ欄はまだ元のままです。
d0181824_16595179.jpg

保存の画面が出ましたら、[JPEG品質]にチェックを入れてファイルサイズを確認します。
500KB以下であれば[名前を付けて保存]します。500KBを超えている場合は、レバーを左にドラッグして画像品質を調整します。
d0181824_17012131.jpg

500KB以下になったら[名前を付けて保存]をクリックします。
d0181824_17031794.jpg

保存先、ファイル名を決めて[保存]をクリックします。
d0181824_17054605.jpg

画像サイズ、ファイルサイズを確認して終了します。
d0181824_17071627.jpg


【画像ファイルの確認】
画像を保存したフォルダーを開きます。
[表示]タブを開いてレイアウトを[詳細]にします。
サイズ欄の数値(KB)がファイルサイズです。
一番先頭の「0-0花火・原画」以外はすべて横900ピクセルX縦600ピクセルにリサイズしたものです。
サイズが500KBを超える画像が4点ありますが、絵柄によってサイズが違うことをお知らせするため、あえて画質の調整をしなかったものです。アップロードするときは再度加工します。
d0181824_12155485.jpg


【用語説明】
【画像サイズ】
 デジタル画像は縦横に並べられた色の付いた点で表現されます。その一点一点を「ピクセル(画素)」と呼んでいます。
そして、縦横に並べられた点の数で画像サイズを表します。
【デジタルカメラで撮った写真:横3456ピクセル×縦2304ピクセル】
【複合機のスキャナー画像:横3502ピクセル×2492ピクセル】
【家庭用ノートパソコンの画面:横1366ピクセル×縦768ピクセル】

【ファイルサイズ】
画像の大きさを表すもう一つの値がファイルサイズです。
単位はKB(キロバイト)であり、サイズの大・小は画像の保存や処理に影響します。
画像ファイルは圧縮という技術が使われており、絵柄や画質によってサイズが違ってきます。

今日はここまで、
次回は画像の配置と表示サイズについて説明します。

# by PC-otasukeman | 2017-01-07 10:49 | Comments(0)

画像の拡大表示(その2)・拡大表示画面の設定

ページへページへページへ

【拡大表示の画面を設定する】

【ご注意】以降の説明はエキサイトブログの新管理画面を使います。

次の手順で拡大表示画面を設定します。
【基本設定】
マイブログにログインして[設定]をクリックします。
d0181824_16502549.jpg

設定画面が開いたら[基本設定]タブを開きます。
d0181824_16504217.jpg

下へ スクロールすると「画像の拡大表示」の項目があります。
[画像閲覧ページ]を選択すると「画像閲覧ページの画面」に設定され、
[ポップアップ]を選択すると「ポップアップ 画面」に設定されます。[適用]ボタンのクリックで変更できます。
d0181824_16531642.jpg

【ポップアップ(右クリック禁止モード)画面の設定】
少し厄介な操作ですが、挑戦してみてください。
基本設定で画像の拡大表示が「ポップアップ」に設定されていることを確認します。
設定画面の[ メニュー設定]タブを開きます。
d0181824_17193458.jpg

下の方へスクロールすると「ブログパーツ」の項目がありますので[ブログパーツ管理はこちら]をクリックします。
d0181824_17194521.jpg

ブログパーツ追加の画面が出ます。[対応ブログパーツ一覧]をクリックします。
d0181824_17402759.jpg

ブログパーツ一覧が表示されます。
スクロールし[右クリック禁止ブログパーツ]をクリックします。
d0181824_17510855.jpg


ブログパーツに関するページが表示されます。
d0181824_17461352.jpg

スクロールすると、ブログパーツソースが出てきますので、ソースコードを選択して右クリックでコピーします。
d0181824_17534795.jpg

再度ブログパーツ追加の画面を出します。ソースコード欄に先ほどコピーしたソースコードを右クリックで貼り付けてから[登録]をクリックします。
d0181824_17582713.jpg

設定画面を出し、[メニューの並べ替え]タブを開きます。
d0181824_17592019.jpg

スクロールして[ブログパーツ]にチェックを入れて[適用]をクリックします。
d0181824_17593713.jpg

ブログを開いて確認します。「ポップアップ(右クリック禁止モード)画面」が表示されたらOKです。
:「ブログパーツ」のチェックを外せば元に戻すことができます。

【注記】
「ブログパーツ」にチェックを入れると画像を右クリックしても操作メニューが表示されなくなり、「名前を付けて画像を保存」することが出来なくなります。
またブログ本体のメニュー欄に注意メッセージが表示されますので確認しておいてください。。
d0181824_16593338.jpg


今日はここまで
次回は拡大表示のテクニックに移ります。
画像加工ソフト「PhotoScape」を使いますので、ご準備ください。
PhotoScapeのダウンロードはこちら(フリーソフト(Photoscape)ダウンロード) を参照してください。

# by PC-otasukeman | 2017-01-06 08:00 | Comments(1)

画像の拡大表示(その1)

ページへページへページへ

 エキサイトブログの「画像の拡大表示」をご存知ですか?
下の画像をクリックしてみてください。迫力あるアオサギが現れます。
小さな画像を大きく魅せるテクニック・・・これが「画像の拡大表示」です。

今回は拡大表示に必要な基礎知識とテクニックをご紹介しますので皆さんもお試しください。
d0181824_11025205.jpg
d0181824_14481557.jpgd0181824_11035238.jpgd0181824_14513190.jpg

【拡大表示の画面について】
拡大表示の画面は3種類用意されており、設定によって選ぶことができます。

【画像閲覧ページの画面(100人中80人が設定) 】
(エキサイトブログ100サイトを調べた結果80サイトの方がこの画面でした。)
画像をクリックすると画像閲覧ページ(↓)が開きます。
画像の右下隅に拡大鏡が出たときは更に拡大できることを表しています。
d0181824_16010775.jpg
拡大鏡をクリックすると最大画像(↓)が表示されます。
d0181824_16011681.jpg
元の画面に戻るときは[←(戻る)]ボタンをクリックしなければなりません。

【ポップアップ 画面(17人が設定) 】
画像をクリックするとポップアップのウインドウ(↓)が開きます。
ウインドウが小さい時は[最大化]ボタンをクリックすると、
d0181824_16015023.jpg
最大化します。
d0181824_16015969.jpg
画面内をクリックすれば元の画面に戻ります。戻りは簡単です。

【ポップアップ (右クリック禁止モード)画面(3人が設定】
画像をクリックすると、ポップアップ画像(↓)が表示されます。
d0181824_16021316.jpg
画面内をクリックすれば元の画面へ戻ります。
「ブロ友パソコン相談室」はこの画面に設定しています。
操作も単純で、見栄えも良く、皆様にも見やすいのが選んだ理由です。

【初笑い】
元気ばばさんの新春 今年の初笑い をご覧になりましたか?
文末に「画像の拡大表示」のテクニックを使った落ちがあり、大笑いでした。
【落ちの部分】
▼  写真 【クリック】
d0181824_09313130.jpg


【重要】
ご自分のブログを確認してください。
拡大表示画面にしても画像の大きさが変わらない方が多いと思います。
画像を拡大するにはいくつかのテクニックが必要です。
次回以降、ご紹介していきますので、是非ご覧ください。

その2へつづく

# by PC-otasukeman | 2017-01-05 09:42 | Comments(0)

謹賀新年

ページへページへページへ

d0181824_07552921.jpg


「一人の困った」は「皆んなの困った」
「一人の疑問」は「皆んなの疑問」

原理・原則・基本に立ち返り一つひとつ解決していきたいと思います。

今年も「安心で快適なパソコンライフ」をご一緒に楽しみましょう。
       パソコンお助けマン

今年は酉年・・・・野鳥の年?  クリックしてご覧ください。
メジロ、ムクドリ、スズメ、ヒヨドリ、カラス(カット)撮れたてです。
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpgd0181824_16404322.jpgd0181824_16234531.jpg
d0181824_16253006.jpgd0181824_16261212.jpgd0181824_16262436.jpgd0181824_16270014.jpg
d0181824_16274145.jpgd0181824_16274980.jpgd0181824_16275402.jpg
d0181824_16284578.jpgd0181824_16285091.jpg

予告
初テーマは「画像の拡大表示」です。
小さな画像を大きく魅せるテクニックをご紹介します。5日に投稿予定です。お楽しみに!

【基本設定】
d0181824_13324719.jpg
+ アルファーのテクニック

下の画像もクリックしてご覧ください。
d0181824_11025205.jpg
d0181824_14481557.jpgd0181824_11035238.jpgd0181824_14513190.jpg


# by PC-otasukeman | 2017-01-01 00:31 | Comments(29)