SWELL初心者のためのデザイン初期設定を詳しく解説！

2023年11月3日2023年11月19日

SWELLは当サイトでも利用しているテーマです(^^)
機能性抜群でとても記事が作成しやすく、ストレス無くスムーズに記事作成が出来ることがとても魅力的。
私自身とても気に入っているテーマです♪

今回の記事ではSWELLテーマのデザイン初期設定を特に必要な部分を抜粋して解説していきます！

SWELLとは

SWELLとは2019年3月にリリースされた、WordPressテーマです。

SWELL – シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ
 公式サイト

デザインがおしゃれで高機能。
操作も簡単で、ブロックエディタに完全対応しており、HTMLやCSSなどのコーディング知識がなくても使えるため、初心者にもおすすめのWordPressテーマです。
コードを書く必要もなく直感的に操作できるので、記事を書く時の時間コストを大幅に削減できます！

｢SWELL｣のメリット

ブロックエディタ完全対応で操作が簡単
HTMLやCSSなどのコーディング知識がない初心者でも、容易にオシャレなサイトが作れる
充実したSEO対策
広告の設置や管理も簡単にできる
サポートも手厚く疑問や不明点の解決策が見つかりやすい
買い切り型で複数サイトで使える

SWELLは初心者から上級者まで快適に編集可能な機能満載のため、とても人気なテーマとなっています。
また、SWELLは更新頻度がかなり高く、WordPress自体の更新にも常時対応しているので安心して利用することができます。

＼大人気Wordpressテーマ／

SWELLの購入はこちらから

カスタマイザーでSWELL全体の設定

カスタマイザーで設定を変更した場合は必ず右上の公開を押して下さいね^^

WordPressダッシュボードの外観からからカスタマイズをクリックしてカスタマイザーを立ち上げます。

この画面で設定していきます。

1.WordPressの設定

ここではサイトの基本情報やトップページの表示方法の設定が出来ます。

サイト基本情報

サイトのタイトル、キャッチフレーズを設定します。今回は参考までに私のブログ名とキャッチフレーズを入れてみました。ちなみに、タイトルの表示されている白い部分を｢ヘッダー｣、ヘッダー上のキャッチフレーズの表示がされている部分を｢ヘッダーバー｣と言います。
サイトアイコンではブラウザやブックマークに出てくるアイコンの設定が出来ます。

ヘッダーはウェブサイトの訪問者と検索エンジンに対してサイトの情報を明確に伝えるための重要な役割があります。
SEO対策のためにもしっかり設定していきましょう。

ホームページ設定

トップページの表示方法が変更が出来ます。
そのまま最新の投稿を表示することも出来ますし、固定ページでトップページを作成し表示させることも出来ます。

2.サイト全体設定

ここではサイトのカラーやデザイン、フォント等の基本的な設定ができます

基本カラー

メインカラー、テキストカラー、リンクカラー、背景色の変更が出来ます。

メインカラーの変更画面です。好きなカラーに変更すると

見出しとヘッダーバーの色が変更されます。

名称	説明
テキストカラー	記事本文中の文字などに適用。
リンクカラー	記事本文中のリンクテキストに適用。
背景色	サイトの背景全体に適用。

基本デザイン

フォントは游ゴシックが一番視認性が高く読みやすいため、おすすめです。

名称	説明
全体の質感	標準、フラット、丸みの３つから全体の質感を選択。
コンテンツの背景を白にする	見やすいように、コンテンツ部分やウィジェット部分のみを白に設定可能
背景色	サイトの背景全体に適用
フォント設定	４種類から選べる
コンテンツ幅の設定	当サイトは1200に設定しています
サブメニューの表示設定	サブメニューをアコーディオン表示させる設定詳しくはこちらのサイトを参考にするとわかりやすいです
ページ背景	サイト全体の背景を画像に設定する場合に使用

NO IMAGE画像

こちらはアイキャッチを設定しなかった場合の表示です。
アイキャッチを設定する場合には特に設定は不要です。

その他の設定に関しても特に設定する必要は無いので割愛します。
操作に慣れてきて、こだわりたい部分が出てきた場合に調整してみて下さい^^

3.ヘッダー

ここではヘッダーの設定ができます。

ヘッダー背景色を好きな色に変更します。
今回は元々白で設定されていたヘッダー部分が選択した色に変更されています。

同様にヘッダーに表示される文字の色も変更が可能です。

ヘッダーロゴとはWebページの上部に表示されるロゴやサイトタイトルのことで、基本的にどのページにも表示されるものです。オリジナルの画像も設定することも出来ます。

レイアウト・デザイン設定

名称	説明
ヘッダーのレイアウト(PC)	メニューの表示位置の設定
ヘッダーのレイアウト(SP)	スマートフォンでのメニューの表示位置の設定
ヘッダー境界線	ヘッダーの境界線の設定

トップページでの特別設定でヘッダーの背景を透明にするかどうかにチェックを入れるとヘッダー部分が透明になります。後述するメインビジュアルで画像設定している場合、タイトルロゴやメニュー部分にも画像が反映されます。

こんな感じになります^^

ヘッダーの追従設定では、画面をスクロールしてもヘッダーが現れるようにするかの設定が出来ます。

ヘッダーバー設定では、サイト全体設定で説明したヘッダーバーの色の変更ができます。SNSアイコンリストを表示するのチェックを外すとヘッダーバーが消えます。また、SNSアイコンなどがなくてもヘッダーバーを表示させたいかたは「コンテンツが空でもボーダーとして表示する」にチェックを入れましょう。

キャッチフレーズ設定では、サイト基本設定で設定したキャッチフレーズを表示する場所を設定できます。

4.フッター

ここではフッターの設定ができます。

カラー設定

名称	説明
フッター背景色	フッター背景色の設定
フッター文字色	フッター文字色の設定
ウィジェットエリアの背景色	ウィジェットエリアの背景色の設定
ウィジェットエリアの文字色	ウィジェットエリアの文字色の設定

※ウィジェットエリアとは、主にサイドバーや、ヘッダー・フッターに位置します。またウィジェットを置く範囲のことをウィジェットエリアと呼びます

コピーライト設定

赤枠の部分の表示の設定が出来ます。

5.サイドバー

ここではサイドバーの設定ができます。

お好みで設定してみて下さい。
ちなみに私はトップページのサイドバーは非表示にしています。サイト型トップページの場合はその方が見栄えが良いからです^^
※サイト型トップページとは、ブログ型トップページ（デフォルトの設定ではブログ型になっています）とは違って「新着記事」や「人気記事」、「カテゴリ」など、自分好みで配置することができるカスタマイズ型トップページのことです。

6.トップページ

ここではトップページの設定が出来ます。

メインビジュアル

画像や動画を選択することが出来ます。逆に何も表示しない設定も出来ます。

画像を選択した場合は、少し下にスクロールをして各スライドの設定で画像を選択します。
2枚以上選択した場合はスライダーの設定が出現します。動画の場合も同じ要領で設定が出来ます。

メインテキストは、SWELLデフォルトで表示される「さぁ、始めよう」が入っている部分ですね。
お好みで変更か削除して下さい。

記事スライダー

記事スライダーはトップページの赤枠の部分のことです。
表示しないとまるっと消えます。設置した場合には表示するカテゴリーや枚数などの設定が出来るのでお好みで設定して下さい^^

ピックアップバナー

ピックアップバナーはメインビジュアルの下に設置されるバナーのことです。
こちらは設定がされている場合に変更が出来る項目です。
詳しくは→公式サイト「ピックアップバナーの説明」を参考にしてみて下さい。

7.投稿・固定ページ

最初の三項目は私は特に気にしていないので、割愛させていただきますm(_ _)m

コンテンツのデザイン

見出しのデザイン設定が出来ます。
キーカラーは見出しの色のことです。H1～H4までそれぞれ設定が可能です。

その他にも太字の下に点線をつける、テキストリンクにアンダーラインを付けるの設定も可能です。

名称	説明
目次のタイトル	目次の名称（タイトル）を変更。
目次のデザイン	目次のデザイン（4種類）を選択。
目次のリストタグ	目次の表示形式（数字・ドット）を選択。
ウィジェットエリアの文字色	ウィジェットエリアの文字色の設定
擬似要素(ドット・数字部分)のカラー	目次の数字・ドットのカラーを選択。
どの階層の見出しまで抽出するか	どの階層（h2・h3・h4）の見出しまで抽出するかを選択。
見出しが何個以上あれば表示するか	見出しが何個以上あれば表示するかを選択。

次の SNSシェアボタン・記事下エリアの設定に関しては項目に沿ってお好みで変更して下さい^^
SNSでシェアされるとSEOでも良い影響があるのでしっかり設定する事をおすすめします。

※ IDを指定してください。

8.アーカイブページ

アーカイブページとは記事をまとめているような新着記事ページやカテゴリーページ等のことです。
特に説明することはないのでお好みで設定して下さい。

9.記事一覧リスト

ここでは記事一覧リストの設定ができます。

この記事一覧リストはトップページなどで表示される投稿リストの表示方法です。
固定ページなどでトップページをカスタマイズしていて別に記事一覧ページが欲しい場合は、まずは固定ページで新着記事のページを作ります。その後ホームページ設定の投稿ページで、作成した新着記事ページを選択すると記事一覧ページを表示できるようになります。
詳しくは→WordPressテーマSWELLで記事一覧ページを作る方法を参考にしてみて下さい^^

10.SNS情報

ここではSNS情報に関する設定ができます。
サイトに表示させたいSNSリンクのURLを設定するだけでなので説明は割愛します。

エディターの設定

ここでは各ブロック要素でよく使うカラーの設定ができます。

スウェルのエディター設定から変更が出来ます。

カラーパレットは赤枠の部分のことです。

それぞれ好きな色に設定してみて下さい^^
変更後は一番下にある変更を保存を忘れずに！！

＼大好評のWordpressテーマ／