![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
では3回に渡ってのフルワイドブロックの使い方です。
活用例3の作り方をご説明しますね。
フルワイドブロックの説明はこちら
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://shares-hp.com/wp-content/uploads/2022/11/11-1-300x158.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/11-1-300x158.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/11-1-300x158.jpg)
【便利!】フルワイドブロックの使い方 Part1
今回はフルワイドブロックの使い方です。トップページに幅いっぱいのコンテンツを作成したり、背景に画像を入れた見出しを作ったりとこれができるからSWELLを使っている...
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
ではまず今から作成するフルワイドブロックは以下の通りです。これを作っていきましょう。前半は一緒なので飛ばしてもらって構いません^^
サロンのご案内
フルワイドブロックの作成方法
![まずスタートは一緒ですね。四角の+マークをクリックします。](https://shares-hp.com/wp-content/uploads/2022/11/01-1024x356.jpg)
![まずスタートは一緒ですね。四角の+マークをクリックします。](https://shares-hp.com/wp-content/uploads/2022/11/01-1024x356.jpg)
![次は「フルワイド」を選択します。よく使う場合は一覧に表示されていますが、表示されていない場合は「すべて表示」をクリックしましょう。](https://shares-hp.com/wp-content/uploads/2022/11/02.jpg)
![次は「フルワイド」を選択します。よく使う場合は一覧に表示されていますが、表示されていない場合は「すべて表示」をクリックしましょう。](https://shares-hp.com/wp-content/uploads/2022/11/02.jpg)
表示されていない場合は「すべて表示」をクリックしましょう。
![](https://shares-hp.com/wp-content/uploads/2022/11/3.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/3.jpg)
![フルワイドブロックが挿入されます。](https://shares-hp.com/wp-content/uploads/2022/11/4-1024x606.jpg)
![フルワイドブロックが挿入されます。](https://shares-hp.com/wp-content/uploads/2022/11/4-1024x606.jpg)
![「見出し」と文字が入っている所に「サロンのご案内」と入れます。
※ここは皆さんが入れたいタイトルを入れてください。](https://shares-hp.com/wp-content/uploads/2022/11/21-1-1024x458.jpg)
![「見出し」と文字が入っている所に「サロンのご案内」と入れます。
※ここは皆さんが入れたいタイトルを入れてください。](https://shares-hp.com/wp-content/uploads/2022/11/21-1-1024x458.jpg)
※ここは皆さんが入れたいタイトルを入れてください。
![フルワイドコンテンツの右上辺りをクリックして、フルワイドコンテンツを選択します。
※選択できると左上辺りにフルワイドのツールバーが表示されます。](https://shares-hp.com/wp-content/uploads/2022/11/31-1024x459.jpg)
![フルワイドコンテンツの右上辺りをクリックして、フルワイドコンテンツを選択します。
※選択できると左上辺りにフルワイドのツールバーが表示されます。](https://shares-hp.com/wp-content/uploads/2022/11/31-1024x459.jpg)
※選択できると左上辺りにフルワイドのツールバーが表示されます。
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
うまく選択できる時とできない時があるので、場所を変えながら何度かクリックしてみてください。
![フルワイドブロックを選択後、右側のメニューを確認しましょう。
①「ブロック」が表示されているか確認しましょう。
②「背景画像の設定」から「メディアから選択」をクリック。
背景画像を設定します。](https://shares-hp.com/wp-content/uploads/2022/11/33.jpg)
![フルワイドブロックを選択後、右側のメニューを確認しましょう。
①「ブロック」が表示されているか確認しましょう。
②「背景画像の設定」から「メディアから選択」をクリック。
背景画像を設定します。](https://shares-hp.com/wp-content/uploads/2022/11/33.jpg)
①「ブロック」が表示されているか確認しましょう。
②「背景画像の設定」から「メディアから選択」をクリック。
背景画像を設定します。
![画像を選択して右下の「選択」をクリックします。](https://shares-hp.com/wp-content/uploads/2022/11/34-1024x655.jpg)
![画像を選択して右下の「選択」をクリックします。](https://shares-hp.com/wp-content/uploads/2022/11/34-1024x655.jpg)
![画像が挿入されました。](https://shares-hp.com/wp-content/uploads/2022/11/35-1024x610.jpg)
![画像が挿入されました。](https://shares-hp.com/wp-content/uploads/2022/11/35-1024x610.jpg)
「固定背景」にチェックを入れます。
![「固定背景」にチェックを入れます。](https://shares-hp.com/wp-content/uploads/2022/11/36.jpg)
![「固定背景」にチェックを入れます。](https://shares-hp.com/wp-content/uploads/2022/11/36.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
これで完成です。ホームページを上下にスクロールするとサロンの背景画像が動いて見えると思います。
サロンのご案内
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
前回ご説明しましたが、画像の上にカラー(色)を乗せることも可能ですので、前回の記事をご参考にチャレンジしてみてください。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://shares-hp.com/wp-content/uploads/2022/11/20-1-300x158.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/20-1-300x158.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/20-1-300x158.jpg)
【便利!】フルワイドブロックの使い方 Part2
前回に続きフルワイドブロックの使い方です。今回は前回ご紹介した活用例2の作り方をご説明しますね。 前回の投稿はこちら https://shares-hp.com/%e3%80%90%e4%be%bf%e...