ライトアップ岩屋堂 2016

「画像の拡大表示」のテクニックを使いました。
各画像をクリックするとポップアップ画面で表示され、再度クリックすると消えます。
クリックしてライトアップ岩屋堂をお楽しみください。


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

11月15日 中日新聞 なごや東版より
NPO法人 「品野つくし会」 さんの記事です。毎日お世話になっています。感謝ですね。
d0181824_14283520.jpgd0181824_10260279.jpg

早速私も会場へ。新聞カメラマンと同じアングルで一枚。
d0181824_11130703.jpg

会場入り口・・・紅葉、陶の灯り、竹の灯り、そして1日遅れのスーパームーン
d0181824_10550228.jpg

d0181824_12375855.jpgd0181824_12412722.jpgd0181824_12420330.jpg
d0181824_12422507.jpgd0181824_12483896.jpgd0181824_12445715.jpg
d0181824_13525854.jpgd0181824_13513721.jpgd0181824_13504264.jpg

d0181824_13485412.jpg

昼の岩屋堂もどうぞ・・・今年は色づきが良いようです。
d0181824_14033856.jpgd0181824_14035513.jpgd0181824_14040459.jpg
d0181824_14042212.jpgd0181824_14175656.jpgd0181824_14063012.jpg

ライトアップは11月20日(日)21時までです。
d0181824_10420381.jpg




More 画像の拡大表示 例

# by PC-otasukeman | 2016-11-16 14:43 | Trackback | Comments(11)

画像の拡大表示(その5・最終回)

画像の拡大表示(その4)の続きです。
本投稿はエキサイトブログが対象です
説明の前提条件
① パソコンのディスプレイは横1366ドット×縦768ドット(横縦比 16:9)
② 新管理画面を使用し、HTML編集で投稿

【画像サイズの設定】
ブログを作るときに選んだスキン(デザインスキン)、その設定を覗いてみましょう。
[設定]-[デザインスキン]-[PCデザインスキン]とクリックしていくと「PCデザインスキン」の画面が出ます。
現在使用中のスキン(Cyber 2)の[編集]をクリックします。
d0181824_12054027.jpg

「PCデザインスキン編集」の画面が出てきます。
今回知っておいて頂きたいのは「基本設定」にある「サイズ」の「本文」欄です。
単位はピクセル(PX)、画像の横幅を400~800の範囲で指定できるようになっています。
このサイズが挿入できる画像の最大サイズであり、次のように使われます。
① データサイズが500KBを超える画像はこのサイズに縮小されてアップロードされます。(サンプル①)
② アップロードした画像がこの値より大きいときはこの値に縮小されて表示されます。(サンプル③、④、⑥)
【ご注意】
ブログの本文表示エリアより大きいサイズを指定すると、表示される画像の右サイドが見えなくなりますので注意してください。
Cyber2の本文エリアは横530ピクセル(画像エリアは520ピクセル)ですから、私は520ピクセルに設定してあります。
標準のスキンは程よいサイズに設定されていると思います。支障がなければそのままお使いください。
d0181824_13150258.jpg


【画像を横に並べるテクニック】
横1244ピクセル×縦700ピクセルの大きな画像をブログの表示エリアの中に4枚 横に並べるテクニックをご紹介します。
(画像をクリックすれば大きなサイズで表示されます。)
d0181824_11025205.jpgd0181824_11032212.jpgd0181824_11035238.jpgd0181824_11042287.jpg

4枚の画像タグを続けて入力します。
d0181824_10285142.jpg

画像タグの配置をすべて[left]に書き替えます。
画像タグの最後に改行タグ(<br clear=all>)を加えます。
次に4枚の横と縦をすべて仮サイズ[100]に書き替えます。すべて書き替えたら[プレビュー]をクリックします。
d0181824_10384489.jpg

4枚の画像が横に並びます。
d0181824_16091344.jpgd0181824_16095044.jpgd0181824_16102099.jpgd0181824_16105002.jpg

1枚目の横幅を調整して最大横幅を探していきます。まず初めに横幅を100から200に書き替えてみましょう。書き替えたら[プレビュー]をクリックします。
d0181824_10535628.jpg

大きすぎました。1行に収まらず、自動改行されて2段になってしまいました。
d0181824_16091344.jpgd0181824_16095044.jpgd0181824_16102099.jpgd0181824_16105002.jpg

190に減らしてみましょう。
d0181824_13210993.jpg

4枚横並びに戻りました。
d0181824_16091344.jpgd0181824_16095044.jpgd0181824_16102099.jpgd0181824_16105002.jpg

並んだ画像がブログ本文の幅に近づいたら1ピクセルづつ増やしていきます。191に書き替えます。
d0181824_11202917.jpg

再び大きすぎです。
d0181824_16091344.jpgd0181824_16095044.jpgd0181824_16102099.jpgd0181824_16105002.jpg

ということで、最大値が190ピクセルと分かりました。
次に画像の本来の横幅を求めます。
4枚の仮の横幅を合計し、それを4で割れば1枚分の横幅になります。
190+100+100+100=490
490÷4=122 余り2
本来のサイズは1枚目、2枚目が122ピクセル、3枚目、4枚目は余りを足して123ピクセルとします。
次に画像の縦サイズを求めます。
サンプル画像の横縦比は16:9ですから縦サイズは69ピクセルになります。
本来の画像サイズに書き替えて[プレビュー]をクリックします。
d0181824_15032236.jpg

これで完成です。
d0181824_16091344.jpgd0181824_16095044.jpgd0181824_16102099.jpgd0181824_16105002.jpg

枚数が違っても手順は同じです。
2枚、3枚、4枚・・・一度求めて、記録しておくと良いでしょう。

【小さな文字も拡大表示で解決】
下の画像はスキャナーで撮ったパンフレットの一部です。
【一切加工せずアップロード】
小さい文字が読みにくいですね。
d0181824_14052233.jpg

【加工してアップロード】
クリックして拡大すれば、大変読みやすくなります。
d0181824_14055530.jpg

画像加工ソフト「PhotoScape」で加工しています。
画像サイズを横幅2000ピクセル(バカデカサイズ)にリサイズ
文字の輪郭をはっきりさせるためシャープ加工
d0181824_14412414.jpg

画質調整にてデーターサイズが500KB以下になるように縮小
d0181824_15590849.png

以上でテーマ投稿を終了します。
皆さんもいろいろと試してみてください。
楽しいパソコンライフ、ブログライフの一助になれば幸いです。

# by PC-otasukeman | 2016-11-09 15:28 | Trackback | Comments(4)

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

画像の拡大表示(その3)の続きです。
本投稿はエキサイトブログが対象です
説明の前提条件
① パソコンのディスプレイは横1366ドット×縦768ドット(横縦比 16:9)
② 新管理画面を使用し、HTML編集で投稿

前回、目的に合ったサイズの画像をアップロードしました。
今回はエキサイトブログの「新管理画面のHTML編集」で画像入りの記事を書いてみましょう。

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

【覚えておきたい記号】
記事を入力していくと、いろいろな記号が出て来ますが、取り敢えず次の記号だけ頭に入れてください。

<br>:改行A
文章の改行で使います。

<br clear=all>:改行B
サンプル②、③のように画像を左寄せや右寄せで配置したとき、文字がその横に表示されます。これを文字の回り込みと言いますが、その回り込みを途中で解除するときに使います。

#IMAGE|d0181824_17021426.jpg|201611/04/24/|mid|1366|595#:画像
画像を挿入するとき使います。使う画像と配置とサイズを指定します。
  mid:中央配置
  left:左寄せ配置
  right:右寄せ配置
  1366|595:画像サイズ(単位はピクセル)(横1366ピクセルX縦595ピクセル)
【注意】
記号をタグと呼びます。タグは半角文字を使いますが、上の記述では一部全角文字に替えていますので、コピーして使わないでください。

【画像挿入手順】
実際に画像を挿入してみましょう。
「記事を書く」を開き、[HTML編集]タブを開きます。
文字を入力していきます。1枚目の画像を入れるところにカーソルを立てます。
アップロード画像欄の画像(ミルク姫)をクリックします。
d0181824_14532329.jpg

画像タグが挿入されました。
d0181824_14533031.jpg

続いて文字を入力していき、画像挿入位置にカーソルを合わせ次の画像(バスケットボール?)をクリックします。
d0181824_14550846.jpg

画像タグが挿入されました。
d0181824_14554737.jpg

以下同様に入力していきます。
左寄せ、右寄せ画像の左右に文章を入れるとき画像タグの後ろに続けて入力します。
画像を横に複数枚並べて配置する場合は画像タグは続けて挿入します。
d0181824_15004873.jpg

下の画像は入力欄です。
挿入された画像の配置は全て「mid」(中央配置)でサイズはアップロードしたサイズになっています。
d0181824_15563805.jpg

次に画像サイズと画像配置を書き直します。
なお、画像サイズが既定より大きい場合は、自動的に既定のサイズで表示されるように作られています。
【サンプル①の画像】
私のブログほ既定は横520ピクセルです。サイズを小さくしないときは修正の必要はありません。
【サンプル②の画像】
左寄せに配置しますから、「mid」を「left」に書き換えます。
サイズを小さくしないときは修正の必要はありません。(このサイズでアップロードしています)
文字の回り込みを解除するので、説明文の後ろに改行B<br clear=all>を挿入します。
【サンプル③の画像】
右寄せに配置しますから、「mid」を「right」に書き換えます。
画像サイズはサンプル②に合わせて横260ピクセルに書き替えます。縦は比率で算出した値「182」に書く替えます。
文字の回り込みを解除するので、説明文の後ろに<br clear=all>を挿入します。
【サンプル④の画像】
この画像タグも修正する必要ありません。
【サンプル⑤の画像】
横並べの3枚の画像はすべて「mid」を「left」に書き替えます。
さらに横に並ぶようにサイズを書き替えます。サイズの決め方は次回説明します。
文字の回り込みを解除するので、タグの後ろに改行B<br clear=all>を挿入します。
d0181824_15570844.jpg

プレビュー画面はこんな具合です。以降は文字を大きくしたり色を付けたり・・ご自分の好みで進めてください。
d0181824_16414688.jpg

次回は最終回です。ちょっとしたテクニックを含めて説明します。
画像の拡大表示(その5・最終回)へ続きます。

# by PC-otasukeman | 2016-11-06 09:14 | Trackback | Comments(4)

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

画像の拡大表示(その2)の続きです。
本投稿はエキサイトブログが対象です
説明の前提条件
① パソコンのディスプレイは横1366ドット×縦768ドット(横縦比 16:9)
② 新管理画面を使用し、HTML編集で投稿

私のブログの画像をクリックすると拡大画像が表示されます。
この機能を使うには拡大するサイズの画像を作ってからアップロードしなければなりません。
ちょっとしたコツ(ノウハウ)が必要です。
今回は画像加工ソフト「PhotoScape」を使って作り方をご紹介します。

【予備知識】
【画像サイズ】
 デジタル画像は縦横に並べられた色の付いた点で表現されます。その一点一点を「ピクセル(画素)」と呼んでいます。
そして、画像のサイズは縦横に並べられた点の数で表します。(単位はピクセル)
【例】
【デジタルカメラで撮った写真画像】
  カメラA 横3456ピクセル×縦2304ピクセル
  カメラB 横5152ピクセル×縦3864ピクセル
【複合機のスキャナー画像】
  横3502ピクセル×2492ピクセル
【ノートパソコンのスクリーンショット画像】
  横1366ピクセル×縦768ピクセル(横縦比16:9)
:単位として「ドット」が使われることがありますが、ドットは単なる物理的な点を意味します。色彩のある画像にはピクセルが良いでしょう。

【ファイルサイズ】
ファイルサイズ(単位:KB(キロバイト)は画像の大きさを表すもう一つのサイズです。
処理時間やサーバー使用容量(無料コース:1GB)に影響しますから必要最小限に抑えると良いとされています。

画像は圧縮技術と言ってファイルサイズを小さくする技術が使われています。絵柄や画質によってファイルサイズが決まります。
画像サイズを大きくてしても画質を落とせばファイルサイズを小さくできるのです。

【エキサイトブログの処理】
 ファイルサイズが500KBを超える画像は次の優先順位で縮小されてしまいます。
本文の画像サイズ(基本設定で設定されています)に縮小。
 相談室は横幅が520ピクセルに設定されています。
画像サイズを縮小してもまだファイルサイズが500KBを超える場合は画質を落として500KB以下に縮小されます。
デジカメで撮った画像は画像サイズもファイルサイズも遥かに大きいサイズです。なにも加工しなければ自動的に縮小されてアップロードされることになります。
手間いらずですが、大きな画像の表示はできません。

【画像ファイルの見方】
拡大表示を活用するには「画像サイズ」と「ファイルサイズ」の両方を満足する画像を作る必要があります。
まずは今回のテーマで作成した画像ファイルを見てみましょう。
画像ファイルを保存したフォルダー(↓)です。
表示タブを開いてレイアウトを[詳細]にします。
ファイル名の(  )が画像サイズ、サイズ欄の数値(KB)がファイルサイズです。
サンプル②~⑥の画像はPhotoScapeで加工したものです。
スクリーンショット画像のファイルサイズは小さいですが、スキャナー画像とデジカメ画像はとても大きいですね。
d0181824_10234642.jpg

【画像作成のコツ(ノウハウ)】
【画像サイズを決める】
画像サイズはブログの内容によって決めましょう。
私の場合は次を目安にしています。
① スナップ写真のようにサイズにこだわらないときは加工しない。
② 素晴らしい写真を披露したいときは、横縦比を16:9 又は4:3にトリミングして、縦寸法を600~700ピクセルに加工する。
 家庭用ノートパソコンの画面に収まる大きさです。
③ 写真用紙にプリントアウトしたいときは縦横比を127:89(L版)にトリミングし、縦寸法を700ピクセルに加工する。
  画質が良くするためできるだけ大きな画像サイズにします。
④ 手順説明用の画像は縦横比を16:9とし、横寸法は1366ピクセルに加工する。
 (スクリーンショット画像(横1366X縦768ピクセル)はファイルサイズが小さいのでそのまま使います)
⑤ 小さな文字が含まれている画像は横を2000ピクセル、または縦を1000~1200ピクセルのバカデカサイズに加工します。
 (スクロールしないと全部見ることができませんが、見えることが優先です)
⑥ ブログを軽くし、メモリ消費を抑えるときは記事に挿入するサイズに加工します。

【画像加工手順】
画像加工ソフト「PhotoScape」を使って加工します。
タイプ⑤の画像を加工してみましょう。
デジカメで撮った画像を開きます。
画像サイズ、データサイズが表示されています。デジカメで撮った写真は大きな画像ですね。
d0181824_13252425.jpg

【トリミング】
必要に応じてトリミングします。ここでは横縦比16:9の枠でトリミングします。
d0181824_13255200.jpg

【リサイズ】
次に画像サイズを変更します。[リサイズ]ボタンをクリックします。
d0181824_13260033.jpg

[高さの調整]をクリックします。
d0181824_13260730.jpg

高さ欄に[700]ピクセルを入力して[OK]をクリックします。
d0181824_13261213.jpg

横1244ピクセルX縦700ピクセル(16:9)の画像が出来ました。OKであれば[保存]をクリックします。
:データサイズ欄はまだ変化しません。
d0181824_13262075.jpg

保存の画面が出ましたら、[JPEG品質]にチェックを入れてデータサイズを確認します。
500KB以下であれば[名前を付けて保存]しますが、500KBを超えている時は、レバーを左に動かして画像品質を調整します。
d0181824_13262526.jpg

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

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

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

作成した画像をアップロードして画像タグでサイズを確認します。
サイズが小さくなった場合は自動的に縮小されています。
ステップ⑦の操作で再加工します。
d0181824_17021426.jpg

以上で画像の加工は終りです。
次回は画像の配置と表示サイズについて説明します。

画像の拡大表示(その4)へ続く

# by PC-otasukeman | 2016-11-04 18:08 | Trackback | Comments(2)

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

画像の拡大表示(その1)の続きです。

エキサイトブログをお使いの方へ
説明の前提条件
① パソコンのディスプレイは横1366ドット×縦768ドット(横縦比 16:9)
(家庭用ノートパソコンの多くはこのサイズです)
② 新管理画面を使用し、HTML編集で投稿

 ブログの画像をクリックすると拡大画像が表示されますが、表示形式にはいろいろあります。
今回は3種類の表示形式とその設定の仕方を説明します。
ご自分のブログを確認して、好みの形式に設定してみてはいかがでしょうか。

【拡大画像の表示形式】
下の説明画像はすべてパソコン画面のスクリーンショット画像です。
また、相談室のブログは【ポップアップ(ブログパーツオン)】に設定してあります。
説明画像をクリックするときは承知して見てください。

【ポップアップ(ブログパーツオン)】
見たい画像をクリックすると、同じウインドウ内に額縁に入ったような画像が表示されます。もう一度 画面内をクリックすると消えます。
拡大画像が大きすぎて見えないときはスクロールすれば見えてきます。
なお、この形式では画像の上での右クリックが無効になりますので、「名前を付けて画像を保存」等の操作はできません。
d0181824_10464829.jpg

【ポップアップ(ブログパーツオフ)】
画像だけ表示された別ウインドウが開きます。もう一度 画面内をクリックすると消えます。
ウインドウが小さい時は[最大化]ボタンをクリックします。
d0181824_10473043.jpg

最大化すると拡大画像が表示されます。
d0181824_10485889.jpg

【画像閲覧ページ】
画像閲覧ページが開きます。元のぺージに戻るときは戻るボタンをクリックします。
画像の右下隅に拡大鏡が出た時はまだ拡大できますのでクリックします。
d0181824_10501849.jpg

拡大画像が表示されます。ここも戻るボタンをクリックして戻ります。
d0181824_10503256.jpg


次に設定の手順を説明します。
【基本設定】
マイブログにログインして[設定]をクリックします。
d0181824_16502549.jpg

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

下の方にスクロールすると「画像の拡大表示」の項目がありますので、
[画像閲覧ページ]か[ポップアップ]どちらかを選択し[適用]ボタンをクリックします。
d0181824_16531642.jpg

設定が終わったらブログを開いて表示形式を確認します。
「画像閲覧ページ」か「ポップアップ(ブログパーツオフ)」の形式で拡大画像が表示されたらOKです。

【ポップアップ(ブログパーツオン)の設定】
 エキサイトには「右クリックで画像やイラストを取得することを禁止する」という機能があります。
画像を右クリックしても「名前を付けて画像を保存]することは出来ませんし、クリックして出てくる拡大画像(↓)に「・・利用・使用はお断りします。」旨のメッセージが表示されます。 画像を使用されたくない方にはおすすめの機能です。
d0181824_11513777.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」を使って説明します。
興味のある方は、
画像の拡大表示(その3)へお進みください。

# by PC-otasukeman | 2016-11-02 16:17 | Trackback | Comments(0)