【設定1分】ワードプレスの画像を拡大させる超簡単な方法【プラグインなし編】

悩む人のイラスト

記事内の画像を拡大させたいなぁ。
簡単な方法ってありますか?

その質問にお答えします

投稿者のイラスト

今回は、WordPressでの画像拡大です!

記事内の画像をクリックして、画像を拡大させる方法を解説します。

→『画像を拡大させたくない時』はコチラ

プラグインを使わない超簡単な方法です。

設定は「1分以内」で簡単にできます。

極力、プラグインを入れたくない方は、すぐに試してみて下さいね!

注意点

アップロードする『元画像』が小さいと拡大されません!

この方法は元画像を引き伸ばすのではなく、
『サムネイル・小・中』で表示した画像を、クリックして『フルサイズ』で表示させるものです。

『フルサイズ』の画像が「150×150ピクセル」などのサイズだと大きく表示されないので注意です!

【Easy FancyBox】プラグインでも元画像以上には拡大できません。

詳細は『【※】拡大されないときは?』を参照ください。

だったら元画像を大きな画像に加工したい!

投稿者のイラスト

そんな時はこちらの方法が簡単でおススメですよ。

小さい元画像を『きれいな大きい画像に加工したい!』ときはコチラ

画像をポップアップして表示させたいときは『【Easy FancyBox】プラグイン』がおすすめです。

当サイトでは現在、画像をポップアップで表示させる【Easy FancyBox】プラグインを導入しています。

【Easy FancyBox】が動かない時の対処方法はコチラ

この記事の信頼性

元SEが実際に試した内容を、重要なポイントを含めながら解説しています。

— プロフィール —

当サイトの運営環境

【1】画像を拡大させる方法

投稿者のイラスト

簡単なので早速やってみて下さいね!

【クラシックエディター編】

動画解説(音声なし)

手順

  1. 対象の画像を選択
  2. 設定変更
  3. プレビューで確認

(1.)対象の画像を選択

❶ 画像をクリックします。

記事投稿画面

❷【編集】をクリックします。

記事投稿画面

❸【画像詳細】の画面が表示されますので【リンク先】をクリックします。

記事投稿画面

(2.)表示設定の変更

❶【リンク先】をメディアファイルに設定します。

リンク先設定画面

【□リンクを新しいタブで開く】にチェックを入れると、ブラウザの別タブで開くようになります。

その場合のセキュリティー対策として、

【リンク rel 属性】に『noopener noreferrer』を追加して下さい。

※詳細はコチラのサイト『【HTML】target=”_blank”の脆弱性とは?』で説明されているのでご覧になってください。

❷【更新】をクリックします。

更新画面

(3.)プレビューで確認

❶【変更をプレビュー】をクリックし、プレビュー画面で画像をクリックして確認してみましょう!

記事投稿画面

❷ 1ページで全画面に表示されます。

プレビュー画面

小さい元画像を『簡単にきれいな大きい画像に加工したい』ときはコチラ!

【ブロックエディター編】

動画解説(音声なし)

手順

  1. 画像の挿入
  2. 画像の設定
  3. プレビュー
  4. 拡大の解除方法

(1.)画像の挿入

❶ 【+】で画像ブロックを追加します。

画像ブロック追加の画面

※ ない場合は【すべて表示】のブロック一覧から【画像】をクリックします。

画像ブロックの追加画面

❷【メデイアライブラリ】から画像をアップロード(または選択)します。

メディアの追加画面

❸【歯車】アイコンで設定を表示させます。

設定の表示

❹【画像サイズ】でサイズを設定します。

(この記事では【中】を設定しています)

画像サイズの選択画面

❺画像の配置を設定

(1)【配置を変更】をクリックして、画像の配置を設定します。

画像の配置画面

(2)配置を選択します。

画像の配置選択画面

(2.)画像拡大の設定

❶ 画像ブロックのメニューバーから【(ー)リンクの挿入】をクリックします。

リンクの挿入画面

❷【メディアファイル】をクリックします。

リンクの設定画面

(3.)プレビューで確認

❶【プレビュー】をクリックします。

プレビュー設定画面

❷【新しいタブでプレビュー】をしてみます。

プレビュー設定画面

❸ プレビュー画面

プレビュー画面

(※)画像を拡大させたくない時

画像拡大の解除

❶ 対象画像の【(ー)リンクを編集】をクリックします。

❷【×】をクリックするとリンクが削除(解除)されます。

小さい元画像を『簡単にきれいな大きい画像に加工したい』ときはコチラ!

【※】拡大されないときは?

拡大されない原因

アップロードした画像のフルサイズが最大表示です。

それ以上の大きさを表示出来ないんです。

投稿者のイラスト

正式には、
拡大しているのでは無く、フルサイズの画像を画面いっぱいに表示しているので、ワードプレスにアップロードした画像のサイズが最大です。

それ以上は大きく表示できないんですよ^^;

元画像のサイズ 記事に設定した画像サイズ クリックして拡大される画像サイズ
画像1 200×200 200×200 200×200
画像2 1000×1000 中 300×300 1000×1000

小さい元画像を大きくしたい時

元画像を高画質で大きくしたいときは、『waifu2x-multi』というサイトがおすすめです。

このサイトはAIを活用して小さい画像を高品質に拡大するサービスです。
『waifu2x-multi』(無料版)の使い方はコチラ

印刷を依頼する場合や、元画像の小さい画像を高画質で大きくしてWordPressにアップロード(※1)する時などに便利ですよ^^

(※1)
WordPressに画像をアップロードする時は『COMPRESS JPEG』や『TinyPNG』などで画像圧縮するのを忘れずに!
サイトの表示スピードに影響を与えないようにしましょう。

『waifu2x-multi』(無料版)の使い方

❶『waifu2x-multi』にアクセスします。

❷画面を下へスクロールさせると、下記の設定画面が出てくるので設定値を入力します。

❸『画像』へ変換したい画像ファイルをドラッグします。ドラッグすると変換が始まります。

❹変換が完了したら『画像のアイコン』をクリックしてダウンロードします。

【例】変換前と変換後の比較


合わせて読みたい

【最後に】

オンラインストレージ
ownCloud
って知っていますか?

あなたはブログの画像や動画などの大切なデータをどこにバックアップしていますか?

外付けハードディスク?

SDカード?

有料のクラウドサービス?

ロリポップのレンタルサーバーを使うと、Webサーバーだけでなく『データの保存や受け渡し』も出来るオンラインストレージが無料で使えるんですよ。

『ownCloud』というオンラインストレージを使って出来ること

  • 社内・外の複数のメンバーと共同作業
  • 学校の友達とレポートの受け渡し
  • 外出先でもスマホで閲覧、受け渡し
  • マルウェアEmotet対策
    感染の確認方法と対策

詳細は【Q.】ownCloudってなにが出来るの?をご覧ください。

レンタルサーバーは『ホームページやブログのWebサーバー』として使用するだけではもったいないんです。

なぜなら、契約したディスク容量のほとんどが余っているから

ロリポップサーバーであれば、その空いたディスク容量を無駄にせず『ownCloud』というオンラインストレージを簡単に構築して無料で使えますよ!

詳細な導入手順は下記で^^

オンラインストレージで
PCのデータを無料で二重化


ロリポップサーバー

ownCloudの導入方法


★よくあるご質問【FAQ】★

【Q.】ownCloudって何なの?

ロリポップサーバーの『ownCloud』は、リモートワークなど多人数でファイルの共有が出来ます。

更に、PC内の大切なデータのバックアップとしても機能しますので、リスク回避としてぜひ導入してみて下さい。

【LOLIPOP!の『ownCloud』をゼロから導入する手順】

【ownCloudの使い方】
『第三者とファイルの受け渡しをする方法』

【ownCloudの使い方】
『スマホアプリ(iPhone)のインストール方法』

お困り事はありませんか?

無料相談を承ります。

気軽にコチラから【お問い合わせ】ください。

★Webデザイナーで生きていく★

最新情報をチェックしよう!

大切なデータが突然消えた...( ̄O ̄;)

えっ...
二週間かけて作ったデータが消えた...
何が起こったのか理解出来ず、しばし呆然。
私の時間を返してくれ!
【時を巻き戻す術はなし】

そういう経験はありませんか?

ロリポップのownCloudは無料でデータ二重化が出来ます!
実際に導入し、運用しています。
→ 無料お問い合わせはコチラから

TKR WebWORKS仙台は「ホームページ制作、運営」その他をサポートします。
→ Webサイト制作・ブログ開設の無料相談はコチラから

CTR IMG