SWELLでは記事編集画面でブロック（またはグループ）に対して「PC（のみで）表示」、「スマホのみで表示」を指定することができます。

これを利用することで、レスポンシブ（PCならPCならではの、スマホならスマホならではの）デザインを実現できます。

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

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

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

PCとスマホで表示を分ける例

PCとスマホで表示を分ける場合、画面の大きさに合わせて表示を切り替えることができます。

たとえば、PCでは長い文字列を含めた大きめの画像を、スマホでは少ない文章での画像を表示すると、読者に対して親切な表現になりますね。

SWELLでは、以下のように分けて表示することが可能です。

上図のように、PCでは、「PC用の画像」を、スマホでは「スマホ用の画像（左右にカメさんが書かれている画像）」を表示することができ、アクセスしている人のデバイスによって自動で表示する画像を変えることができます。

PCでスマホで表示を変えるサンプル

こちらの画像は、PCとスマホで別々の画像を表示しています。お持ちのデバイス（PCやスマホ）で表示してみてください。

PCとスマホで表示を分ける方法

PCでのみ表示する方法

SWELLでは簡単に「PCでのみ表示する設定」をすることができます。

PCでのみ表示したい画像（テキスト文字やテーブルでも可能）を選択して、「デバイス制限」から「PC」を選択します。

スマホでのみ表示する方法

SWELLでは簡単に「PCでのみ表示する設定」をすることができます。

PCでのみ表示したい画像（テキスト文字やテーブルでも可能）を選択して、「デバイス制限」から「SP」を選択します。

まとめ

SWELLでは、「デバイス設定」からPC、SPを選ぶことで、PCのみ表示、スマホのみ表示を設定することができます。

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

あわせて読みたい

【デモサイト・サンプルあり】SWELL でおしゃれなサイトを作る方法！ SWELL はデザインセンス抜群のテーマです。ひとつ手を加えることでさらに一段上のおしゃれデザインのサイトを作れます。本記事ではSWELLで作ったサンプルとおしゃれサイトを作るポイントを解説します。

素敵なサイトを作ってくださいね！

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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

SWELLでは、多数のアイコン表示に対応しています。アイコンを使うことで、ワンポイントで分かりやすく記事内を装飾することができますね。

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

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

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

アイコンの使い方

SWELL アイコンを使い場合は、ショートコードにクラス名を記載します。

[icon class="アイコンクラス名"]

■ アイコンの使用例

本文中に記載する

ボタンの中に使える

電話番号ボタンに電話番号アイコンを使っています。

SWELL アイコン一覧

SWELL で使えるアイコンの一覧です。

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

まとめ：SWELL で使えるアイコンの使い方と一覧について解説

SWELL は標準で簡単に使えるアイコン文字を多数用意しています。使い勝手がよいので、ぜひ使いたいですね。

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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

ブログサイトはポイントでアニメーション演出を利用するとインパクトのあるデザインにできますね。

WordPressのテーマ「SWELL」でアニメーションを利用する場合は、アニメーション用のプラグインを用いるのが簡単です。プラグイン「Blocks Animation」を解説します。

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

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

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

「Blocks Animation」のインストール方法

「Blocks Animation」は正式には「Blocks Animation: CSS Animations for Gutenberg Blocks」と言います。

ブロックエディタ用のアニメーションを追加できるプラグインです。

WordPress の管理画面から「プラグイン」を選択し、「新規作成」画面にて、「Blocks Animation」名で検索することでプラグインが見つかりますので画面上の手順に沿ってインストールします。

「Blocks Animation」の使い方

アニメーションの設定は簡単です。

WordPress の記事投稿画面でアニメーションさせたいブロックを選択することで右側の設定項目に「アニメーション」が表示されます。

プルダウンから実際に動かしたいアニメーション方法を選択します。

あわせて「遅延」や「速度」を設定することができます。

アニメーションのサンプル

実際にアニメーションのサンプルを見てみましょう

背後

上から移動後に拡大

左から移動後に拡大

右から移動後に拡大

下から移動後に拡大

バウンス

バウンス

バウンスイン

下へバウンス

左へバウンス

右へバウンス

上へバウンス

フェード

フェードイン

下へフェードイン

下へ大きくフェードイン

左へフェードイン

左へ大きくフェードイン

右へフェードイン

右へ大きくフェードイン

上へフェードイン

左上からフェードイン

右上からフェードイン

左下からフェードイン

右下からフェードイン

裏返し

裏返す

横に裏返す

縦に裏返す

入れ替わり

中央支点で回転

左を支点に上から回転

右を支点に上から回転

左を支点に下から回転

右を支点に下から回転

スライド

上からスライドイン

左からスライドイン

右からスライドイン

下からスライドイン

ズーム

ズームイン

下へズームイン

左へズームイン

右へズームイン

上へズームイン

ローリング

ロールイン

差し込み

右から差し込む

左から差し込む

その他

フラッシュ

脈打つ

輪ゴム

横方向に揺らす

縦方向に揺らす

ブレ

揺れる

TaDa

ふらつき

ゼリー

鼓動

蝶番

Jack in the box

まとめ：SWELLでアニメーション演出を使う方法

SWELL でアニメーション演出を使う場合は、「Blocks Animation: CSS Animations for Gutenberg Blocks」プラグインを用いることで多様な演出が可能です。

SWELL を使って素敵なサイトをデザインしてくださいね。

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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