SWELLで作っているブログを見ていると、トップページにサイドバーがなく画面いっぱいに表示されているサイト型のオシャレなブログをたくさん見かけます。
自分もやってみようと思い固定ページを開いてフルワイドブロックを使ったんですが問題が発生しました。
「画面いっぱいに表示できてない。どう見ても記事の幅だ・・・」
上の画像のようにフルワイドブロックを使っても左右に余白ができてしまっています。
でもこの問題、原因が分かってしまえば一瞬で直りました。
フルワイドブロックが画面いっぱいにならない原因と対処法
フルワイドブロックが画面いっぱいにならない原因。答えはSWELL公式サイトに書かれています。
フルワイドブロックが画面いっぱいにならない原因は「コンテンツの独立」
SWELL公式サイトのフルワイドブロックの使い方ページには次のように書かれています。
このブロックは、基本的にワンカラムデザイン（サイドバー非表示）時の使用を想定しています。
そのため、サイドバーがあるページでは記事コンテンツの範囲内に収まる形で表示されます。
また、サイトのデザイン設定にて「コンテンツの独立設定」がオンになっている場合、ワンカラムデザインでもコンテンツ幅に収まるようになっています。
【SWELL専用ブロック】フルワイドブロックの使い方 -SWELL公式サイト-
「なるほど。コンテンツの独立をオフにすればいいんだな。」
と安心したのも束の間、リンク先の「サイトのデザイン設定」を見ても今度は「コンテンツの独立設定」がどこにあるのか分からず。
私自身もここで沼にハマったかと思ったんですが、ググりまくりながらゴチャゴチャ触っていたら解決できました。
フルワイドブロックを画面いっぱいにする方法
SWELLのフルワイドブロックを画面いっぱいに表示する方法をステップブロックで解説します。
カスタマイザーからたった4クリック。
本当にすぐできます。
カスタマイザーの『サイト全体設定』を選択する
『基本デザイン』を選択する
『コンテンツの背景を白にする』をオフにする
画面いっぱいになったのを確認して『公開』をクリックする
以上の4クリックでフルワイドブロックの左右の余白がなくなり画面いっぱいに表示できるようになります。
見比べると全然違いますね。
SWELLのフルワイドブロックを使ったトップページ作成手順
ここからは私がSWELLのフルワイドブロックでトップページを作成した手順を解説します。
フルワイドブロックを使ったトップページを作るには二つの固定ページを用意します。
固定ページで記事一覧ページを作る
まずは固定ページで記事一覧ページを新規作成します。
本文は書かずに記事タイトルとURLスラッグだけを入力して公開すればOK。
え？本文いらないの？
と思うかもしれないですが、最終的に次のような投稿記事の一覧ページになるので心配は無用です。
サイドバーや広告、目次は非表示にしておきます。
固定ページでトップページを作る
再び固定ページで、今度はトップページを新規作成します。
タイトルやURLは関係なくなる(表示されることはない)のでなんでもOKですが、わかりやすいものにしておきましょう。
使うのはもちろんフルワイドブロックです。
下の画像ではわざわざ検索していますが段落ブロックで「/フルワイド」または「/fullwide」と打ち込めば呼び出せます。
見出しを入れ、投稿リストなどを使ってフルワイドブロックを完成させたらコンテンツの幅を調整。
このとき必ずプレビューで確認するようにしましょう。
新着記事や人気記事のMOREボタンを設置する場合、リンク先を固定ページで作った記事一覧ページにしておきましょう。
フルワイドブロックの作成を繰り返してトップページのレイアウトを完成させたら公開します。
投稿リストだけでなく2カラムにしたりSWELLボタンを使ったりすると、よりオシャレなサイト型トップページにすることが可能です。
「設定」→「表示設定」でホームページを固定ページにする
「記事一覧ページ」と「トップページ」の二つの固定ページを公開したらホームページの設定です。
まず管理画面の『設定』から『表示設定』に進みます。
上部に『ホームページの表示』というところがあるので「固定ページ」にチェックを入れて、ホームページと投稿ページを固定ページに変更します。
この設定をやらないと記事一覧ページが表示されない（本文がないページが表示されてしまう）ので忘れないようにしましょう。
カスタマイザーで装飾する
以上のSTEP3まででもトップページは完成できるんですが、仕上げにカスタマイザーで少しだけ装飾しておきます。
私はとりあえずメインビジュアルだけ設定しましたが記事スライダーやお知らせバーなども設置できます。
SWELLのフルワイドブロックでオシャレなトップページを作ろう
SWELLは有料テーマの中でも少し高額なテーマですが、オリジナル機能も盛りだくさんです。
カスタマイズも信じられないくらい簡単。ウィジェットエリアも豊富にあって、CSSなど難しい知識は不要です。
日本語が入力できてマウスがクリックできればOK。
誰ともかぶらないあなたのサイトだけのトップページやサイドバーを作れるのがSWELLの魅力です。
カスタマイザーだけで作っておくのはもったいない。
まだトップページを作ってないならぜひチャレンジしてみてください。
