スポンサーリンク


 

ブログに画像をキレイにはみ出さずに貼る方法を紹介します!

画像をキレイに載せる為には?



私は今までブログにデータ(Google search console等)のスクリーンショットを頻繁に載せてきましたがとても気に入らない事がありました。いつも読んでる読者さんなら感じていたと思いますが画像がとても汚かったのです。この件に関してとても参考になる記事がありました。
(以下参照)

大きめの画像を記事に投稿した時に、画像が超劣化してしまう事の対策は、検索してもなかなか出てこないので、今回、ちょっとイロイロ試してみて、解決しましたので、ご報告します。

サムネイルの意味は、「画像や印刷物ページなどを表示する際に視認性を高めるために縮小させた見本のこと」、だそうです。
ですので、表示させた時に小さくなって、見本として表示されるんですね。
ここを全く知らなかったんです(笑)

引用元:ワードプレス 記事投稿の画像が劣化する時の対策




ポイントはサムネイル画像で掲載すればよいという事です。WordPressを利用している方で画像をキレイに載せたいという方は詳しく書かれているので上のリンク記事を参照して下さい。

この方は私と全く同じ問題を抱えていて自己解決されたんですね。ちなみにこのブログ主さんは「ブログサークル」にいらっしゃる「冴木さん」という方です。こちらのブログ「バイク乗り隆の副業アフィリエイトで月10万稼ぐメソッド」を書いています。今回の様にブロガーにとってとても役に立つ情報を書いていますので是非読んで下さい!


比較すると



では実際どれだけ違いがあるのか同じ画像(スクリーンショット)で比較してみますね!


今までのやり方の場合



20170623161234620.jpg



からの・・・


サムネイル画像の場合



20170623161253951.jpg



これだけ差があります!

一応言っておきますが私の端末のカメラは決して良い物ではありません。端末が良ければまだまだ画像はキレイになります!

FC2ブログのやり方を説明しますがその他ブログの方も参考になりそうな記事を下に貼っておきますね!

※またこの記事の下の方に画像がはみ出さない裏技も紹介してますので参考にして下さい!

ライブドアブログ:画像を大きく表示する(サムネイル設定) - ライブドアブログのヘルプ(PC 向け)

はてなブログ  :はてなブログの画像・写真のサイズを変える方法が便利【見たまま編集モード】

※他のブログの方は「ブログ名 サムネイル画像 サイズ変更」等で検索して下さい!




FC2ブログで画像をキレイに載せる方法



サムネイル画像のサイズ変更



手順

「管理画面」を開く
 ↓
「環境設定」をクリック
 ↓
「ブログの設定」をクリック



下の方にスクロールしていくと「投稿設定」というところがあります。
その中にある「サムネイル作成のサイズ」というところの数字に手を加えます。
(下画像参照)

20170622165858406.jpg

補足するとサイズは「999」が最大値です。横幅はテンプレートの種類によってベストのサイズを選んで下さい。私の場合は「600」でやっています。縦を「999」にしてるのは何故かと言うとある程度は縦長(スマホやタブレットの縦向きのフルスクリーン)の画像にも対応できる様にする為です。ちなみに仮に縦がこれ以下のサイズであった場合は勝手に縮小されます。もし縦を小さく設定してしまうと縦長の画像があった場合に私の例で言うと横幅が「600」より小さくなってしまう場合があります。

ちょっと分かりづらいと思うので具体例を出します。

■もし横600×縦600したとすると・・・

【横1,200×縦1,800の場合】
  ↓
 横400×縦600
  ↑この様に横が縮小されてしまう


■横600×縦999で設定しておくと・・・

【横1,200×縦1,800】
  ↓
 横600×縦900
  ↑この様に収まる



この様に縦長の画像にも対応できる訳です。ただしあまりにも極端な縦長の画像に対しては限界があります。
サイズを決めたらあとは「更新」をクリックして作業は終了です。


画像の載せ方


画像の載せ方は私があれこれ言うよりもマニュアルがありますのでこちら「記事に画像(写真)を載せる | マニュアル | FC2ブログヘルプ」を参照して下さい。

ポイントはアップロードするときは自分で縮小せずあとは「サムネイルで記事を書く」を選ぶだけです。
(下画像参照)

20170622185701445.jpg


これで画像はキレイに載せる事が出来ます。


最後に



それともう一つ画像を載せる上でとても重要な事があります。サイズについてです。

ブログはあらゆる端末から読まれるので画像を大きくするとスマホ等の画面が小さい端末からは何もしないと画面からはみ出してしまいます。

はみ出さない様にする為にはいろいろな方法がありますがこれをやっておけば間違いないという方法を紹介します。

CSS(スタイルシート)編集に以下のコードをコピペして下さい!

img { max-width : 95% ; height : auto;}


※↑のコードはFC2ブログ以外でもCSS編集が出来るブログなら使えます!

補足すると「95%」という数字は100%以下であれば何でも構いません。私の場合はギリギリにするのが嫌いなので95%にしてるだけです!

場所は分かりやすくCSS画面の1番下のところに「エンター」で1行空けてコピペしておくのが無難だと思います。
(下画像参照)

20170622195058726.jpg


これで画像がキレイにはみ出す事がなく貼れる様になります!


アクセスアップ・ブログ豆知識の目次はこちら


目次や最新記事はこちら(ホームへ)

関連記事

 スポンサーリンク


 
にほんブログ村 小遣いブログへ  

  



このエントリーをはてなブックマークに追加  

※当サイトはリンクフリーです!

コメント

こんばんわ、黒猫さま♬

画像をキレイに載せる方法、ありがとうございました、たいへん勉強になりましたよ^^

そういった使い方もあるものですねv-290

黒猫さまの記事には、いつも驚きでありましたよ。

ちなみに私は画像加工にフォトファニアのサイトで楽しんでおりましたね☆

がちょーさんへ

今まで画像が汚くて悩んでいましたが良い記事を読む事が出来て解決出来ました(^^)
あとは端末を変えればいいんですが欲しいのが無いんですよね(^_^;

「画像を綺麗に!」ですね!

えいしんです。

画像を綺麗に載せる!とは、今まで、考えてもみませんで
した!(;笑)。
自分のブログには、殆ど画像がありませんので、これにつ
いて、「気を使った事」が、ありませんでしたので、とて
も参考になりました!

それでは、お疲れさまでした。

えいしんさんへ

ブログを書いていてずっと気に入らないと思っていた事が画像の汚さだったんですよ(^_^;

これで気持ちがスッキリしました(^^)
あとは空いた時間に過去記事の画像も貼り替えていきます(^_^;
非公開コメント

プロフィール

黒猫

Author:黒猫
調べ事が大好きです(^^)

こちらはホーム用の「はてブ」です!

このエントリーをはてなブックマークに追加

応援お願いしますm(_ _)m

人気アプリランキング


スマホ・タブレットの方へ!

お勧めアプリを紹介!
全て無料!

(iOS・Android対応)
↓ランキング画面へ

「非ゲームアプリ10選」


「 ゲームアプリ10選」


「女性向けアプリ10選」


広告1

広告2

いらっしゃいませ!

オンラインカウンター

現在の閲覧者数:

検索フォーム

QRコード

QR