MENU
さとしん
WordPressが好きで毎日触って勉強しています。ブロックエディターに出会ってから本当にWordPressが楽しくなりました。WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

SWELLのデスクトップ風とブラウザ風の装飾が便利!設定と使い方を紹介!

WordPressテーマ『SWELL』では、一部のブロックに対してデスクトップやブラウザに見立てた装飾をすることができます。

とても便利で、PCの画面キャプチャなどをオシャレに見せたいときに重宝します。

さとしん

ぜひ活用してみてください…!

目次

一部のブロックにオシャレで便利な装飾が2種類追加された!

今回紹介する装飾は、2021/2/19にリリースされたVer2.3.3で追加された機能です。

画像ブロック、動画ブロック、グループブロックに対して、以下の装飾ができるようになりました。

  • ブラウザ風
  • デスクトップ風

例えば以下のような装飾が出来ます。

ブラウザ風装飾

WebNote+
WebNote+

デスクトップ風装飾

WebNote+

画像や動画に対して、クリック操作だけでこの装飾ができてしまうのはとてもすごいです。

さとしん

便利でとてもテンションが上がりました…!笑

実際に、以下の記事ではデスクトップ風装飾を多用して記事を作ってみました。

>>参考になるブログデザインと作り方の解説記事をテーマごとにまとめました!

ブラウザ風とデスクトップ風装飾の使い方

デスクトップ風、ブラウザ風、それぞれの設定方法と使い方を説明していきます。

といっても、手順はとてもシンプルです。

STEP
画像、動画、グループブロックのどれかを配置する
ブラウザ風、デスクトップ風の装飾方法

基本的なブロックの配置の方法が分からない方は以下の記事を参考にしてください。

>>WordPressブロックエディター(Gutenberg)の使い方!時短テクニックも紹介!

STEP
サイドバーのスタイルから「ブラウザ風」、「デスクトップ風」をクリック
ブラウザ風、デスクトップ風の装飾方法-2

これだけでスタイルを適用することができます。

さとしん

とっても簡単に良い感じの装飾ができました…!

2点ほど、仕様について補足しておきます。

  1. グループブロックではコンテンツの高さ制限がある
  2. 画像、動画ブロックでは高さ指定が無い

グループブロックではコンテンツの高さ制限がある

グループブロックにスタイルを当てるときには、それぞれ以下の仕様になっています。

  • ブラウザ風の装飾は最大の高さが設定されている
  • デスクトップ風のスタイルは最小、最大の高さが設定されている

ブラウザ風とデスクトップ風どちらも最大の高さが設定されています。

これにより、グループブロックの縦の長さが一定値を超えると、スクロールして全体を表示できるようになります。

グループブロックが縦に長くなると画面内でスクロールでできます。

さとしん

ここまでグループブロックです…!

また、デスクトップ風の場合は、最小の高さも設定されています。

グループブロックの縦の長さが短い場合、デスクトップ画面の下部に余白ができてしまうので注意しましょう。

↓↓の部分が余白。

画像、動画ブロックでは高さ制限が無い

一方で、画像ブロックと動画ブロックに装飾をする場合は、高さの制限がありません。

その画像のサイズに合わせて、デスクトップやブラウザの大きさが変わります。

例えば、縦に短い画像に装飾を設定すると以下のようになります。

WebNote+のlogo画像

デスクトップ風の装飾でも、下部に余白ができず、画面が画像サイズぴったりになります。

さとしん

グループブロックとは違う挙動になるので覚えておきましょう…!

縦に長い画像をスクロールで表示する方法【小技】

上述のとおり、画像ブロックに装飾を当てる際、画像のサイズに合わせてデスクトップやブラウザの画面サイズが可変します。

なので、縦に長い画像を使用する場合、デスクトップやブラウザ自体が縦に長くなって表示されてしまいます。

例えば以下の様な形です。長いのでアコーディオンを開いてご確認ください。

これでも良いですが、僕は縦に長い画像をスクロールで表示したかったので、少し工夫して調整してみました。

ひと手間加えることで以下のように画像をスクロール表示することができます。

WebNote+

この形は、先程も紹介した以下の記事で実際に使用しています。

>>参考になるブログデザインと作り方の解説記事をテーマごとにまとめました!

作り方も紹介します。

STEP
装飾をしたい画像を配置
縦に長い画像をスクロールで表示する方法-1

画像の横幅が小さいと、うまく作れないこともあるので適宜調整してください。僕は1000pxくらいで作ることが多いです。

STEP
画像ブロックをグループ化
縦に長い画像をスクロールで表示する方法-2
STEP
グループブロックにブラウザ、デスクトップ風のスタイルを設定
縦に長い画像をスクロールで表示する方法-3

これで、とりあえず縦に長い画像をスクロール表示できるようになりました。

ただし、この状態だと画像の上下左右に余白が入ってしまいます。

以下画像の水色の外側が余白部分です。

縦に長い画像をスクロールで表示する方法-4
さとしん

個人的にこの余白が気になります…!

なので、ここからCSSを当てて余白を調整していきます。

CSSの使用は自己責任でお願いします。

さとしん

めちゃくちゃなCSSを書いていたらごめんなさい…!

グループブロックに適当にクラス名を設定して、以下のコードを記述します。

.設定したクラス名 .wp-block-group__inner-container {
    padding: 0px;
}

クラスの設定はグループブロックを選択した状態で、サイドバーの「高度な設定」→「追加CSSクラス」に入力すればOKです。

縦に長い画像をスクロールで表示する方法-5

これでグループブロックの内側の余白が無くなるので、デスクトップやブラウザの枠ピッタリに画像が合うようになります。

さとしん

ちょっとしたこだわりです…!

便利な機能を使って素敵なコンテンツを作ろう!

今回は、SWELLのVer 2.3.3で新たに追加された「ブラウザ風」と「デスクトップ風」の装飾機能についてご紹介しました。

画像や動画、グループブロックを配置した後にクリック操作だけでオシャレな装飾が設定できるのでとてもオススメです。

特にPC画面などのキャプチャを記事内に貼り付けるときにはとても適した装飾だと思います。

ぜひ、活用してみてください。

最後まで読んでいただきありがとうございました。


SWELL公式サイトはこちらからどうぞ…!

SWELL

SWELLのレビュー記事はこちら↓↓

>>SWELLレビュー!進化が止まらない高機能でオシャレなWordPressテーマ!

SWELLの基本的な設定や使い方はこちら↓↓

>>WordPressテーマ『SWELL』の使い方や設定で困ったときの情報まとめ!

SWELLでトップページをカスタマイズする方法↓↓

>>【SWELL】トップページをおしゃれなサイト型にカスタマイズする!

SWELLで作られたサイト集↓↓

>>WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる