- これで解決！ SWELLのデザインをおしゃれに｜背景をトリッキーに消す方法！
本記事を読めば、「SWELLのデザインをおしゃれに｜背景をトリッキーに消す方法！」がわかるようになります。
当サイトのトップページの見た目が「なんか面白味に欠ける」と感じたので、トップページを１カラムに変更しよう思って試してみたのですが、どうも見た目がしっくりこなくて結局中断してしまいました。それなら今の２カラムのままで何かいい方法はないかなということで、ちょっと試行錯誤してたら、面白い方法を見つけましたのでシェアしておきますね！
HTMLやCSSは一切使わず、デフォルトの機能だけでできますから、気になる方は試してくださいね！参考になれば幸いです！
スマホでは、表現がわかりにくいです！
あれっつ、背景が切れている・・・・・
チョイジジえっ、どういうこと？
ひろおじこれは、本当に簡単なんですよ・・・・・・
この記事では、SWELLをちょっとおしゃれに｜背景をトリッキーに消す方法！ついてお話をしていきます。
- SWELLの記事の見た目にアクセントを付けたい方
- SWELLのデザインを簡単に変化させたい方
- ブログ記事がマンネリ化してしまっている方
あっつ、戻った・・・・・
当ブログでは、初心者が快適なブログ運営をするために必要な『エックスサーバー』と『SWELL』の説明。そしてWordPress導入後、10記事書くまでに必要なWordPressとSWELLの設定、必要なプラグイン等の徹底解説をしております。ぜひご活用くださいませ！
SWELLのメインエリアの背景をトリッキーに消す方法！
今回の設定が可能である条件
今回は、SWELLで、メインエリアの背景をトリッキーに消す方法を解説していきますね！
ただ設定によっては、できない場合も考えられますから、最低限の条件だけ挙げておきます。
- 2カラム状態であること
- 「カスタマイズ」「サイト全体設定」「基本カラー」の「背景色」が白でないこと。
- 「カスタマイズ」「サイト全体設定」「基本デザイン」の「コンテンツの背景を白にする」がオンになっていること ＊下図
- ②と③の色が似すぎてないこと。
ひろおじあとは、大丈夫だと思いますがハッキリとはわかりません。
まずは、この状態を作ってみます！！！
この方法は、実に簡単ですよ！
基本の作り方
- 挿入したい箇所にカーソルをおきます。
- 「ブロック挿入ツールの切り替え」から、「フルワイド」を選択します。
- 背景色を自分のブログの背景色に合わせます。
- 自分の背景色とは、「カスタマイズ」「サイト全体設計」「基本カラー」「背景色」で設定されている色とあわせるということです。
- 背景色の不透明度を100にします。
- これだけで、先ほどの白背景が欠けた部分を作ることができます。
- もちろん、波型にすることもできます。
こんなこともできますよ・・・・・・
この方法でしたら、あっと言う間にできてしまうので、意外と使えるかもしれませんよね！
ちょっとした間をもたせたり、場面転換にもいいかもしれません。
でも、せっかくですから・・・・・・
もうちょっと創意工夫をしてみましょう。
では、この表現方法で作成してみましょう。
ただ、この表現方法には、画像が一つ必要になります。
上下のグラデーション部分は、画像を使います。
上下の画像は一緒のもので、画像をひっくり返してあるだけです。
上部部分
下部部分
「白」と「背景色」のグラデーションです。これは、イラストツールで作りました。
最初は、デザインツールCANVAで作成しようと思ったのですが、無料ではグラデーションができないようなので、 INKSCAPE を使っています。
もしイラストレーターを持ってなくて、ちょっとした図形などを書いたりするなら、このInkscapeがおすすめです。（無料）
画像は、900×100pxの大きさです。
上下部分の作り方
作り方のイメージですが、先ほど作成した「基本の作り方」の上下にまた「フルワイドブロック」を新しく足して、その足した部分にグラデーション画像を背景画像として設定するイメージです。
- 一番最初に説明した、「フルワイドブロック」の上部に、もうひとつ「フルワイド」を挿入します
- 挿入したフルワイドブロックに背景画像を設定します。
- 上が白、下が背景色の画像を設定します。
- オーバーレイの不透明度を0にします。
- これで上部は終了です。
- 一番下にフルワイドブロックを挿入します。
- この際注意ですが、中心になるフルワイドブロックの下にフルワイドブロックを設置しますが、白い部分の上に設定します。そうしないと隙間ができてしまいます。（実際に設置するとわかります）
以上で、設置ができました。
うまくできたでしょうか？
もし、このようにやってみたいけどグラデーションの画像がどうしてもできない場合、このブログサイトと同じ背景色で良いのであれば、上部部分、下部部分と書いたところにある、画像を右クリックで「名前を付けて画像を保存」でグラデーション画像をゲット。「カスタマイズ」「サイト全体設定」「基本カラー」の「背景色」を「#EFEDED」（このサイトの背景色です）に設定して試してください。
まとめ：SWELLのデザインをおしゃれに｜背景をトリッキーに消す方法！
今回は、「SWELLのデザインをおしゃれに｜背景をトリッキーに消す方法！」について解説しました。
先だって、トップページをもうちょっと見栄えよくしたいと思い、SWELLでいろいろ試してみたら、ちょっとしたひと手間で、トリッキーな見た目の表現ができたので、シェアしま～す。
なんとなくサイトの見栄えがマンネリ化してしまったり、ちょっとした差別化を図りたい時など、一工夫で見た目がかわりますのでとても便利！HTMLやCSSも使いませんから、誰にでもできま～す。
よかったら、試してみてくださいね！
ブログ運営者にはあまり馴染みのないLPですが、上手に使うことができればいつもと雰囲気の違うページを作ることが可能です。ぜひ参考にしてください
また「SWELLのデザインをおしゃれに｜背景をトリッキーに消す方法！」が終わりましたら、次は、「配色パターンや色使いで、ブログ訪問者の早期離脱防止」にチャレンジしてみましょう。
詳しいやり方は下記の記事で紹介しているので、あわせて読んでみてくださいね。
