画像・動画関連 – Enjoy SWELL

【SWELL】記事内やトップページに動画を背景にして埋め込む、コンテンツの表示エリアを作る方法

Boon ☆ — Sun, 12 May 2024 11:00:00 +0000

広告：ページ内にてアフィリエイト広告を利用しています。

記事の中やトップページの一部分に、動画を背景にした表現をしたい場合があります。たとえば以下のような感じです。

動画を背景にしたサンプル

ここにコンテンツを表示する

動画を背景にしているので、上に表示しているテキストや画像の下で動画が動いています。

ポイント

本記事では、

SWELLで記事内に動画を背景にして表示する方法を

解説します。

素敵なページを作っていきましょう！

本記事は、2024/5/12時点（バージョン: 2.10.0）のSWELLを対象としています。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法はこちらをクリックしてください／

動画を背景にする方法

Point.

動画を背景にする
方法

動画を背景にするためには、WordPress 標準の「カバー」ブロックを利用します。

カバーブロックを配置する
「アップロード」または「メディアライブラリ」から動画（mp4など）を設定する

背景とする動画を設定します。

必要に応じて「全幅」にするなど表示方法を調整する

必要に応じてコンテンツ（テキストや画像）などを設定します。画像は背景透過した png 画像にすると良いでしょう。

完成です。

ここにコンテンツを表示する

まとめ：動画を背景にして、埋め込む方法

記事やトップページ内に動画を背景に埋め込んでコンテンツなどを配置する方法を解説しました

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

【SWELL】画像を横並びで表示する方法と、マウスオーバーでちょっと大きくする方法

Boon ☆ — Sun, 20 Aug 2023 11:00:00 +0000

広告：ページ内にてアフィリエイト広告を利用しています。

画像を２～４個程度、横に並べて表示したいときってありますね。見やすくなりますし、横に並べることで読者に一瞬で見て比べてもらえます。

また、クリックするメニュー画像を並べる場合に、マウスオーバーでちょっと画像を大きくすると良い演出になります。

ポイント

本記事では、

画像を横並びで表示する方法と、マウスオーバーでちょっと大きくする方法

解説します。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法はこちらをクリックしてください／

画像を横に並べて表示するサンプル

実際に画像を横に並べて表示するサンプルです。

画像を横並びしたサンプル

モバイルでは縦に並びます。画像をシンプルに横に並べていて、特にリンクは貼っていません。

画像を横並びにして、マウスオーバーでちょっと大きくするサンプル

モバイルでは縦に並びます。画像マウスオーバーで画像がちょっと大きくなります。

※モバイルの場合は、クリックと同時にページが移動するので見えないです。

クリックすることで、本サイトのトップページを表示します。

画像を横に並べる方法

画像やコンテンツを横に並べる場合はカラムブロックを使います。

（SWELL の場合、リッチカラムブロックでも同じことができます）

「カラム」ブロックを配置する

カラムを増やす場合は、カラムとカラムの間の「＋」をクリックする

画像や、必要に応じてテキストを配置する

必要に応じて画像にリンクを貼る

完成です

マウスオーバーでちょっと大きくする方法

マウスオーバー時に画像を少し大きくする場合は、画像にCSSで実現します。

画像を選択して、クラス名（任意）を設定する

サンプルではクラス名に任意の文字列（例：sample-expanding-image）を設定しています。

CSSを設定するために、WordPress の管理画面から「外観」→「カスタマイズ」→「追加 CSS」を選択します。

CSS のコードを設定する

設定するコードは以下です。

.sample-expanding-image img{
   transition: transform .3s ease;
}

.sample-expanding-image:hover img {
    transform: scale(1.1);
}

完成です

まとめ：画像を横並びで表示する方法と、マウスオーバーでちょっと大きくする方法

画像を２～４個程度、横に並べて表示したいときってありますね。見やすくなりますし、横に並べることで読者に一瞬で見て比べてもらえます。

本記事では、画像を横並びで表示する方法と、マウスオーバーでちょっと大きくする方法を解説しました。

ぜひ、すてきなサイトを作ってくださいね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法はこちらをクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

【SWELL】画像と文字を重ねるデザインの方法（ブロークングリッド）

Boon ☆ — Mon, 12 Jun 2023 11:00:00 +0000

広告：ページ内にてアフィリエイト広告を利用しています。

「メディアとテキスト」ブロック、および「フルワイド」ブロックを使って画像と文字を重ねてかっこよく魅せる方法です。

サイトをおしゃれにするとともに、シックでカッコいい表現になりますね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法はこちらをクリックしてください／

かっこいい画像と文字の重ね方（サンプル）

実際に本記事上で作成したサンプルです。アニメーションプラグインを用いて動きを付けています。

うまい鮨を食べる
寿司は美しさと美味さを兼ね備えた食の美！美味しい鮨は口に含んだ瞬間に人を幸せにしますね。

単純に画像と文字を横に並べるのではなく、一部を重ね合わせることにより、おシャレ度がとても増しますね。

画像と文字の重ね方（基本）

「メディアとテキスト」ブロックの「ブロークングリッド」スタイルを使うことで重ね合わせます。

STEP

「メディアとテキスト」ブロックを使う

「メディアとテキスト」ブロックを配置します。

左側に画像を張り付ける
右側に任意のテキストを入力する

STEP

「ブロークングリッド」スタイルを指定する

「メディアとテキスト」ブロックの設定で「スタイル」に「ブロークングリッド」を指定します。

STEP

テキストエリアの背景色を変える

写真とテキストが重なって若干読みにくくなりますので、背景色を設定して文字を見やすくします。

段落（テキスト部分）を選択して、背景色を指定します。

STEP

完成です

画像とテキストを重ねることができました。

完成です。

フルワイドブロックと一緒に使って、より「かっこよく」する

「メディアとテキスト」ブロックの「ブロークングリッド」スタイルは、フルワイドブロックと一緒に使うことでよりオシャレにかっこよい表現が可能です。

一緒に使ったサンプル

サンプルです。（アニメーションはプラグインを使っています）

口の中でほどける旨さ
寿司をほおばれば舞うようにほどけて口の中一杯に広がる美味さ。お寿司はまさに美食界の芸術の一品ですね。

作り方（使い方）を解説します。

STEP

「フルワイド」ブロックを配置する

「フルワイドブロック」を配置します。

（以下は本サンプルの設定例です）

背景画像を設定する
「上下のPADDING量（PC）」に 40 を指定する
「オーバーレイカラー」を黒（#000000）にする
「固定背景」を ON にする
初期状態で中央にある「見出し」ブロックは消す

STEP

「メディアとテキスト」ブロックを使う

フルワイドブロックの中に、「メディアとテキスト」ブロックを配置します。

左側に画像を張り付ける
右側に任意のテキストを入力する

STEP

「ブロークングリッド」スタイルを指定する

「メディアとテキスト」ブロックの設定で「スタイル」に「ブロークングリッド」を指定します。

STEP

テキストエリアの背景色を変える

写真とテキストが重なって若干読みにくくなりますので、背景色を設定して文字を見やすくします。

段落（テキスト部分）を選択します。

（以下は本サンプルの設定例です）

背景色に濃い青（ #002060 ）を指定する
「ボーダー設定」で 01 を指定する

STEP

アニメーションを設定する

アニメーションプラグインを利用して、テキスト箇所にアニメーションを設定する。

「Blocks Animation」プラグインを設定して有効化しておきます。

アニメーション

本サンプルでは、「Blocks Animation」プラグインを利用してアニメーションを設定しています。

アニメーションについて詳しくはこちらをご覧ください。

アニメーション演出を利用する方法

アニメーションにて「横に裏返す」を設定します。

STEP

完成です

フルワイドブロックと一緒に使っサンプルができました。

完成です。

画像とテキストの左右の位置を入れ替える

画像とテキストの左右の位置を取り換えることができます。

「メディアとテキスト」ブロックの左右ボタンで、画像とテキストの場所を入れ替えることが可能です。

まとめ：画像と文字を重ねるデザインの方法（ブロークングリッド）

「メディアとテキスト」ブロック、および「フルワイド」ブロックを使って画像と文字を重ねてかっこよく魅せる方法です。

「メディアとテキスト」ブロックの「ブロークングリッド」スタイルを使う
「フルワイド」ブロックと組み合わせることでさらにオシャレにできる
画像とテキストの左右を入れ替えることができる

SWELLを使って素敵なサイトを作ってくださいね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法はこちらをクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記