SWELLのフルワイドブロックが画面いっぱいに表示できない問題を解決

アイキャッチ画像
URLをコピーする
URLをコピーしました!
悩んでいる人

ブログのトップページを固定ページでカスタマイズしたいんだけどフルワイドブロックが画面いっぱいにならない・・・

かなやん

カスタマイザーの設定で一瞬で直りますよ!

SWELLで作っているブログを見ていると、トップページにサイドバーがなく画面いっぱいに表示されているサイト型のオシャレなブログをたくさん見かけます。

自分もやってみようと思い固定ページを開いてフルワイドブロックを使ったんですが問題が発生しました。

「画面いっぱいに表示できてない。どう見ても記事の幅だ・・・」

フルワイドブロックが画面いっぱいになっていない
フルワイドブロックを使っても左右に余白がある

上の画像のようにフルワイドブロックを使っても左右に余白ができてしまっています。

でもこの問題、原因が分かってしまえば一瞬で直りました。

タップできる目次

フルワイドブロックが画面いっぱいにならない原因と対処法

見出し画像

フルワイドブロックが画面いっぱいにならない原因。答えはSWELL公式サイトに書かれています。

フルワイドブロックが画面いっぱいにならない原因は「コンテンツの独立」

SWELL公式サイトのフルワイドブロックの使い方ページには次のように書かれています。

このブロックは、基本的にワンカラムデザイン(サイドバー非表示)時の使用を想定しています。

そのため、サイドバーがあるページでは記事コンテンツの範囲内に収まる形で表示されます。

また、サイトのデザイン設定にて「コンテンツの独立設定」がオンになっている場合、ワンカラムデザインでもコンテンツ幅に収まるようになっています。

【SWELL専用ブロック】フルワイドブロックの使い方 -SWELL公式サイト-

「なるほど。コンテンツの独立をオフにすればいいんだな。」

と安心したのも束の間、リンク先の「サイトのデザイン設定」を見ても今度は「コンテンツの独立設定」がどこにあるのか分からず。

私自身もここで沼にハマったかと思ったんですが、ググりまくりながらゴチャゴチャ触っていたら解決できました。

フルワイドブロックを画面いっぱいにする方法

SWELLのフルワイドブロックを画面いっぱいに表示する方法をステップブロックで解説します。

カスタマイザーからたった4クリック。本当にすぐできます。

STEP
カスタマイザーの『サイト全体設定』を選択する
サイト全体設定
カスタマイザーは管理画面から「外観」→「カスタマイズ」
STEP
『基本デザイン』を選択する
基本デザイン
「基本デザイン」ではサイトの見た目を調整できる
STEP
『コンテンツの背景を白にする』をオフにする
「コンテンツの背景を白にする」をオフ
オフにすると左右の白い部分がなくなる
STEP
画面いっぱいになったのを確認して『公開』をクリックする
確認して公開
「公開」をクリックしないと変更が保存されないので注意

以上の4クリックでフルワイドブロックの左右の余白がなくなり画面いっぱいに表示できるようになります。見比べると全然違いますね。

コンテンツの背景が白
画面いっぱいに表示できていない場合
コンテンツの背景が白でない
画面いっぱいに表示できている場合

SWELLのフルワイドブロックを使ったトップページ作成手順

見出し画像

ここからは私がSWELLのフルワイドブロックでトップページを作成した手順を解説します。

フルワイドブロックを使ったトップページを作るには二つの固定ページを用意します。

STEP
固定ページで記事一覧ページを作る

まずは固定ページで記事一覧ページを新規作成します。

本文は書かずに記事タイトルとURLスラッグだけを入力して公開すればOK。

記事一覧ページを作成
URLは分かりやすくpostなどにしておこう

え?本文いらないの?

と思うかもですが、最終的に次のような投稿記事の一覧ページになるので心配は無用です。

実際の記事一覧ページ
本文がないと記事一覧が表示される

サイドバーや広告、目次は非表示にしておきます。

STEP
固定ページでトップページを作る

再び固定ページで、今度はトップページを新規作成します。

タイトルやURLは関係なくなる(表示されることはない)のでなんでもOKですが、わかりやすいものにしておきましょう。

トップページの見た目はこの固定ページを編集して変更していくことになります。

トップページを作成
URLはtopやhomeなどにしておこう

使うのはもちろんフルワイドブロックです。

フルワイドブロックを使う
SWELLブロックのフルワイドを使う

見出しを入れ、投稿リストなどを使ってフルワイドブロックを完成させたらコンテンツの幅を調整。このとき必ずプレビューで確認するようにしましょう。

個人的には2列のときは記事幅、3列のときはサイト幅がしっくりきます。

コンテンツ幅を調整
コンテンツ幅は必ずプレビューで確認しよう

新着記事や人気記事のMOREボタンを設置する場合、リンク先を固定ページで作った記事一覧ページにしておきましょう。

記事一覧のリンク先を固定ページにする
ここで先に作った記事一覧ページの出番がくる

フルワイドブロックの作成を繰り返してトップページのレイアウトを完成させたら公開します。

投稿リストだけでなく2カラムにしたりSWELLボタンを使ったりすると、よりオシャレなサイト型トップページにすることが可能です。

STEP
「設定」→「表示設定」でホームページを固定ページにする

「記事一覧ページ」と「トップページ」の二つの固定ページを公開したらホームページの設定です。

まず管理画面の『設定』から『表示設定』に進みます。

設定ページに移動
ホームページの変更はカスタマイザーでもできるが管理画面のほうが早い

上部に『ホームページの表示』というところがあるので「固定ページ」にチェックを入れて、ホームページと投稿ページを固定ページに変更します。

『変更を保存』のクリックを忘れないようにしましょう。

トップページを固定ページに変更
プルダウンから作成した固定ページのタイトルを選択するだけ
STEP
カスタマイザーで装飾する

以上のSTEP3まででもトップページは完成できるんですが、仕上げにカスタマイザーで少しだけ装飾しておきます。

私はとりあえずメインビジュアルだけ設定しましたが記事スライダーやお知らせバーなども設置できます。

メインビジュアルを設定
カスタマイザーの「トップページ」で最後の仕上げをしておこう

SWELLのフルワイドブロックでオシャレなトップページを作ろう

見出し画像

SWELLは有料テーマの中でも少し高額なテーマですが、オリジナル機能も盛りだくさんです。

カスタマイズも信じられないくらい簡単。ウィジェットエリアも豊富にあって、CSSなど難しい知識は不要です。

SWELLブログパーツでトップページをカスタマイズ【固定ページは使いません】

日本語が入力できてマウスがクリックできればOK。誰ともかぶらないあなたのサイトだけのトップページやサイドバーを作れるのがSWELLです。

カスタマイザーだけで作っておくのはもったいない。まだトップページを作ってないならぜひチャレンジしてみてください。

アイキャッチ画像

この記事が気に入ったら
フォローしてね!

URLをコピーする
URLをコピーしました!
タップできる目次
閉じる