[WordPress] SWELL:ワンカラムのお洒落なサイトを作る基本手順

技術メモ

人気WPテーマの「SWELL」は、ブログだけでなくサイトとしても運用できるのが魅力です。ちょっとの段取りでワンカラムでビジュアル重視のお洒落なデザインが比較的簡単につくれます。ただ、SWELLでサイト構築するにはブログとは若干異なる設定が必要なので、そのへんも含めてメモ。

1. 事前準備:フロント用の固定ページをつくる

サイト構築の準備で先にやることは、トップページに相当するフロント用の固定ページを準備しておくことです。また投稿ページ群(ブログ)を表示するための固定ページも作成しておきます。

1-1. 固定ページで空の「トップページ」を作成する。

・タイトルのみ「トップページ」と入力する。(用途が識別できれば何でもよい)
・スラッグは「toppage」とかにしておく。(英数字)
・本文の内容からっぽのままで「公開」する。

1-2. 固定ページで空の「ブログ一覧ページ」を作成する。

・タイトルのみ「ブログ一覧ページ」と入力する。(用途が識別できれば何でもよい)
・スラッグは「bloglist」とかにしておく。(英数字)
・本文の内容からっぽのままで「公開」する

2.WordPress側の表示設定を変更する

上記で作成した2つの固定ページを、WP側の表示設定で読み込ませます。するとデフォルトでブログ型表示になっていたSWELLが、サイト型表示に切り替わります。

2-1. WP側の表示設定に固定ページを読み込ませる

・「外観>表示設定」を開きます。「ホームページの表示」を見ます。
・デフォルトでは「最新の投稿」が選択されていますが、「固定ページ」のほうをチェックします。
・その下の「ホームページ:」に1-1で作成した「トップページ」を指定します。
・その下の「投稿ページ:」に1-2で作成した「ブログ一覧ページ」を指定します。
・「変更を保存」して完了。

設定>表示設定

3.サイトのレイアウトをワンカラムに変更する

3-1.トップページの初期状態

上記の設定をした直後は、トップページの見た目はさほど変わらないものの、カバー画像とスライダーとサイドバーはそのままの2カラムで、ブログ一覧だけがトップページから消える感じになります。

トップページの初期状態(ブログ一覧が消える)

3-2.レイアウトをワンカラムに変更する

カスタマイザーを使ってスライダーとサイドバーを消して、2カラムになっているレイアウトを1カラムに変更します。
・「トップページ>記事スライダー」→「設置しない」をチェックする。
・「サイドバー」→「トップページにサイドバーを表示する」のチェックを外す。※必要であればそれ以外のチェックも外しておく(任意)。

スライダーとサイドバーを消してワンカラム化

4.トップページのコンテンツを作成

トップページがワンカラムになったら、SWELL独自ブロックのひとつである「フルワイドブロック」を使ってコンテンツを構築していきます。ひとつめの例として、シンプルなテキストのみのブロックを追加してみます。

4-1.フルワイドブロックでテキストのみ配置する例

・1-1で作った「トップページ」をブロックエディタで編集します。
・「フルワイドブロック」を追加し、その中に「見出し」と「段落」のブロックを配置してテキストを入力します。

フルワイド+テキストのみブロック追加

すると、最初は必ずメインビジュアルとフルワイドブロックの間に “白い隙間” ができます。気にならなければそのままでOKです。でも、この隙間を詰めたい場合はCSSで次のように追記します:

/*メインビジュアル下の余白をゼロに*/
#content {padding-top: 0 !important;}

サイト全体に効かせたい訳ではないので「追加CSS」はおすすめしません。他の固定ページや投稿ページの上部余白がなくなってしまうからです。トップページだけに効かせる場合は編集画面下にある「CSS用コード」を使ったほうがよいです。

4-2.フルワイドブロックとリッチカラムの配置例

フルワイドブロックは背景に画像を配置したり、色彩オーバーレイを設定したりすることができます。また入れ子構造で内側にリッチカラムブロックを使えば任意の列数でコンテンツをレイアウトできます。

・「フルワイドブロック」を追加します。
・「フルワイド」の背景画像はツールバーから配置、オーバーレイはブロック設定から指定します。
・「フルワイド」の内側に「リッチカラム」を配置。列数を3にして画像やテキストを配置します。

今度はフッターとフルワイドブロックの間に “白い隙間” ができています。この隙間を詰めたい場合はCSSで次のように追記します:

/*フッター上の余白をゼロに*/
#content {margin-bottom: 0 !important;}

こちらも、他のページに影響が及ばないように、トップページの編集画面下にある「CSS用コード」への追記をおすすめします。

4-3.フルワイドブロックとFAQの配置例

フルワイドブロックは他にも様々なブロックを入れ子にすることができます。ここでは「FAQ」ブロックを配置してみました。SWELLではこのように豊富なブロックを組み合わせることで多彩なレイアウトができますので、ぜひ他のブロックもいろいろ試してみてください。

にほんブログ村 その他日記ブログ ひとりごとへ
にほんブログ村 「ひとりごと」ランキング参加中です。ポチッと応援お願いします♪

コメント

この記事へのコメントはありません。

CAPTCHA


naochka

長年IT業界でWeb+デザインをやってました。いまはWordPress中心です。やや技術的な話が多いですが、なぜか世界中あちこち放浪してた関係でたまに想い出を綴ってたりもします。 Wall Street Journalを読む会の英語ナビゲーターやってます。(実は帰国子女)

最近の記事

  1. [名刺デザイン] シンプルだけど個性的なオンオフ兼用名刺

  2. 第9回 Wall Street Journalを読む会:金融引き締めでも現金を有利に働かせるには

  3. [WordPress] マルチサイト導入から解除まで④:マルチサイトを解除して親サイトも完全削除

  4. [WordPress] マルチサイト導入から解除まで③:プラグイン管理、サイトの複製と削除

  5. [WordPress] マルチサイト導入から解除まで②:子サイトの追加とテーマの扱い方

カテゴリー

アーカイブ

TOP