ここのところ、ちょこちょこブログをいじったりしていろいろと変えてました。
見た感じあまり変わらないので、何が変わったんだって言われてしまいそうですが。

今日はブログに貼った画像を綺麗に表示したくて、ずっと編集作業をしていました。
本当に1日がかり・・・。

しかも超初歩的なことをしただけ。
知らなかった自分がバカすぎた!

この記事も「WordPressで画像を綺麗に表示する(貼り付ける)方法」なんて大層なタイトルが付いていますが、書いてある内容はたぶん常識的なことです。

なので、期待しないで読んでください。

スポンサーリンク
[adsense]

WordPressに貼り付けた画像が粗かった

ということで本題に入っていきます。

実は、このブログはワードプレスでできています。

ワードプレスは画像をアップロードすると、元々のサイズのものだけでなく、いくつか他の大きさの画像も作ってくれます。

「フルサイズ」だけでなく、「サムネイル」、「中」、「大サイズ」みたいな感じに。

で、これまではその中の「中サイズ」がこのブログには1番合ってるんじゃないかと思っていたので、ずっとそのサイズで記事に添付していました。

ちょっと画像が粗いなーなんて思いつつも、画像をクリック(またはタップ)すれば大きく表示されるし、まあこれでいいかーなんて思っていました。

現在、このブログのブログ説明文に、「パズドラとか日々の事とか。画像はクリックまたはタップすると大きくなります。」と書いてあるのもそれが理由です。

しかし今日、自分のブログをスマホ(iPhone 5s)で見たところ・・・

 

 

粗い!!

画像が粗すぎる!!

 

 

まあ気づくの遅すぎだろって話ではあるんですが。
ブログ始めて1年半近く経ってるからね・・・。

↓どれぐらい粗かったかは、以下の画像をご覧ください。
image

わかっていただけたでしょうか?
上が修正前、下が修正後の画像になります。

上のエキドナより、下のエキドナの方が画像がはっきりしているんじゃないかと思います。

↓一応、もう1枚載せておきます。
image

上のゼウスが修正前、下のゼウスが修正後の画像になります。

上にも書いたように、クリックで画像が拡大表示されはするのですが、いちいちクリックするのは面倒ですし、何より粗い画像が表示されているのが気持ち的になんか嫌でした。

画像の添付サイズを変更することで綺麗に表示する(修正方法)

上にも書きましたが、これまでは「中サイズ」で画像を記事に添付していました。

これだとどうしても画像が粗くなってしまうようなので、画像を「中サイズ」から「フルサイズ」に変更して添付します。

そして、「フルサイズ」で添付してから、大きさを変更します。

フルサイズでの添付後の大きさの変更方法は、ビジュアルリッチエディタの場合とテキストエディタの場合でちょこっと違います。

ビジュアルリッチエディタの場合

WS000002

1.画像をクリックして左上に「鉛筆マーク」を出し、その鉛筆マークをクリックします。

WS000001

2.クリックして出てきた画面の「サイズ」をクリックしてメニューバーを出し、「カスタムサイズ」を選択。
※小さくて見えないという場合は、クリックして拡大表示でご覧ください。

WS000003

3.サイズを合わせたら右下にある「更新」をクリック。
画像に更新ボタンが写っていませんが、すぐにわかるはずです。

ビジュアルリッチエディタでのサイズの変更は以上です。

テキストエディタの場合

こっちの方がラクだと思うのでおすすめです。
※僕は普段テキストエディタで記事を書いているので、こっちに慣れちゃってます。

1.添付した画像のサイズをそのまま変更する

WS000004

テキストエディタで画像を貼った場合、上の様に表示されると思います。
これをそのまま自分の貼り付けたい大きさに変更します。

widthheightを自分の好きな大きさに変更します。

WS000005

テキストエディタでのサイズの変更は以上です。
1.って書いたのに、2.がないまま終わっちゃった笑

総括

これで画像を綺麗に表示することができる・・・と思います。

また、「中サイズ」だと画像が粗くなってしまっていたのは、フルサイズがそこそこ大きなものを無理やり小さくしているからなんじゃないかなと思ってます。

なので、もともとサイズが小さいものなら「中サイズ」で添付しても綺麗に表示されるかも?
調べていないのでわかりませんが・・・。

長くもなってしまったので、「WordPressで画像を綺麗に表示する(貼り付ける)方法」はこの辺で終わりにしようと思います。

ここまで読んでいただきまして、ありがとうございました。

※続き⇒WordPressの画像がスマホだと表示されなくなった話