(更新日: 2022/12/26)

【Manablog Copy】挿入した画像が勝手にリサイズ表示される問題を解決

Theme WordPress

こんにちは、タカです。

今回は上記のような悩みを解決していきます。

Manablog Copyではクラシックエディター(Classic Editor)を推奨しています。
なので、ブロックエディターで記事を書いていたら不具合が多発してしまいます。

さて、そろそろ本題に進みます。

本記事の内容

こんな感じで進めていきます。ぜひ参考にしていってください。

挿入した画像がリサイズ表示されてしまう原因

そもそもブロックエディターで挿入した画像が勝手にリサイズ表示されてしまうのか。

考えられる原因は次のとおり。

• ブロックエディターのプログラムコードが少ない
• サイズの大きさ関係なくフルサイズに設計されている

上記2点。詳しく解説していきます。

①：ブロックエディターのプログラムコードが少ない

Manablog Copyはシンプルなテーマかつ、クラシックエディター推奨テーマです。
そもそもブロックエディターに関してノータッチという可能性が高いです。

ブロックエディターのプログラムコード

function remove_p_on_images($content){
    return preg_replace('/(\s*)()(\s*)<\/p>/iU', '\2', $content);
}
add_filter('the_content', 'remove_p_on_images');

※ビジュアルエディター＝ブロックエディター編集画面

たったこれだけ。
ビジュアルエディターに対応している”だけ”です。

②：サイズの大きさ関係なくフルサイズに設計されている

Manablog Copyでは、なぜか挿入される画像全てフルサイズに指定されています。

通常、画像を挿入したら「サムネイル、中、大、フルサイズ」から選択しサイズを変えることができます。

クラシックエディターの場合サイズを選択するとしっかりと反映されますが、ブロックエディターだとこんな感じ。

サムネイル

中

大

フルサイズ

• サムネイル…画質が悪い
• 中…画質が悪い
• 大…違和感なし
• フルサイズ…違和感なし

サムネイル・中とサイズが小さい画像は質が悪くなり、大・フルサイズは違和感ゼロといった感じ。

サムネイル画像参照

サムネイル画像は、あまり使うことないかと思いますが、画像を小さく表示させたい場合でも上記のようにリサイズ表示されてしまいます。

※フルサイズと同じ横幅

目次に戻る⬆︎

挿入した画像をリサイズ表示方法

さきほど紹介した原因を解決する方法は現状1つだけ。
「カスタムHTML」をつかうことです。

カスタムHTMLとは

Manablog Copyをブロックエディターで使用するには、このカスタムHTMLを活用するのが必須です。

さて、挿入した画像をレスポンシブ(元のサイズ)にするhtmlコードはこんな感じ。

<img src="ここに画像U" alt="ここに画像の説明" width="100%">

上記のコードをカスタムHTMLに挿入すれば、レスポンシブ表示が可能です。
その方法を解説していきます。

※画像に説明が不要ならば"ここに画像の説明"を消しても可

STEP1：カスタムHTMLの中にコードを挿入

さきほど紹介したhtmlコードをカスタムHTMLに挿入します。

• ①：「＋」をクリックしカスタムHTMLを選択
• ②：さきほど紹介したコードをコピー&ペースト

すると下記のような感じ。

STEP2：挿入したい画像を選択しURLをコピー

まずは記事内に表示させたい画像を選択し、URLをコピーします。
この場合、自分のサイトにアップロードした画像を選択してください。

【メディア→メディアライブラリ→画像を選択】すると下のような画面が表示されるので赤枠のURLをコピーします。

コピーしました。と表示されたらOKです。

③：”ここに画像のURL”にさきほどコピーしたURLを貼り付け

最後に”ここに画像のURL”を選択しさきほどコピーした画像URLを貼り付けてください。リサイズ表示が解消できたはず。

成功するとこんな感じ

目次に戻る⬆︎

まとめ：カスタムHTMLを駆使すれば対処可能

さて、今回はManablog Copyでブロックエディターを使用し画像を挿入したとき、リサイズ表示されてしまう原因を解決しました。

細かすぎるので、あまり気にならない人がほとんどだと思います。
僕はわりと気になってしまったので、この記事を書きました。

同じように思ってる方も少なからずいるはず。
そんな方はこの記事を参考にしてみてください。

今回はこの辺で〜。

人気記事【Manablog Copy レビュー】ブロックエディターで記事を書いてみた

人気記事【Manablog Copy】AddQuicktagで扱うデザインをブロックエディターで使う

人気記事【Manablog Copy】最新カスタマイズ方法まとめ【ブロックエディター向け】

Manablog Copy Manablog Copy カスタマイズ

• Tweet