![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
今回はフルワイドブロックの使い方です。トップページに幅いっぱいのコンテンツを作成したり、背景に画像を入れた見出しを作ったりとこれができるからSWELLを使っているってのも一つの理由です。
それぐらい良く使う機能です。
フルワイドブロックの使い方
一旦どんな事ができるのか確認してみましょう。
フルワイドブロックを使い、背景に色や画像を使うパターンの場合は「サイドバー」はない方がいいので、このページは「サイドバー」を非表示にしますね。
フルワイドブロックの活用例1
![](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)
デフォルトのまま活用したものがこちらです。
フルワイドブロックの中に2カラムのブロックを入れて、写真と見出し、説明文を入れればあっという間にコンテンツが完成です。
会社案内
![](https://shares-hp.com/wp-content/uploads/2022/11/young-programmer-working-software-javascript-computer-it-office-1024x683.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/young-programmer-working-software-javascript-computer-it-office-1024x683.jpg)
株式会社ホームページ作成会社
当社は◯◯◯◯でテキストテキスト。
テキストテキスト。テキストテキスト。テキストテキスト。テキストテキスト。テキストテキスト。テキストテキスト。テキストテキスト。テキストテキスト。
フルワイドブロックの活用例2
![](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)
こちらはフルワイドブロックに背景画像を入れた感じですね。
かっこいい見出しの完成です。
会社案内
フルワイドブロックの活用例3
![](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)
こちらは背景画像が動く感じになっています。画面をスクロールするとサロン全体が見えるようになっています^^
サロンのご案内
![](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)
3つ例を出しましたが、本当にいろいろ活用できるので、オススメのブロックです。
では次に利用方法を説明しますね。
フルワイドブロックの作成方法
![まずスタートは一緒ですね。四角の+マークをクリックします。](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/5.jpg)
![「見出し」と文字が入っている所に「会社案内」と入れます。
※ここは皆さんが入れたいタイトルを入れてください。](https://shares-hp.com/wp-content/uploads/2022/11/5.jpg)
※ここは皆さんが入れたいタイトルを入れてください。
![では次に2カラムブロックを追加しますので、黒い+をクリックします。](https://shares-hp.com/wp-content/uploads/2022/11/6-1024x604.jpg)
![では次に2カラムブロックを追加しますので、黒い+をクリックします。](https://shares-hp.com/wp-content/uploads/2022/11/6-1024x604.jpg)
![左のメニューから「カラム」をクリック。](https://shares-hp.com/wp-content/uploads/2022/11/7.jpg)
![左のメニューから「カラム」をクリック。](https://shares-hp.com/wp-content/uploads/2022/11/7.jpg)
「カラム」をどう分けるか選択します。今回は「50/50」を選択します。
![「カラム」をどう分けるか選択します。今回は「50/50」を選択します。](https://shares-hp.com/wp-content/uploads/2022/11/9-1024x304.jpg)
![「カラム」をどう分けるか選択します。今回は「50/50」を選択します。](https://shares-hp.com/wp-content/uploads/2022/11/9-1024x304.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/10.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/10.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/11.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/11.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/12.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/12.jpg)
画像をどこからアップロードするか選択します。
![画像をどこからアップロードするか選択します。](https://shares-hp.com/wp-content/uploads/2022/11/13.jpg)
![画像をどこからアップロードするか選択します。](https://shares-hp.com/wp-content/uploads/2022/11/13.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/14-1024x600.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/11/14-1024x600.jpg)
![ページに掲載したい画像を選択します。](https://shares-hp.com/wp-content/uploads/2022/11/15-1024x572.jpg)
![ページに掲載したい画像を選択します。](https://shares-hp.com/wp-content/uploads/2022/11/15-1024x572.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)
この時に右側の「代替テキスト」と「タイトル」部分に画像の説明文を入れておきましょう。詳しくはお伝えしませんが、SEO的にも入れる方が良いとされています。
![画像がアップロードされました。右下の「選択」をクリックします。](https://shares-hp.com/wp-content/uploads/2022/11/16-1024x609.jpg)
![画像がアップロードされました。右下の「選択」をクリックします。](https://shares-hp.com/wp-content/uploads/2022/11/16-1024x609.jpg)
![画像が入りましたね。](https://shares-hp.com/wp-content/uploads/2022/11/17.jpg)
![画像が入りましたね。](https://shares-hp.com/wp-content/uploads/2022/11/17.jpg)
![左のカラムが完成したので、今度は右のカラムを作っていきます。](https://shares-hp.com/wp-content/uploads/2022/11/19-1024x512.jpg)
![左のカラムが完成したので、今度は右のカラムを作っていきます。](https://shares-hp.com/wp-content/uploads/2022/11/19-1024x512.jpg)
![右のカラムにまずは「見出し」を入れたいので「見出し」をクリックします。
※見出しがない方は「すべて表示」をクリックしましょう。](https://shares-hp.com/wp-content/uploads/2022/11/20.jpg)
![右のカラムにまずは「見出し」を入れたいので「見出し」をクリックします。
※見出しがない方は「すべて表示」をクリックしましょう。](https://shares-hp.com/wp-content/uploads/2022/11/20.jpg)
※見出しがない方は「すべて表示」をクリックしましょう。
![見出しレベルを変えたいので、「h3」を今回は選択します。](https://shares-hp.com/wp-content/uploads/2022/11/21.jpg)
![見出しレベルを変えたいので、「h3」を今回は選択します。](https://shares-hp.com/wp-content/uploads/2022/11/21.jpg)
![「会社案内」と入力して、見出しの完成です。](https://shares-hp.com/wp-content/uploads/2022/11/22.jpg)
![「会社案内」と入力して、見出しの完成です。](https://shares-hp.com/wp-content/uploads/2022/11/22.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/10/1-15-300x158.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/1-15-300x158.jpg)
![最後に文章を入れて完成です。](https://shares-hp.com/wp-content/uploads/2022/11/23.jpg)
![最後に文章を入れて完成です。](https://shares-hp.com/wp-content/uploads/2022/11/23.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)
どうでしたか?フルワイドブロックは何度も言いますが、とても便利で活用機会が多いので、ぜひ使い慣れてください。
次回はフルワイドブロックの活用例2の作り方を解説します。