画像の拡大表示(エキサイトブログの幅狭スキンをお使いの方へ)

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

【エキサイトブログをお使いの方へ】

画像を大きく魅せるテクニックをご紹介します。

 下の画像をクリックすると縁取りした大きな画像が現れます。
現れた画像をもう一度クリックすると元に戻ります。
まずはクリックして拡大表示の機能を体感してみてください。
d0181824_11025205.jpg
いかがでしたか?
① クリック一つで簡単に切り替えできる。
② 画像の切り替えがとても速い。
と感じたと思います。
私のブログでも活用して大変重宝しています。
そのテクニックをご紹介しますので、
横幅が狭いスキンをお使いの方で、写真を大きく魅せたい方は是非お試しください。

【基本設定】
以下、エキサイトブログの新管理画面で説明します。
マイブログにログインして[設定]をクリックします。
d0181824_14174378.jpg

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

下へ スクロールすると「画像の拡大表示」の項目があります。
[ポップアップ]を選択し、
d0181824_14192137.jpg
スクロールして[適用]をクリックします。
d0181824_14193933.jpg

【ブログパーツの追加】
ブログパーツとは、ブログのサイドバー(ブログの空きスペース)に掲載するパーツ(部品)のことです。
縁取り画像を表示させるためのパーツを追加します。
設定画面に戻りましたら、設定項目の[ブログパーツ]をクリックします。
d0181824_14380378.jpg

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

ブログパーツのページが表示されます。
スクロールし、対応ブログパーツ一覧にある[右クリック禁止ブログパーツ]をクリックします。
このパーツは画像の右クリックを禁止するものですが、縁取りの画像を表示するものでもあります。
d0181824_14532997.jpg
d0181824_14533607.jpg

右クリック禁止ブログパーツに関するエキサイトのページが表示されます。
d0181824_14552525.jpg

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

再度ブログパーツ追加の画面を出します。入力欄に先ほどコピーしたソースコードを右クリックで貼り付けます。
d0181824_14573936.jpg

コードが貼り付いたら[登録]をクリックします。
d0181824_14585350.jpg

再度基本設定画面を出し、[メニューの並べ替え]タブをクリックして開きます。
[ブログパーツ]にチェックを入れて[適用]をクリックして終了します。
d0181824_15351093.jpg
d0181824_15355799.jpg

マイブログを開いて確認します。
サイドバーに「ブログパーツ」が表示されたことを確認し、本文の画像をクリックしてみます。
d0181824_15364699.jpg

縁取りされた画像が表示されれば設定は成功です。
d0181824_15371530.jpg
ここで重要なポイントがあります。
縁取り画像はアップロードされた画像と同じサイズで表示されるということです。
上の縁取り画像は横520ピクセル×縦390ピクセル、
下の縁取り画像は横933ピクセル×縦700ピクセルです。
d0181824_13022523.jpg

【大きな画像をアップロードするには】
エキサイトブログではファイルサイズが500KBを超えると自動的に既定の大きさに縮小されてしまいます。
上の小さい方の画像がその例です。画像の長手方向が既定値(520ピクセル)に縮小されています。
画像サイズを大きくするとファイルサイズも大きくなりますので、画像サイズとファイルサイズを調整できる加工ソフトが必要です。
「縮小専用」「PhotoScape」などいろいろありますが、ここでは「PhotoScape」を使って説明します。

PhotoScapeを起動します。
[画像編集]をクリックします。
d0181824_10095743.jpg

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

写真の画像が表示されます。
画像サイズ、ファイルサイズが表示されています。デジカメの画像はとても大きいことが分かります。
d0181824_10211026.jpg

拡大表示するサイズになるよう加工します。
[リサイズ]ボタンの▼をクリックするとサイズ候補が出て来ますので、[高さの調整]をクリックします。
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

【参考】
拡大画像の大きさはパソコンの画面の大きさを考慮して決めてください。
ノートパソコンの画面は次の3つが主流です。
横1024ピクセル×縦768ピクセル
横1366ピクセル×縦768ピクセル
横1920ピクセル×縦1080ピクセル(最新のモデル)
拡大画像は横1000ピクセル、縦は600~700ピクセルにするとどのタイプでも画面に収まって、見易いでしょう。

by PC-otasukeman | 2017-05-12 16:09 | Comments(9)

Commented by h-ちゃん at 2017-05-12 20:41 x
otasukemannさま こんばんは。
 写真が上手くなって、素敵にUPされているのですね。
 大きく見せるテクニックが、興味があります
 勉強させて頂きます・・・難しいかな~

 ありがとうございます。  忙しい婆さんです
Commented by banban0501 at 2017-05-12 23:46
すごく 参考になる記事ですね

フォトスケープでリサイズするときに
長い方を1000で加工しています

500でも充分なのでしょうか?
Commented by PC-otasukeman at 2017-05-13 07:56
★ h-ちゃん さん
是非トライしてください。
分からないこと、戸惑ったことがありましたらコメントください。
Commented by PC-otasukeman at 2017-05-13 08:01
★ banban0501 さん
banban0501 さんのブログの既定値は500ピクセルになっていると思います。
長い方を500ピクセルすれば拡大表示はできなくなります。
大きなサイズでかつファイルサイズが500KB以下の画像を作ってアップロードするのがポイントです。
Commented by h-ちゃん at 2017-05-14 08:28 x
otasukemanさま おはようございます。
 縁取りプログパーツが、張り付きました(^^♪
 成功のようです♪ ありがとうございます

 写真を、大きく見せるに学習しますが
 大きく見せる良い写真が、ありません( 一一)
Commented by banban0501 at 2017-05-16 14:27
画像サイズは もとの画像のピクセルを
確認しておく必要があったようですね

1000でも大丈夫なものや そうでないものも

なので 900にリサイズして 大きく
表示できるように やり直しました

ポップアップ画像にも なったとおもいます

一度 確認ください

一つ前の記事も 拡大表示できるサイズに
し直しました

それ以前の記事は もう 面倒ですので・・・

これから この方法で
拡大表示できれば もとの記事画面の
写真を触って 写真だけが 表示されても
クローズボタンで それを消せるので
便利です

前は この画像の記事に戻るをクリックだったので
面倒でした

他のブロ友さんも この表示にしてくださると
大助かりですが・・・
Commented by PC-otasukeman at 2017-05-16 15:40
★ banban0501さん
拡大表示拝見してきました。
いろいろと挑戦して頂き嬉しいです。
免許更新の画像はクリックで拡大するので、細かい字まで見えるようになり、効果的ですね。
画像を大きくするとファイルサイズを小さく抑える加工が必要です。記事の最後の「大きな画像をアップロードするには」をご覧になり、再度トライしてください。
Commented by shizuo7f at 2017-05-27 17:16
お助けマンさん、こんにちは~!
近いうちにトライします、“画像を大きく魅せるテクニック”。
そのためには、先ず撮ります!
大きさに耐えうる素晴らしい写真を(^^♪。
Commented by PC-otasukeman at 2017-05-28 09:12
★ shizuo7f さん
コメントありがとうございます。
”素晴らしい写真” 期待しています。

名前
URL
削除用パスワード

<< ヒヨドリの孵化    早朝散歩 >>