2017年 05月 12日 ( 1 )

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

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

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

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

 下の画像をクリックすると縁取りした大きな画像が現れます。
現れた画像をもう一度クリックすると元に戻ります。
まずはクリックして拡大表示の機能を体感してみてください。
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)