WordPress無料テーマLION BLOGでギャラリーをスマホ表示したときの横幅はみ出しを解消する方法

こんにちは、小吉です。

前回の記事では、「 WordPress無料テーマLION BLOGでギャラリーのリストマークを非表示にする方法 」をご紹介しました。

今回はその関連記事となります。

WordPress無料テーマのLION BLOGを使用してギャラリーを作成して、スマートフォンで表示すると、以下のように、コンテンツ領域をはみ出してしまいました。（右側のグレーの部分は、コンテンツ領域の外となります。）

このはみ出しにより、スマートフォンでは少し右側にスワイプできてしまう気持ち悪い状態となってしまいます。

こちらの解消方法をご紹介します。

なお、本手順はLION BLOGの子テーマを使用していることを前提としています。子テーマを使用していない場合、テーマの最新化などで変更がリセットされてしまうことがある点はご了承ください。

style.css編集

WordPress管理画面より、外観->テーマの編集を選択します。

右側のテーマファイルのうち、スタイルシート（style.css）を選択します。

最後尾に以下を追記します。

.content ul li.blocks-gallery-item {
    padding: 10px 17px 0px 8px;
}

ファイルを更新を押します。

確認

プレビュー画面などで、画像ギャラリーを確認します。

このとき、ブラウザのキャッシュが残り反映されないことがあります。
その場合、ご使用のブラウザのキャッシュをクリアしてからご確認ください。
Chromeをご使用の場合、Shift + F5 でキャッシュをクリアして更新できます。