【Swellカスタマイズ】PC・スマホの長いスクショ画像を横並びにし、フレーム内でスクロール表示する

制作したデモサイトのスクショ画像を、美しく分かりやすく表示させるカスタマイズ方法です。

PCやスマホのデザイン枠を使用した例もあると思いますが、高さと幅をだいたい合わせてスクロールさえできればいいんでは？という境地に至り、シンプルにしました。(私も自身のサイトで採用しています)

ページ全体をスクショする方法はブラウザによって異なります。
私の場合はGoogleChromeで「GoFullPage」という拡張機能を利用しています。
またスマホはiPhoneを使用していますが、任意のWebページをスクショすれば自動的にページ全体のスクショ画像も生成されます。スクショ後に画像を開き、「Screen」タブから「Full Page」に切り替えてください。(この辺は別途ググってください)

ポイント

・スマホでは縦並びですが、自動だと幅いっぱいになってPC版とのバランスが悪いので横幅を調整しました

・スクロールバーは気持ちおしゃれにしました ※対応していないブラウザもあります

・フレームに影をつけてなんとなく立体感を表現

・編集画面ではめっちゃ長い画像がそのまんま表示されるのでプラグインで対処

編集画面での設定

■Swellのリッチカラムブロックを使用します
カラム幅は、PCとタブレットが75%、スマホが25%です。

■各カラム内に画像ブロックを挿入
PC・スマホの各スクショ画像を選んで設定します。

■画像はグループ化しておきます
追加 CSS クラスにそれぞれセレクタ名を指定します。
PC：pc_ss_frame
スマホ：sp_ss_frame

プラグインで編集画面にもCSSを適用する

このままだと編集画面ではなっがいスクショ画像がそのまま表示されるので、プラグインで対応します。

①プラグイン「Simple Custom CSS and JS」をインストール

②ダッシュボード > カスタムCSS & JSを開く

③表示されている内容は消し、のちほど紹介するCSSをこちらにも追加してください

⑤右側メニューより表示対象の「管理画面」にチェック

⑥公開

追加CSSに下記をコピペ

カスタマイズ > 追加CSS に下記をコピペしてください。