SWELLを購入して初期設定は終わったけど、デザインはどうやって変更すればいいかわかりません。教えてください。
こういった疑問に答えます。
今回は、本記事ではSWELLのデザインをカスタマイズする方法について解説します。
WordPressテーマのSWELLを購入してから記事を投稿するまでの手順は以下です。
上記のとおり、本記事では、手順3のデザインのカスタマイズ方法を解説します。
SWELLのデザインを変更する方法がわからず困っている方はぜひご覧ください。
予備知識：テーマカスタマイザーの使い方を理解しよう
SWELLでは、「テーマカスタマイザー」という機能を使って、デザインの大部分をカスタマイズしていきます。
まずはこのテーマカスタマイザーの使い方を理解しましょう。
テーマカスタマイザーとは
WordPressの管理画面上から、テーマの変更をリアルタイムで表示確認（ライブプレビュー）しながらカスタマイズが行える機能のこと。
以下の画面で、左側にあるナビゲーションが、SWELLで設定可能な項目のリストです。
左メニュー部分を拡大したのがこちら。
左メニューで設定を変更すると、右側のプレビュー画面にリアルタイムで反映されます。
左側ナビゲーションの各項目をクリックすると、さらに詳細な設定項目が出てきますので、そちらからお好きなようにカスタマイズしてください。
テーマカスタマイザーを使うことで、HTMLやCSSなど、サイト制作に必要な専門知識がなくても、直感的にサイトをカスタマイズできます。
テーマカスタマイザーの起動方法
起動方法は２つあります。
起動方法１
管理画面の左メニューから、「外観」>「カスタマイズ」をクリックします。
すると、以下のような画面に遷移します。
起動方法２
管理画面の上部メニューから「カスタマイズ」をクリックするでもOKです。
このツールバーに表示されている「カスタマイズ」という項目をクリックすることで、そのページでカスタマイザーが起動します。
投稿ページに関するカスタマイズなどを行う場合は、記事を表示しながら設定していきましょう。
デザインを変更する方法
左側ナビゲーションの各項目をクリックすると、さらに詳細な設定項目が出てきます。
たとえば以下は「ヘッダー設定」をクリックしたときの画面。
上記の設定項目をお好きなようにカスタマイズしてください。
変更したデザインを確認する方法
左メニューで設定を変更すると、右側のプレビュー画面にリアルタイムで反映されます。
デバイスプレビューボタン
左メニューの最下部に、デバイスプレビューボタンがあります。
各ボタンをクリックすると、パソコン、タブレット、スマホそれぞれの端末でどのように表示されるかを確認できます。
たとえば一番右側のモバイルボタンをクリックすると、以下のようにスマホでの表示を確認できます。
変更したデザインを保存する方法
変更したデザイン設定で良ければ、設定を保存します。
左ナビゲーションの最上部にある「公開」ボタンをクリックすると、設定が保存されます。
ここまで説明したように、SWELLでは「テーマカスタマイザー」という機能を使って、デザインの大部分をカスタマイズしていくってことをご理解ください。
基本設定：サイトの各パーツの設定
続いては、基本設定（サイトの各パーツの設定）を説明していきましょう。
ここで紹介するのは以下の項目です。
- サイトのベースとなる全体的なデザイン
- ヘッダー
- フッター
- サイドバー
- スマホメニュー
なお本記事では、ざっくり説明にとどめますので、詳細は公式マニュアルをご覧ください。
SWELLはどんどんアップロードされていくので、SWELLの公式マニュアルをご覧いただくほうが、情報が正確だからです。
サイトのベースとなる全体的なデザイン
続いては、サイトのベースとなる全体的なデザインを設定しましょう。
テーマカスタマイザーを起動し、「サイト全体設定」をクリックします。
「サイト全体設定」メニューでは以下の項目を設定できます。
- 基本カラー
- 基本デザイン
- NO IMAGE画像
- タイトルデザイン
- コンテンツヘッダー
- お知らせバー
- パンくずリスト
- ページャー
- スマホ開閉メニュー
- 下部固定ボタン・メニュー
詳しくは公式サイトをご覧ください。
https://swell-theme.com/basic-setting/2318/
ヘッダー
続いては、ヘッダーの設定をしましょう。
テーマカスタマイザーを起動し、「ヘッダー」をクリックします。
ヘッダーでは以下の項目を設定できます。
- ヘッダーロゴ設定
- レイアウト・デザイン設定
- トップページでの特別設定
- ヘッダーの追従設定
- ヘッダーバー設定
- キャッチフレーズ設定
- ヘッダーメニュー（グローバルナビ）設定
- 検索ボタン設定
- メニューボタン設定
- カスタムボタン設定
詳しくは公式サイトをご覧ください。
https://swell-theme.com/basic-setting/84/
フッター
続いては、フッターの設定をしましょう。
テーマカスタマイザーを起動し、「フッター」をクリックします。
フッターでは以下の項目を設定できます。
- カラー設定
- コピーライト設定
- その他の設定
フッターメニューは、WordPressの管理画面＞「外観」＞「メニュー」から設定します。
フッターに設置するウィジットは、WordPressの管理画面＞「外観」＞「ウィジット」から設定します。
詳しくは公式サイトをご覧ください。
https://swell-theme.com/basic-setting/21/
サイドバー
続いては、サイドバーの設定をしましょう。
テーマカスタマイザーを起動し、「サイドバー」をクリックします。
「サイドバー」メニューでは以下の項目を設定できます。
サイドバーに設置するウィジットは、WordPressの管理画面＞「外観」＞「ウィジット」から設定します。
詳しくは公式サイトをご覧ください。
https://swell-theme.com/basic-setting/6036/
スマホメニュー
トップページの設定
続いては、トップページを設定していきましょう。
ここでは以下の説明をします。
- メインビジュアル
- 記事スライダー
- ピックアップバナー機能
- 記事一覧
メインビジュアル
メインビジュアルとは、トップページにおいて、最初に目に飛び込んでくるエリアのこと。
テーマカスタマイザーを起動し、「トップページ」＞「メインビジュアル」をクリックします。
ここで、メインビジュアルの詳細設定ができます。
画像を1枚だけ画面いっぱいに表示させたり、画像スライダーを設置したり、動画を埋め込んだりができます。
詳しくは公式サイトをご覧ください。
https://swell-theme.com/function/88/
記事スライダー
記事スライダーとは、トップページにおいて、画像が右から左に流れていく（スライドする）エリアのこと。
テーマカスタマイザーを起動し、「トップページ」＞「記事スライダー」をクリックします。
ここで、記事スライダーの詳細設定ができます。
詳しくは公式サイトをご覧ください。
https://swell-theme.com/function/90/
ピックアップバナー機能
「ピックアップバナー」とは、トップページに表示できる画像バナー形式のナビゲーションメニューのこと。
メニューの作成
ピックアップバナーを使用するには、まずカスタムメニューを用意します。
WordPressの管理画面から「外観」＞「メニュー」をクリックしてください。
新規メニューを作成します。
次に、画面左側の「メニュー項目を追加」からピックアップバナーとしてリンクを設置したいページを選び、下側にある「メニュー設定」にて「ピックアップバナー」にチェックを入れて保存します。
これで、「ピックアップバナー」が表示されるようになります。
カスタマイズ
ピックアップバナーをカスタマイズするには、テーマカスタマイザーを起動し、「トップページ」＞「ピックアップバナー」をクリックします。
ここで、ピックアップバナーのサイズなどを変更できます。
詳しくは公式サイトをご覧ください。
https://swell-theme.com/function/2502/
記事一覧
SWELLでは、トップページには標準で「新着記事の一覧」が表示されます。
レイアウトの変更
この記事一覧に関する変更は、テーマカスタマイザーを起動し、「記事一覧リスト」から行います。
ここでは記事リストのレイアウトを設定できます。
カード型とかサムネイル型とか。
サムネイル画像のサイズ比率設定もできます。
ここでここで設定した比率に合わせて各記事のアイキャッチ画像を作成すると、きれいな表示になります。
詳しくは公式サイトをご覧ください。
https://swell-theme.com/basic-setting/1539/
タブの切り替え
この記事一覧リストの部分を、「人気順」や「特定のカテゴリ」で絞り込んだリストごとにタブ切り替えで表示できます。
テーマカスタマイザーを起動し、「記事一覧リスト」から行います。
けっこう下のほうに、以下の設定項目があります。
ここで、「人気記事タブ」はチェックを入れると、以下のように、新着記事と人気記事がタブ型に切り替わります。
カテゴリーをタブに設定することも可能。
詳しくは公式サイトをご覧ください。
https://swell-theme.com/function/318/
抜粋文の設定
カード型やリスト型を選ぶと、抜粋文が表示されます。
抜粋文は、デフォルトだと本文の内容から自動でトリミングされますが、任意の文言を記載することもできます。
詳しくは公式サイトをご覧ください。
https://swell-theme.com/basic-setting/2849/
記事一覧の表示件数
表示件数の変更は、WordPressの管理画面＞「設定」＞「表示設定」から行います。
『１ページに表示する最大投稿数』の数字を変更して保存します。
詳しくは公式サイトをご覧ください。
https://swell-theme.com/basic-setting/2830/
投稿・固定ページの設定
続いては、投稿ページや固定ページの設定しましょう。
- 記事タイトルの表示設定
- コンテンツのデザイン設定
- 目次の設定
記事タイトルの表示設定
テーマカスタマイザーを起動し、「投稿・固定ページ」をクリックします。
「タイトル」をクリックします。
ここで、投稿ページや固定ページに表示される「タイトル」の設定をできます。
詳しくは公式サイトをご覧ください。
https://swell-theme.com/basic-setting/2229/
コンテンツのデザイン
テーマカスタマイザーを起動し、「投稿・固定ページ」＞「コンテンツのデザイン」をクリックします。
ここでは、見出しのデザインなどを設定できます。
一部のデザインは、カスタマイザーではなく、別メニューから行います。
WordPressの管理画面から「SWELL設定」＞「エディター設定」をクリックします。
ここでは、マーカーやボタン、ボックス、ふきだし、ブログカードなどのデザインを変更できます。
詳しくは公式サイトをご覧ください。
https://swell-theme.com/basic-setting/3219/
目次の設定
テーマカスタマイザーを起動し、「投稿・固定ページ」＞「目次」をクリックします。
SWELLでは、記事中にある一つ目のH2タグの直前に目次を自動生成できます。
最上部にあるチェックボックスをオンすると、目次の自動生成機能が有効になります。
目次のデザインも変更できます。
詳しくは公式サイトをご覧ください。
https://swell-theme.com/basic-setting/2278/
ウィジェットの設定
準備中
まとめ
今回は、SWELLのデザインをカスタマイズする方法を解説しました。
デザインをひとおとりカスタマイズしたら、次は記事を書いてみましょう。
記事の作成方法は以下をご覧ください。
» 【グーテンベルグ】WordPressブログの記事の書き方をゼロから解説！