【SWELL】サイズを指定してスクロールできる画像を作る方法をわかりやすい手順で解説

SWELLのデフォルト機能で画像に装飾をつけることができます。

画像ブロックには以下のような装飾を選択できます。

SWELLではデフォルト機能でスクロールできる画像を作ることができます。

ブラウザ風やデスクトップ風に装飾して、カスタマイズするとかなりおしゃれに表示できます！

以下が例で当サイトのトップページです。（スクロールできます）

今回は、上記のような画像の作り方を詳しく紹介していきたいと思います。

縦長画像をスクロールで表示

上記のスクロール画像は縦長の画像を使っています。

スクリーンショットで画面全体を撮って、高さ指定しながらスクロール設定をします。

設定自体は簡単にできるので、こちらで紹介していきたいと思います。

CSSで余白を調整

気になる余白を調整していきます。

ここでは以下の記事を参考にさせていただきました。

参考記事｜SWELLのデスクトップ風とブラウザ風の装飾が便利！設定と使い方を紹介！

手順は以下になります。

以上で適用完了です。

投稿画面ではスペースが有るように表示されますが、プレビューなどで確認するとCSSが反映されて余白がなくなります。

ページ全体をスクショする方法

ページの素材はどこから持ってきたらいいの？となっている方もいると思います。

方法はたくさんありますが、筆者はGoogle Chromeの拡張機能を使っています。

無料で使えて簡単なのでとてもおすすめです！こちらで紹介したいと思います。

筆者が使っているのは有名な「Fire Shot」です。

上記のページにGoogle Chromeからアクセスして機能をインストールします。

するとクロームの拡張機能に以下のようなマークが出ます。

マークをクリックするとキャプチャの選択ができます。

ここで「ページ全体をキャプチャ」をクリックするとキャプチャが自動で始まります。

以下のような画面でキャプチャ終了です。

あとは好きな形式で保存します。

すごく簡単にできるので、ぜひ使ってみてください！

よくある質問

こちらでは気になる疑問や注意点を紹介していきます。

画像ブロックでブラウザ風やデスクトップ風はスクロールできない？

「画像ブロック」と「グループブロック」には明確な違いがあります。

グループブロックには高さ制限があります。画像だけでなく文章でも、ある一定の高さを超えるとスクロールできるようになります。

逆に画像ブロックには高さ制限がありません。画像のサイズによって装飾の大きさが変わるようになる仕様なので、画像ブロックではスクロールできません。

余白のCSSコードの記載は記事下の部分じゃないとダメなの？

記事下のCSS用コードはその記事にのみ、CSSを適用する設定です。

通常の「カスタマイズ」→「追加CSS」やテーマファイルの「Style.css」に記載しても問題ないですが、サイト全体に適用することになります。

使用していない記事でも適用されてしまうので、サイト全体が重くなります。

基本的に使うページにのみCSSを適用させたほうがいいと思いますが、全体に貼り付けても機能はします。

画像がスクロールにならずに縦長になったりする

グループブロックが選択できていません。

最初から手順通り進めてみてください。

画像ブロックでスタイルを設定すると、縦長の画像になります。

まとめ

今回はスクロールできる画像をSWELLで簡単に作る方法を紹介しました！

手順通りに進めれば誰でも簡単にSWELLで実装できるので、是非使ってみてください。

以上っ！！！