【WordPress】記事内で画像をスクロールさせる方法

今回は、WordPressの記事において、「画像を本来の大きさで表示し、記事からはみ出す分をスクロールさせる」ための設定方法について、記載していきます。

目的と例

WordPressのブロックエディタで画像を選択する場合、選択した画像の横幅が記事の横幅をオーバーしていると自動的に画面内に収まるように調整されます。

一般的な写真やイラストならば特に問題ありませんが、下記の表のような「画像内に書かれている文章が記事において重要度が高い画像」の場合は縮小調整されることで文字の視認性が悪くなってしまいますので、今回の方法を使う事を推奨します。

設定前

設定前の表

設定後

設定後の表

設定方法

【手順①】

まず、通常通りブロックエディタから画像をアップロードします。

その際、画像サイズの項目を「フルサイズ」にしてください。

また、画像の横幅のサイズをメモしてください(後の設定で使用します)。

通常アップロード画面

【手順②】

画像のブロックエディタの編集項目から、「縦3点リーダー」→「HTMLとして編集」をクリックします。

HTMLコードが表示されますので、こちらに変更を加えていきます。

「HTMLとして編集」を選択する画面

【手順③】

1行目の
<figure class="wp-block-image">
の部分を、
<figure style="width:0000px">
に変更します。
※「0000」の部分は、【手順①】でメモした横幅を入れてください。

2行目の
<class="wp-image-XXX">
の部分を削除します。

コードの最初に
<div style="overflow-x:scroll;">
を追加します。

コードの最後に
</div>
を追加します。

最終的に下記のようなコードになります。

スクロール設定後のコード

プレビューを確認し、下記のように画像下部にスクロールバーが出れば成功です。

スクロールバー設定後の画像

本来のサイズから少し小さくしたい場合は、
<figure style="width:0000px">
の部分の数値を小さくして調整してみてください。

以上となります。

スマホでもスクロールできるよ!