Hyper MWSのブログ一覧

ブログに表示する画像をより良くする方法の紹介です。
「そんなの全然気にしてなーい。」人はスルー推奨です😆

みんカラ編集でアップした画像は劣化して見える場合があります。
特に細かい描写や色数か多かったりすると劣化は大きいです。
ファイル容量を確認すると、半分以下とか元画像よりかなり小さくなってたりします。
JPEGの圧縮率を大きくしてサーバーに保存してるようです。
つまり画像情報が少なくなっています。

それが嫌で、私はストレージサービス（googleフォト）にアップした画像を表示しています。
少し劣化しますが、みんカラより全然マシです。
その手順を説明する動画を作りました。
画質が気になってる人の参考になれば幸いです。

まずは、文章でざっとその手順を説明します。

①ブログに表示する画像を横800pxまたは1024pxにリサイズする
　私はコンテンツ領域を左に120pxオフセットさせてるので1024pxですが、
　ノーマルなら800pxが見やすいかもかもしれません。

　表示サイズはブログ内の書式でも指定できますが、
　アップロードの速さ（ブログ表示時のダウンロードの速さ）やストレージ容量を考え、
　前もってリサイズしてます。
　ちなみにgoogleフォトは、保存容量が15GBまでなら無料です。

②ブログ編集画面に画像を表示する書式を枚数分貼り付ける
　↓この書式です。
　＜img src='' border='0' alt='' /＞

　注）これは表示の都合で半角の<>を全角の＜＞に書き替えてます。
　※貼り付けのショートカットキーはCTRL + Vです。

③googleフォトに画像をアップロードする

④新規共有アルバムとして保存する

⑤編集で画像をブログに表示する順に並び替える
　面倒ですが、後の作業が楽になります。

⑥編集を完了し、最初の画像を表示する

➆右クリックメニューで画像アドレスをコピーする

⑧ ②の書式にこのアドレスを挿入する
　＜img src='ココにアドレスを入れる' border='0' alt='' /＞

　注）これは表示の都合で半角の<>を全角の＜＞に書き替えてます。


➈次の画像を表示し、➆と⑧を行う

⑩枚数分➈➆⑧を繰り返す
　縦が1024pxの画像の場合、画像アドレスにあるサイズは1024pxより小さい値になる場合があります。
　その場合は書き替えて下さい。（書き替え部分は動画を見れば分かります。）
　私は縦が1024pxだと見づらいので640×960pxに書き替えてます。



では、上記作業の実践動画です。（①は省略してます。）
フル画面で見ないと文字が読めないかも？
※音量注意





動画ではデスクトップの個人情報を隠すためにフルウィンドウにしてますが、
実際は作業しやすいウィンドウサイズにして複数並べてます。

画像のアドレスがコピーできれば、フォト蔵やflicker（flickerは使ったことないけど😅）でも同じです。
もっと効率的な作業方法はあるかもしれませんが、とりあえず参考になれば😊
分からないところはコメントして下さい。

ブログで画像の表示サイズを大きくすると、右サイドの罫線が目障りになります。
私は消してますが、スタイルシートを弄るので慎重にしないといけません。

2016年01月23日
スタイルシート講座　～ あなた好みのスタイルにしてみませんか？ ～

に書いてます。


Hyper