縦に長い画像や長文テキストをそのまま載せるといたずらに長い画面になってしまいます。
それを高さを固定したブロック内でスクロールさせながら見せるやり方をご紹介します。
たとえば下のような画像（縦2,000px）があります。これをそのまま表示させてみます。
かなりスクロールしないとここまで来ませんね。
今度は高さを500pxに固定した枠（ボックス）内で画像をスクロール表示させてみます。
ページ内はすっきりするし、サイト訪問者もやたら画面をいったりきたりする必要がなくなるというメリットがあります。
設定のやり方
| 使い勝手 | 設置レベル |
|---|---|
| そこそこ便利 | 作業工程・お手軽 |
やり方は簡単です。
まずはブロックエディターの画像ブロックで表示したい画像を指定します。
続けて＜グループ化＞します。
画像だけでなく1個のまとまった文書（テキスト）にも使えます。その場合はボックス内に収めたい段落ブロックを全選択してグループ化します。
続けて【高度な設定】→『追加CSSクラス』に「scroll-image」と打ち込みます。
（画像ブロックではなくグループブロックに対する【高度な設定】になります）
最後に、SWELLであれば《カスタムCSS＆JS》の『CSS用コード』内に以下の独自スタイルをコピペします。
.scroll-image {
height: 500px;
overflow-y: auto;
border: 1px solid #ccc;
}
1行目の「scroll-image」というクラス名は変更可能ですが、変更した場合は【高度な設定】→『追加CSSクラス』内の追加CSSクラス名も統一させる必要があります。
ボックスの高さは2行目で指定してある500pxです。ここの数値を増減することで高さを変えられます。
独自スタイルを追加する5つの方法
独自スタイルを追加するには複数のやり方があります。
- 1.テーマ付属のスタイル
-
ワードプレス管理画面の＜外観＞→＜テーマファイルエディター＞で表示される編集画面（style.css）に直接加筆するやり方です。
ただしこのやり方はテーマファイル本体への書き込みになるので危険度は”高”です。コーディングに詳しい方以外は触らない方が無難です。
またテーマがアップデートされると追加した独自スタイルは消去されてしまうため再度書き込む必要もあります。いずれにしてもこのやり方は非推奨です。ほかのやり方を考えましょう。
- 2.子テーマのスタイルシート
-
子テーマが用意されてるテーマなら子テーマ内のstyle.cssに書き込むというやり方もあります。こちらは前項と同じstyle.cssですが、テーマのアップデートによって内容が消えることはありません。
もしもテーマ付属のマニュアルを見てもわからないという方はやはり触らない方が無難です。また（独自）スタイルは一文字でも書き方を間違えるとレイアウト崩れが起きたり表示されないなどの弊害が起きる可能性もあるので注意は必要です。
なおそこに加筆したスタイルは全ページに適用されます。
- 3.追加CSS
-
テーマによっては管理画面の＜外観＞→＜カスタマイズ＞を開くと《追加CSS》という項目が表示されます。そこに追加した独自スタイルはテーマのアップデートでも消えることはありません。
また追加スタイルは前項と同じく全ページに適用されるので、広範囲で利用可能な独自スタイルを追記する際に使うと便利です。
- 4.プラグイン
-
《追加CSS》機能がない（or 見つからない）テーマや独自スタイルをわかりやすく管理したいという場合は「Simple Custom CSS and JS」や「Simple Custom CSS」などの無料プラグインを使うというやり方もあります。
Code snippetsという、PHP（function.php）やCSSを子テーマなしに簡単に追加や管理ができる超便利なプラグインもあります。ただし無料版はPHPとHTMLは使えますがスクリプトやCSSなどは有料版でないと使えないという制限があるので使いどころが難しいです。価格もそれなりに高いです。
- 5.カスタムCSS＆JS
-
テーマSWELLであれば《カスタムCSS＆JS》を使うやり方もあります。通常は編集画面下部にあるのでそこの『CSS用コード』内に書き込みます。
もしも表示されない場合は右上の《縦三点リーダー（オプション）》→『設定』→『一般』タブ→「カスタムCSS & JS」のチェックがOFFになってる可能性があるのでそこをONにします。
なお《カスタムCSS＆JS》に書き込んだ追加スタイルや追加スクリプトはそのページにのみ適用されるものでほかのページは適用外になります。
そのため汎用的に使う独自スタイルであれば2.の子テーマのstyle.cssか3.の《追加CSS》に書き込んだ方が効率的です。
反対に適用したいページが少ない場合は《カスタムCSS＆JS》に書き込むことで他ページへの余計な干渉を防ぐことができます。
［ワードプレス6.8.5＆SWELL2.16.0で動作検証済み］
コメント