【WordPress】記事内で画像をスクロールさせる方法
今回は、WordPressの記事において、「画像を本来の大きさで表示し、記事からはみ出す分をスクロールさせる」ための設定方法について、記載していきます。
前置き
WordPressのブロックエディタで画像を選択する場合、選択した画像の横幅が記事の横幅をオーバーしていると自動的に画面内に収まるように調整されます。
一般的な写真やイラストならば特に問題ありませんが、下記の表のような「画像内に書かれている文章が記事において重要度が高い画像」の場合は縮小調整されることで文字の視認性が悪くなってしまいますので、今回の方法を使う事を推奨します。
設定前
設定後
設定方法
設定方法を下記に説明します。
①
まず、通常通りブロックエディタから画像をアップロードします。
その際、画像サイズの項目を「フルサイズ」にしてください。
また、画像の横幅のサイズをメモしてください（後の設定で使用します）。
②
画像のブロックエディタの編集項目から、「縦3点リーダー」→「HTMLとして編集」をクリックします。
HTMLコードが表示されますので、こちらに変更を加えていきます。
③
1行目の
<figure class="wp-block-image size-full">
の部分を、
<figure style="width:0000px">
に変更します。
※「0000」の部分は、【手順①】でメモした横幅を入れてください。
2行目の
<class="wp-image-XXX">
の部分を削除します。
コードの最初に
<div style="overflow-x:scroll;">
を追加します。
コードの最後に
</div>
を追加します。
alt属性を設定する場合は、こちらのコード内に記述してください。
最終的に下記のようなコードになります。
プレビューを確認し、下記のように画像下部にスクロールバーが出れば成功です。
本来のサイズから少し小さくしたい場合は、
<figure style="width:0000px">
の部分の数値を小さくして調整してみてください。
以上となります。