使い方・導入方法 &#8211; Enjoy SWELL

あわせて読みたい

【デモサイト・サンプルあり】SWELL でおしゃれなサイトを作る方法！ SWELL はデザインセンス抜群のテーマです。ひとつ手を加えることでさらに一段上のおしゃれデザインのサイトを作れます。本記事ではSWELLで作ったサンプルとおしゃれサイトを作るポイントを解説します。

素敵なサイトを作ってくださいね！

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

【SWELL】サイドバーの設定を初心者向けに簡単に解説

Boon ☆ — Fri, 25 Aug 2023 11:00:00 +0000

広告：ページ内にてアフィリエイト広告を利用しています。

SWELL を導入後は使い方がまだわからない部分も多いですよね。SWELL導入後でも、運用を開始した後でもできる、SWELLのサイドバーの設定について解説します。

ポイント

本記事では、

SWELL 導入後に行うサイドバーの設定ついて解説します。

SWELL を使って、素敵なサイトを作りましょう！

主な設定項目を中心に紹介します。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法はこちらをクリックしてください／

SWELL のサイドバー部分

SWELLテーマを使って作ったサイトのサイドバー部分のサンプルを紹介します。

ページのサイドにあるサイドバーエリアに、プロフィールやカテゴリーの一覧などを配置しています。

サイドバー設定方法

実際のサイドバーの設定方法です。

■ サイドバーの初期化

サイドバーには標準でいくつかのウィジェットが設定されています。一度全て消しましょう。

WordPress の管理画面から、「外観」→「カスタマイズ」→「ウィジェット」→「共有サイドバー」を選択します。

標準で設定されているブロック（５個）をすべて削除する

■ サイドバーのおすすめ設定

サイドバーをどのように設定するのも自由です。しかしプロフィールやカテゴリーなどサイドバーに適した情報がありますので、おすすめの設定を紹介します。

サイドバーのおすすめ設定です。

プロフィールを設定
「検索」を配置
「カテゴリー」を配置
「目次」を配置

自分を紹介するプロフィール欄は一番上に目立つように置きたいですね。

検索ボックスは何気に便利で、読者に使ってもらうことはもちろんですが、自分で自分のサイトの中から特定の情報や文字列を書いてある記事を探し出すのに役立ちます。カテゴリーと目次があると読者にも便利なサイトになりますね。

■ プロフィールの設定

プロフィール（ウィジェット）の表示方法です。

「SWELL プロフィール」ウィジェットを配置する
「名前」を設定する
「プロフィール文」を設定する
「アイコン画像」を設定する
「プロフィール背景画像」を設定する

ポイント

「アイコン画像」の画像のサイズは「512×512」、「プロフィール背景画像」の画像のサイズは「1200×630」または「1200×675」がおすすめです。

プロフィールウィジェットでは、下の方にボタンを配置することができます。

自分の Twitter へのリンクなどをのせると良いですね。

「ボタンリンク先」にボタンを押した場合のURLを設定する
「ボタンテキスト」にボタン上のテキスト文字列を設定する
「ボタンの色」でボタンを色を設定する

■「検索」ウィジェットの設定

検索ボックスを設置すると、読者にも便利ですが、サイト運営者（自分）も記事を探すのに使えて便利です。

「検索」ウィジェットを配置する

■「カテゴリー」ウィジェットの設定

サイトのカテゴリーのリストをサイドバーに設置すると読者にも便利になりますね。

カテゴリーウィジェットを配置します。

「カテゴリー」ウィジェットを配置する

■ 追尾サイドバーの設定（目次設定）

SWELL の機能ではサイドバーで目次を表示する機能があります。記事をスクロールした際にもずっとサイドバーに表示する追従サイドバーに設定することでより見やすくなります。

WordPress の管理画面から、「外観」→「カスタマイズ」→「ウィジェット」→「追尾サイドバー」を選択します。

「SWELL 目次」ウィジェットを配置する

まとめ：サイドバーの設定（導入後に最初にやること）

本記事では、SWELL のサイドバーの設定を解説しました。

ポイント

サイドバーを初期化する
プロフィールを設定する
「検索」ウィジェットを設定する
「カテゴリー」ウィジェットを設定する
追尾サイドバーに目次を設定する

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

＼サンプルを見るだけでも、役に立つ／

あわせて読みたい

素敵なサイトを作ってくださいね！

＼テーマを変えるなら早いほうがいい／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

【SWELL】フッターの設定を初心者向けに簡単に解説

Boon ☆ — Tue, 22 Aug 2023 11:00:00 +0000

広告：ページ内にてアフィリエイト広告を利用しています。

SWELL を導入後は使い方がまだわからない部分も多いですよね。SWELL導入後でも、運用を開始した後でもできる、SWELLのフッターの設定について解説します。

ポイント

本記事では、

SWELL 導入後に行うフッターの設定ついて解説します。

SWELL を使って、素敵なサイトを作りましょう！

主な設定項目を中心に紹介します。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法はこちらをクリックしてください／

SWELL のフッター部分

SWELLテーマを使って作ったサイトのフッター部分のサンプルを紹介します。

シンプルなフッター（SWELL 標準仕様）

ページの下の方にあるフッターエリアに、フッター用のロゴや、メニュー、コピーライトを配置しています。

３列フッター（SWELL 標準仕様）

SWELL標準の機能で、横に２列もしくは３列に分けてフッターを作ることもできます。

お店のホームページなどで店舗情報や地図を表示するときに便利ですね。

フッター設定方法

実際のフッターの設定方法です。

■ フッターの全体設定

フッター部分の全体設定を行います。

WordPress の管理画面から「外観」→「カスタマイズ」→「フッター」を選択します。

「フッター背景色」でフッター部分の背景色を設定する
「フッター文字色」でフッター上の文字色を設定する
「コピーライトのテキスト」でフッターに表示するコピーライトを設定する

ポイント

コピーライトのテキストは通常サイト名が一般的です。

■ フッターメニューの作成

フッター部分のメニューを作成します。

WordPress の管理画面から「外観」→「メニュー」を選択します。

フッターメニューを作成します。作成方法はグローバルナビ（ヘッダーメニュー）を作る場合と同様です。

フッターメニューを作成することで、フッターに自動的にメニューを追加します。

ポイント

「プライバシーポリシー」はグローバルナビではなくフッターメニューの方が適しています
「お問合せ」が営業活動につながるサイトを除き、「お問合せ」メニューもグローバルナビではなくフッターメニューの方が適しています

■ コンテンツ部分（１列）を作成する

フッターのコンテンツ部分を作成します。横に分けずに１列で作る場合です。

フッターのコンテンツ部分はサイトにとって必須ではありませんが、ロゴや、お店のホームページであればお店情報や地図を表示するとお役立ち情報になりますね。

WordPress の管理画面から「外観」→「ウィジェット」を選択します。

※ウィジェットの設定は「ライブプレビューで管理」画面のほうがわかりやすいですね。

「フッター１（PC）」に表示したいウィジェットを配置する

「フッター１（PC）」だけを使うことで、３列に分かれず画面全体を使った１列のフッターコンテンツになります。

ただし、ウィジェットだとカテゴリーや検索は並べられても文章や画像を並べにくくいまいち大変です。そこで、凝ったデザインにしたい場合はブログパーツを使うと便利です。

WordPress の管理画面から「ブログパーツ」を選択し、ブログパーツを新規作成します。

ブログパーツを作成し、公開する

WordPress の管理画面から「ブログパーツ」を選択し、ブログパーツ一覧を表示します。

作成したブログパーツの「呼び出しコード」をメモします（後ほど使います）

WordPress の管理画面から「外観」→「ウィジェット」を選択します。

「フッター（PC）１」にテキストウィジェットを配置する
「テキスト」タブに、ブログパーツの「呼び出しコード」を入力する

ブログパーツで作ったコンテンツをフッターに反映することで、より凝ったデザインが可能になりますね。

■ コンテンツ部分（２列・３列）を作成する

フッターのコンテンツ部分を作成します。２列または３列で作る場合です。

WordPress の管理画面から「外観」→「ウィジェット」を選択します。

「フッター（PC）２」にウィジェット（ブログパーツなど）を配置する
「フッター（PC）３」にウィジェット（ブログパーツなど）を配置する

「フッター（PC）２」、「フッター（PC）３」に配置することで２列・３列に分けたフッターを作成することができます。

スマホ用固定フッター

SWELLには「スマホ用固定フッター」というスマホで表示されるオシャレな機能があります。

ホーム（トップページ）へのリンクや、検索ボタンを置くことができてユーザーの利用利便性があがりますね。

設定するためには、WordPress の管理画面から「外観」→「メニュー」を選択します。

固定フッター（SP）メニューを作成します。作成方法はグローバルナビ（ヘッダーメニュー）を作る場合と同様です。

固定フッター（SP）メニューを作成することで、スマホでサイトを見た場合、固定フッターが自動的に表示されます。特定のページ（トップページ）などへのリンクボタンを設置する場合はメニューに項目を追加します。

「カスタムリンク」などでURLとボタン名を追加します。説明欄にアイコンのショートコードを記載することで表示するアイコンを指定します。

主なアイコンのショートコード

アイコン	ショートコード
	icon-home
	icon-file-empty
	icon-mail
	icon-film
	icon-instagram
	icon-tiktok
	icon-facebook
	icon-thumb_up
	icon-phone
	icon-bubble

なお、SWELLではリンク以外の特別な動きをするメニュー項目が別途用意されており、使うことが可能です。

特別の動きをするメニューは以下の４種類あります。

「メニュー開閉ボタン」
「検索ボタン」
「ページのトップへ戻るボタン」
「目次メニュー」

設定するためには、WordPress の管理画面から「外観」→「カスタマイズ」→「サイト全体設定」→「下部固定ボタン・メニュー」を選択します。

各ボタンの表示有無及びメニュー項目名を設定する

ポイント

固定フッターはオシャレなメニューで、ユーザビリティがよい（ユーザに優しい）機能ですが、記事を見れるエリアが少なくなるというデメリットもあります。ご利用有無はサイトの雰囲気などに合わせてご判断下さい。

まとめ：フッターの設定（導入後に最初にやること）

本記事では、SWELL のフッターの設定を解説しました。

フッター設定の主な項目

フッターの全体設定
フッターメニューの作成
コンテンツ部分（１列）を作成する
コンテンツ部分（２列・３列）を作成する
スマホ用固定フッター

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

＼サンプルを見るだけでも、役に立つ／

あわせて読みたい

素敵なサイトを作ってくださいね！

＼テーマを変えるなら早いほうがいい／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

【SWELL】ヘッダーの設定を初心者向けに簡単に解説

Boon ☆ — Mon, 21 Aug 2023 11:00:00 +0000

広告：ページ内にてアフィリエイト広告を利用しています。

SWELL を導入後は使い方がまだわからない部分も多いですよね。SWELL導入後でも、運用を開始した後でもできる、SWELLのヘッダーの設定について解説します。

ポイント

本記事では、

SWELL 導入後に行うヘッダーの設定ついて解説します。

SWELL を使って、素敵なサイトを作りましょう！

主な設定項目を中心に紹介します。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法はこちらをクリックしてください／

SWELL のヘッダー部分

SWELLテーマを使って作ったサイトのヘッダー部分のサンプルを紹介します。

シンプルなヘッダー（SWELL 標準仕様）

サイト上部にヘッダーを表示し、左側にサイト名（テキストまたはロゴ）、右側にグローバルナビを配置しています。またヘッダーの上にある横線（緑色の線）はヘッダーバーでサイトのキャッチフレーズを左側に表示に検索アイコンなどを表示しています。

ヘッダー設定方法

実際のヘッダーの設定方法です。

■ ヘッダーの背景色と文字色の設定

ヘッダー部分の背景色と文字色を設定します。

WordPress の管理画面から「外観」→「カスタマイズ」→「ヘッダー」を選択します。

「ヘッダー背景色」で背景色を設定する
「ヘッダー文字色」でヘッダー上の文字色を設定する

サイト全体の色合いに合わせて設定します。サイト運用後やトップページデザイン後でも変えられるので迷う場合はディフォルト（初期値）で、背景色を白系（#fdfdfd）、文字色を黒系（#333333）で進めても良いでしょう。

■ サイトのロゴ画像を設定する

ヘッダー左側に「サイトのロゴ画像」を設定します。初期値ではサイト名をテキストで表示していますが、画像でロゴを表示する方が見栄えが良くなります。

ロゴ画像の設定は、WordPress の管理画面から「外観」→「カスタマイズ」→「ヘッダー」を選択します。

「ロゴ画像の設定」に画像を設定する
「画像サイズ」でヘッダー上で画像を表示するサイズを設定する

画像サイズは「PCで初期表示した際のサイズ（スクロールの一番上）」、「PCでスクロールした場合に表示される追従ヘッダー」、「スマホで表示した際のサイズ」の３種類を設定します。設定することでヘッダーの高さが変わります。初期値だとロゴが縮小されすぎて見える場合があるので適宜調整します。

画像サイズ(PC)

「画像サイズ(PC)」を設定

画像サイズ(PC)

「画像サイズ(PC追従ヘッダー内)」を設定

SWELLは標準ではスクロールした場合にヘッダーを追従ヘッダーで表示しなおします。

追従ヘッダーで表示する高さを指定します。

画像サイズ(SP)

「画像サイズ(SP)」を設定

■ レイアウトを設定する

ロゴとグローバルナビの位置関係を設定します。

WordPress の管理画面から「外観」→「カスタマイズ」→「ヘッダー」を選択します。

「ヘッダーのレイアウト（PC）」でレイアウトを設定する

設定内容	設定結果
ヘッダーナビをロゴの横に（右寄せ）
ヘッダーナビをロゴの横に（左寄せ）
ヘッダーナビを下に
ヘッダーナビを上に

スマホの場合

「ヘッダーのレイアウト(SP)」の設定で、スマホの場合のレイアウトも設定することができます。

■ ヘッダーの追従設定

SWELLのおしゃれな機能の一つに、スクロールした際に、縦幅を小さくしたヘッダーが再表示されつづける「追従ヘッダー」があります。「追従ヘッダー」の使用有無を、PC、スマホで各々設定できます。

WordPress の管理画面から「外観」→「カスタマイズ」→「ヘッダー」を選択します。

「ヘッダーを追従させる（PC）」でPCで表示時の追従有無を設定する
「ヘッダーを追従させる（SP）」でスマホで表示時の追従有無を設定する

ポイント

追従ヘッダーはスクロールしてもヘッダー（特にグローバルナビ）が表示されているのでページを移動したいときに便利ですが、一方でコンテンツが隠れ可視領域が少なくなるデメリットもあります。

パソコンではあまり気になりませんが画面が小さいスマホでは「邪魔だなぁー」と思う人もいるため、「ヘッダーを追従させる（PC）」はチェックあり、「ヘッダーを追従させる（SP）」はチェックなしをおすすめします。

■ ヘッダーバーの設定

ヘッダーの上部分のバーの部分をヘッダーバーと呼びます。ヘッダーバーに関する設定です。

WordPress の管理画面から「外観」→「カスタマイズ」→「ヘッダー」を選択します。

「ヘッダーバー背景色」で背景色を設定する
「ヘッダーバー文字色」で文字色を設定する

ヘッダーに関するテクニック

ヘッダー部分は細かく設定できます。本章では「こんなときは？」的な回答（操作方法）を紹介します。

ヘッダーバーを消したい場合は？

ヘッダー上部にある横に伸びた線（ヘッダーバー）はデザインをシャキっと見せる良い効果ですが、消したい場合もありますね。消す方法を紹介します。

WordPress の管理画面から「外観」→「カスタマイズ」→「ヘッダー」を選択します。

「 SNSアイコンリストを表示する」のチェックを外す
「コンテンツが空でもボーダーとして表示する」をチェックしない
「キャッチフレーズの表示位置」を「表示しない」に設定する

蒸気を設定することでヘッダーバーが非表示になります。

ヘッダーの背景を透過したい場合は？

SWELLでは、トップページのメインビジュアル（大きな画像）の上にヘッダーを表示する機能があります。

上手く使うと、おしゃれなデザインになりますので紹介します。

「ヘッダーの背景を透明にするかどうか」を設定する

「する（文字色：白）」または「する（文字色（黒）」を指定することで背景透過のヘッダーになります。

まとめ：ヘッダーの設定（導入後に最初にやること）

本記事では、SWELL のヘッダーの設定を解説しました。

ヘッダー設定の主な項目

ヘッダーの背景色と文字色の設定
サイトのロゴ画像を設定する
レイアウトを設定する
ヘッダーの追従設定
ヘッダーバーの設定

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

＼サンプルを見るだけでも、役に立つ／

あわせて読みたい

素敵なサイトを作ってくださいね！

＼テーマを変えるなら早いほうがいい／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

【SWELL】全体設定、基本設定、導入後に最初にやること（初心者向けに完全案内）

Boon ☆ — Thu, 17 Aug 2023 23:00:00 +0000

広告：ページ内にてアフィリエイト広告を利用しています。

SWELL を導入後にいきなり何をすればよいかわからないこともチラホラ。SWELL導入後には全体の設定をします。

ポイント

本記事では、

SWELL 導入後に行う全体設定について解説します。

SWELL を使って、素敵なサイトを作りましょう！

主に最初に見ておいた方がよい設定項目を中心に紹介します。

＼テーマを変えるなら早いほうがいい／

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法はこちらをクリックしてください／

SWELL の全体設定

SWELL で実施していきべき基本的な設定を順番に解説します。

■ WordPress 設定（サイト基本情報）

サイトのタイトル、キャッチフレーズ、サイトアイコンを設定します。

WordPress の管理画面から「外観」→「カスタマイズ」→「WordPress 設定」→「サイト基本情報」を選択します。

サイトのタイトル、キャッチフレーズ、サイトアイコンを設定します。

サイトのタイトルを指定する
キャッチフレーズを指定する
サイトアイコンに画像を指定する

項目	概要
サイトのタイトル	サイト（ブログ）のタイトルです。サイト上部やフッターに表示される他、サイトを紹介するときのサイト名などになります。例）「ペンギンサイト」
キャッチフレーズ	サイトのキャッチフレーズ（サブタイトル）です。ヘッダーバー（画面上部のバー）に表示されます（設定で消すこともできる）サイト名を補足する簡易なキャッチフレーズを設定します。例）「ペンギン好き集まれ！ペンギンについていろいろ紹介」
サイトアイコン	サイトのアイコンです。ブックマークしたときのショートカット用のアイコンなどになります。「サイトアイコン」の画像のサイズは「512×512」程度の正方形の画像を用意します。

■ サイト全体設定（基本カラー）

サイト全体の基本色を設定します。

WordPress の管理画面から「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」を選択します。

サイト全体のカラーを設定していきます。

項目	概要
メインカラー	サイト全体のメインカラーです。自分のブログのイメージに合う色を選びましょう。
テキストカラー	テキスト色（文字色）です。
リンクカラー	リンクテキストの色（リンクの文字色）です。
背景色	サイト全体の背景色です。

例）メインカラー

メインカラーはサイト内で良く使われる基準色です。

メインカラーの利用例（ヘッダーバーなど）

メインカラーの利用例（見出しなど）

※「見出し」の色は別途設定でも変更できます。

例）背景色

背景色は、サイト全体の背景の色を指定します。

■ サイト全体設定（基本デザイン）

フォントの設定

サイト全体（フォントなど）を設定します。

WordPress の管理画面から「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」を選択します。

項目	概要
ベースとなるフォント	サイトのフォントを指定します。「ヒラギノゴシック＞メイリオ」がおすすめです。
フォントサイズ(PC・Tab)	サイトのフォントサイズを指定します。 Google はサイトのフォントは16px以上が好ましいと公表していますので、「中(16px)」「大(17px)」「極大(18px)」からサイトの雰囲気に合わせて選んでください。 ※ターゲットが高齢の方のサイトの場合、フォントは大きくした方が読みやすくなります。
フォントサイズ(Mobile)	モバイルでのフォントサイズです。初期値の「デバイス可変：中」をおすすめします。
字間(letter-spacing)	字間です。SWELLの各部品などとのバランスのよい「標準（normal）」をおすすめします。

コンテンツ幅の設定

サイトのコンテンツの幅（サイトの記事部分の横幅と思ってください）を調整します。

WordPress の管理画面から「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」を選択します。

「サイト幅」および「１カラム時の記事コンテンツ幅」を設定します。基本的には、初期値の 1200、900 で十分見やすいサイトになります。もし、横幅を広めにしたサイトを作りたい場合は数値を変えてください。

■ カテゴリーを作る

ブログ・サイトでは、記事を分ける「カテゴリー」が大事です。ブログを始めるにあたって、カテゴリーを決めておきましょう。

WordPress の管理画面から「投稿」→「カテゴリー」を選択し、カテゴリーを作成します。

画像の準備ができるようであればカテゴリーのアイキャッチも設定しておくといいですね。

（後からでも設定できるので必須ではありません）

ポイント

アイキャッチ画像のサイズは「1200×630」程度がおすすめです。

※ 一般的なアンドロイドスマホで撮った写真を縮尺すると「1200×675」になります。こちらもおすすめです。

■ メニュー（グローバルナビ）を作る

ブログ・サイトでは、サイト上部に表示する「メニュー（グローバルナビ）」が大事です。ブログを始めるにあたって、メニューを作っておきましょう。

SWELLの標準では右側にメニューを表示します。実際にメニューを作る方法です。

WordPress の管理画面から「外観」→「メニュー」を選択します。

「表示オプション」をクリックして「説明」をチェックする

「メニュー名」を設定する
「グローバルナビ」をチェックする
「メニューを作成」ボタンをクリックする

「カスタムリンク」または「カテゴリー」などでメニューを作成する

ポイント

「説明」欄に書いた文字列がメニュー表示の下側のサブテキストになります。

まとめ：SWELL の全体設定

本記事では、SWELL 導入後に行う全体の設定を解説しました。

全体設定の主な項目

WordPress 設定（サイト基本情報）
サイト全体設定（基本カラー）
サイト全体設定（基本デザイン）
カテゴリーを作る
メニュー（グローバルナビ）を作る

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

＼サンプルを見るだけでも、役に立つ／

あわせて読みたい

素敵なサイトを作ってくださいね！

＼テーマを変えるなら早いほうがいい／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

http://wpdemopresents.com/swell04/

【SWELL】サイト型トップページを作る（初心者向けに完全案内）

Boon ☆ — Sun, 13 Aug 2023 11:00:00 +0000

広告：ページ内にてアフィリエイト広告を利用しています。

ブログのトップページのデザインには主に「ブログ型」と「サイト型」がありますね。

ブログ型は新着記事が見やすい一方、サイト内で見てほしい記事への導線が作りにくくなります。「サイト型」は自由に表現できることから注目記事への導線を作りやすくなります。

SWELLでトップページをカスタマイズする方法を紹介します。

ポイント

本記事では、

SWELL を使って「サイト型トップページを作る方法」を簡単解説します。

SWELL を使って、素敵なサイトを作りましょう！

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法はこちらをクリックしてください／

サイト型トップページとは

ブログサイトのトップページは大きく「ブログ型」と「サイト型」に分けられます。

ブログを立ち上げた最初は「ブログ型」で設定されていますが、「サイト型」に変更することで、より読者に魅せるサイトになります。トップページから狙った記事への導線を作ることができ、サイト型のトップページが推奨されています。

（ブログ型）

最近の記事一覧が新しい順番に並ぶ。日記風。

（サイト型）

ビジュアル的に独自性を持たせたデザイン。

トップページの構成

トップページは幾つかのエリアによって分けられます。

「メインビジュアル」「記事スライダー」「ピックアップバナー」「コンテンツ」部分が主なトップページの項目です。「コンテンツ」部分は固定ページで作成することが多いです。

メインビジュアルを設定する

SWELL の最も特徴的な機能の一つが「メインビジュアル」です。

トップページに画像（または動画）を大きく表示しファーストビューを素敵にカスタマイズできる機能です。また画像の上にテキストやブログパーツ（ブロックの集まり）などを重ねることができるので、工夫次第でトップページをすごく華やかに魅せることができる素晴らしい機能です。

■ 画像の設定

大きい画像（静止画）を設定してみましょう。

WordPress の管理画面から、「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」を選択します。

「スライド画像[1]（PC）」に画像を設定する

SWELLの場合、メインビジュアルに設定した画像は若干透過（背景色を画像にかぶせる）する演出が行われます。

背景色と透過率によって雰囲気が変わります。

背景黒（透過率 0.2）

背景白（透過率 0.2）

背景赤（透過率 0.2）

背景色と透過率の設定です。

「オーバーレイカラー」に色を指定する
「オーバーレイカラー」に不透明度を設定する

シックなサイトなら背景色「黒」、明るい感じのサイトなら背景色「白」がおススメです。

また、画像に対して雰囲気を変える演出を加えることができます。

ブラー

グレースケール

ドット

ブラシ

雰囲気を変える演出の設定です。

「フィルター処理」に演出したい効果を設定する

■ 動画の設定

メインビジュアルに静止画ではなく動画を設定することもできます。

動画を利用したサイトのサンプルページ（実際のページはこちら）

サンプルサイトはこちら

動画を設定すると、動きのあるファーストビューになり、また違った感じになりますね。ただし動画のサイズが大きいと、表示までに時間がかかるのでバランスが大切です。

動画を設定してみましょう。

WordPress の管理画面から、「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」を選択します。

「メインビジュアルの表示内容」に「動画」を設定する

動画を設定する

■ テキストやボタンを設定する

画像や動画の上にテキストやボタンを配置することができます。

サイト文やサイトの抜粋（リード文）を表示して、ボタンで注目記事へリンクしてもいいですね。SWELLでは、設定でテキスト、抜粋（リード文）、ボタンを作れるようになっています。

WordPress の管理画面から、「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」を選択します。

「メインテキスト」を設定する
「サブテキスト」を設定する
「リンク先URL」（ボタンを押した際の移動先）を設定する
「ボタンテキスト」を設定する

「テキストの位置」で左寄せ、中央寄せ、右寄せを指定する
「テキストカラー」を設定する
「テキストシャドウカラー」を設定する
「ボタンカラー」を設定する
「ボタンタイプ」を設定する

■ ブログパーツを使って多様に魅せる

テキストやボタンの設定を用いず、ブログパーツで自由にデザインすることも可能です。

背景透過の画像を使ってロゴを作り、大きく表示したり、イラストなどを使ってカスタムしたボタンなどを並べるよ、よりオシャレな、または面白いトップページのデザインになりますね。

ブログパーツを使ったメインビジュアルの作り方です。

WordPress の管理画面から、「ブログパーツ」を選択します。

ブログパーツを新規作成する（公開する）

ポイント

スマホで表示が崩れないように、適宜 SWELL の「デバイス」指定で PC と SP で表示を切り分けると、レスポンシブ対応のページになっていいですね。

ブログパーツの番号を後ほど使うのでメモっておきます。

WordPress の管理画面から、「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」を選択します。

「ブログパーツID」に（先ほどメモった）ブログパーツIDを設定する

もし、メインビジュアルの高さが足りないとき（もっと縦幅を大きくしたいとき）は、設定で変更が可能です。

「メインビジュアルの高さ」を変更することで、縦幅が変わります。

記事スライダーを設置する

トップページ上部に最新の記事を左右に動くスライダーで表示する機能です。

ブロガーが「最新記事」を読者に気づいてもらうことに役立ちます。左右にスライドするため見た目にもインパクトがありますね。

WordPress の管理画面から、「外観」→「カスタマイズ」→「トップページ」→「記事スライダー」を選択します。

「記事スライダーを設置するかどうか」で設定する

ピックアップバナーを使う

SWELLには、「ピックアップバナー」というトピック（特定記事へのカードリンク）をページ上部に表示する機能があります。

特にサイト内で読者に読んで欲しい記事をピックアップバナーで載せることで注目度を上げることができます。記事への導線になりますね。

実際にピックアップバナーの作成方法です。

■ ピックアップバナーメニューを作成する

WordPress の管理画面から、「外観」→「メニュー」を選択します。

「新しいメニューを作成しましょう」からメニューを作成する
メニュー名を付ける
「ピックアップバナー」をチェックする
「メニューを作成」をクリックする

カスタムリンクやカテゴリーを配置して、メニューを作成します。

「URL」にとび先の URL を設定する
「ナビゲーションラベル」にピックアップバナーのタイトルを設定する
「説明」にピックアップバナー画像の URL を設定する

表示するピックアップ数（３個または４個程度が最適です）のメニュー項目を作成します。

画像のURLの取得方法

ピックアップバナー画像の URL は、画像のURLを指定します。

画像のURLは「メディア」から取得できます。

WordPress の管理画面から、「外観」→「メニュー」を選択し、画像の詳細をクリックして、「ファイルの URL」を取得します。

■ ピックアップバナーを設定する

WordPress の管理画面から、「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」を選択します。

「ピックアップバナー」の設定を行う

ポイント

PCでは３列または４列が見栄えが良くなります。

コンテンツ部分を作成する

トップページのコンテンツ部分を作成します。

■ サイドバー表示有無を設定する

トップページのサイドバーの表示有無を設定します。

サイドバーの表示をする・しないはトップページの印象に大きく関わります。表示すると情報を多く見せられますが表示エリアが少なくなります。サイドバーを表示しないと横幅一杯にインパクトのあるトップページを作ることができますね。

サイドバーがある場合

サイドバーがない場合

トップページにサイドバーの表示有無を設定する方法です。

WordPress の管理画面から、「外観」→「カスタマイズ」→「サイドバー」を選択します。

「トップページにサイドバーを表示する」のチェックで設定する

■ 固定ページをトップページに設定する

サイト型のトップページを作る場合、コンテンツ部分は固定ページで作成します。

WordPress の管理画面から、「固定ページ」を選択します。

固定ページを新規作成する（公開する）

ポイント

スマホで表示が崩れないように、適宜 SWELL の「デバイス」指定で PC と SP で表示を切り分けると、レスポンシブ対応のページになっていいですね。

WordPress の管理画面から、「外観」→「カスタマイズ」→「WordPress 設定」→「ホームページ設定」を選択します。

「ホームページの表示」で「固定ページ」を指定する
「ホームページ」で作成した固定ページを設定する

■ トップページに使うと便利なブロック

「投稿リスト」ブロック

「投稿リスト」ブロックで、「表示する投稿数」を 1、レイアウトをカード型にすることでカード型の記事へのリンクを作ることができます。「Pickup」タブで記事番号を個別に指定することが可能です。

「タブ」ブロック

「タブ」ブロックで、カテゴリごとの記事リストを分けて表示することができます。見栄えも良く表示するエリアを効率よく使えて便利です。

「フルワイド」ブロック

「フルワイド」ブロックはとても便利なブロックです。いくつか使い方の応用があるので、主なものを紹介します。

波打つ背景

「フルワイド」ブロックの上下を波形状にすることができます。背景として使うことでオシャレな表示になりますね。

固定背景

まるで窓から先に飾っている絵を覗いているような演出となりとてもオシャレに見えます。ワンポイントで使うとトップページの素敵な演出の一つになりますね。

（実際のフルワイドブロックの固定背景）

コンテンツを重ねる

「フルワイド」ブロックの上にコンテンツ（ブロック）を重ねることができるので、多様な表現ができます。

背景色を付けて波打つ演出などを利用した背景に、新着記事一覧などを重ねて表示することができて、深みを感じるトップページを作ることができます。

「カラム」「リッチカラム」ブロック

「カラム」ブロック、または、「リッチカラム」ブロックを用いることで、縦に２列、３列と分けてコンテンツを表示することができます。記事カードなどを整理して並べて表示するときに便利です。

■ カスタマイズ例

固定ページを使ってトップページをカスタマイズした例です。

フルワイドブロックで背景を作り、カラムブロックで左右に分けて、左側にイメージ、右側にタブブロックでカテゴリーごとに記事を並べています。作り方を簡単に紹介します。

Step.1 「スペーサー」ブロックを配置

「スペーサー」ブロックを配置する
「高さ」に 64 を設定する

ピックアップバナー下に「間」を取るため、スペーサーブロックを配置して隙間を作ります。

Step.2 「フルワイド」ブロックを配置

「フルワイド」ブロックを配置する
「背景色」に青色（ #9FD9F6 ）を設定する
「背景色の不透明度」に 50 を設定する
「上部の境界線の形状」に波を設定する
「上部の境界線の高さレベル」に 5 を設定する
「下部の境界線の形状」に波を設定する
「下部の境界線の高さレベル」に 5 を設定する

「フルワイド」ブロックを背景用に配置して、上下の形状を「波」にします。

Step.3 「フルワイド」ブロックに見出しを設定

「フルワイド」内に見出し「New Articles」を設定する

Step.4 「カラム」ブロックで縦２列を作成

「カラム」ブロックを配置する
「33 / 66」を設定する

左側には縦長のイメージを配置するので右側の方を広めにとります。

Step.5 左側の画像（イメージ）を配置する

左側のカラムに画像（イメージ）を配置する

Step.6 右側に「タブ」ブロックを配置する

右側のカラムに「タブ」ブロックを配置する
「スタイル」に「下線」を設定する
各タブに名前を付ける

Step.7 「投稿リスト」ブロックを配置する

「投稿リスト」ブロックを配置する
「Pickup」にて表示する記事をフィルタする

Step.8 完成です

完成です。実際に保存して、表示を確認しましょう。

サイトカスタマイズサンプル

SWELL で作ったサンプル（デモサイト）、および、作り方（ note で公開中）です。ぜひ参考にしてください。

デモサイト（スタイリッシュ型）

デモサイト

スタイリッシュなデザインを用いた和食レストランのサンプルサイトです。

実際のサイトはこちら

このデザインの作り方は note（こちら）で公開しています。

（有料記事：580円）

お得な値段設定です。

http://wpdemopresents.com/swell03/

デモサイト（シンプル）

デモサイト

SWELLの機能をシンプルに利用したサンプルサイトです。

実際のサイトはこちら

このデザインの作り方は note（こちら）で公開しています。

（有料記事：100円）

大サービス中！

http://wpdemopresents.com/swell01/

デモサイト（動画背景型）

デモサイト

動画を背景にして大人っぽく作ったサンプルサイトです。

実際のサイトはこちら

このデザインの作り方は note（こちら）で公開しています。

（有料記事：100円）

大サービス中！

http://wpdemopresents.com/swell02/

デモサイト（シンプル）

デモサイト

左側にナビを固定した珍しいデザインのサンプルサイトです。

実際のサイトはこちら

このデザインの作り方は note（こちら）で公開しています。

（有料記事：380円）

お得な値段設定です。

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

＼サンプルを見るだけでも、役に立つ／

あわせて読みたい

素敵なサイトを作ってくださいね！

＼テーマを変えるなら早いほうがいい／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

【SWELL】購入方法、初期設定、全体デザイン、最初にやること（初心者向け図解で完全案内）

Boon ☆ — Fri, 26 May 2023 11:00:00 +0000

広告：ページ内にてアフィリエイト広告を利用しています。

WordPress のテーマ「SWELL」を使うと、洗練されており見た目もきれいなデザインのブログを作成できます。

「SWELL」テーマを使うことで主にデザイン面を含め記事作成に使う時間を短縮できます。アフィリエイトで収益化を目指すブロガーの強い味方です。

ポイント

本記事では、

「SWELL」の購入方法とインストール手順、サイトの全体デザインなど、

最初にやることを一通り解説します。

初心者向け図解での完全案内です。

SWELLの導入・設定手順

SWELL の購入手順

「SWELL」テーマの購入を購入します。わかりやすく解説します。

■ SWELL の購入

本サイトを経由して SWELL をご購入いただける場合は、以下のリンクからのご購入をお願いいたします。

＼テーマを変えるなら早いほうがいい／

https://wpdemopresents.com/swell03/

以下のSWELL公式ページが表示されます。

表示されるサイト右上の「購入する」ボタンから、SWELL を購入してください。

画面の案内に従って操作することで購入～ダウンロードできます。

操作方法

サイトから「購入する」ボタンをクリックする
利用規約に同意して「SWELL」を購入するをクリックする
クレジットカード情報を登録する
SWELLマイページへの登録を行う
SWELLのファイルをダウンロードする

■ ファイルをダウンロードする

SWELL ご購入後、サイト画面上の手順に従ってSWELLのファイル（２個）をダウンロードします。

ダウンロードするファイル

swell-x-x-x.zip

swell_child.zip

「swell-x-x-x.zip」の x-x-x には数字が入ります。ご購入時期によって数字は変わります。

SWELL のインストールとユーザー認証

■ 親テーマのインストール

SWELLは「親テーマ」と「子テーマ」の２個をインストールして利用します。両方必要です。

先に親テーマをインストールします。

WordPress の管理画面から「外観」→「テーマ」を選択します。

「新規作成」ボタンをクリックします。

「テーマのアップロード」ボタンをクリックします。

「ファイルの選択」ボタンをクリックして、公式サイトからダウンロードしたファイル「swell-x-x-x.zip」をアップロードします。

「swell-x-x-x.zip」が表示されたことを確認して「今すぐインストール」をクリックします。

親テーマのインストールが完了です。

■ 子テーマのインストールと有効化

子テーマをインストールします。

親テーマと同じ手順で子テーマ「swell_child.zip」をインストールします。

WordPress の管理画面から「外観」→「テーマ」を選択します。

「SWELL Child」テーマの「有効化」ボタンをクリックして、テーマを有効化します。

子テーマが有効化されたことを確認します。

子テーマのインストールと有効化完了です。

■ SWELL のユーザー認証を行う

SWELL のユーザー認証を行うことで利用サイトとして登録されバージョンアップなどの案内が届きます。

WordPress の管理画面から「ダッシュボード」などを選択すると上部にSWELLのユーザー認証を促すメッセージを表示します。

「ユーザー認証」のリンクをクリックします。

メールアドレスを入力して「認証リクエストを送信」ボタンをクリックします。

会員登録

認証にはSWELL会員サイトへの登録が必要です。

未済の方は「SWELL会員サイトへの登録」リンクをクリックして登録を実施してください。

入力したメールアドレス宛に認証用情報が届くので内容に従って認証を実施します。認証後に「アクティベートを完了」ボタンをクリックします。

ユーザー「認証完了」を確認して完了です。

SWELL の全体設定

■ WordPress 設定（サイト基本情報）

サイトのタイトル、キャッチフレーズ、サイトアイコンを設定します。

WordPress の管理画面から「外観」→「カスタマイズ」→「WordPress 設定」→「サイト基本情報」を選択します。

サイトのタイトル、キャッチフレーズ、サイトアイコンを設定します。

サイトのタイトルを指定する
キャッチフレーズを指定する
サイトアイコンに画像を指定する

ポイント

「サイトアイコン」の画像のサイズは「512×512」程度の画像を用意します。

■ サイト全体設定（基本カラー）

サイト全体の基本色を設定します。

WordPress の管理画面から「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」を選択します。

サイト全体のカラーを設定していきます。

ポイント

右側にサイトのイメージを表示します。

設定内容がリアルタイムに反映されるので、実際の雰囲気を見ながら設定できます。

■ サイト全体設定（基本デザイン）

サイト全体のフォントを設定します。

WordPress の管理画面から「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」を選択し、メインのフォントを設定します。

ポイント

「ベースとなるフォント」に「ヒラギノゴシック > メイリオ」を設定すると Windows でもかわいいフォントになってよい感じです。

■ カテゴリー作成

サイトのカテゴリーを設定します。

WordPress の管理画面から「投稿」→「カテゴリー」を選択し、カテゴリーを作成します。

カテゴリーごとにアイキャッチ画像を設定します。

ポイント

アイキャッチ画像のサイズは「1200×630」程度がおすすめです。

※ 一般的なアンドロイドスマホで撮った写真を縮尺すると「1200×975」になります。こちらもおすすめです。

■ メニュー作成

グローバルナビ（ヘッダーメニュー）を作成します。

メニューは日本語メニューの下に英単語を補助で表示するとオシャレですね。

WordPress の管理画面から「外観」→「メニュー」を選択します。

「説明」欄の表示

英単語を表示するための事前準備です。

「表示オプション」を開き「説明」をチェックする

「グローバルナビ」メニューの作成

メニューを作成します。

メニュー名を入力して、「メニューの枠」を作ります。

「メニュー名」を設定する
「グローバルナビ」をチェックして「メニューを作成」をクリックする

「グローバルナビ」メニュー項目の設定

メニュー項目を設定していきます。

メニューに表示したい項目（カテゴリーや直リンク）を設定します。

メニューを設定する
「説明」欄に、メニューの下に一緒に表示する英単語を設定する

ヘッダーを作る

サイトのヘッダー部分をデザインしていきます。

グローバルナビ（ヘッダーメニュー）は既に表示されています。左側のログなどを設定します。

■ ヘッダーロゴの設定

左上のロゴを設定します

WordPress の管理画面から、「外観」→「カスタマイズ」→「ヘッダー」を選択します。

「ロゴ画像」を設定する

ポイント

ロゴのサイズは「600×100」程度がおすすめです。

フッターを作る

サイトのフッター部分をデザインしていきます。

■ フッターメニューを作成する

あたらしいメニューを作成する

WordPress の管理画面から「外観」→「メニュー」を選択し、フッターメニューを作成します。

「新しいメニューを作成しましょう」をクリックする

「フッター」メニューの作成

「メニュー名」を設定する
「フッター」をチェックして「メニューを作成」をクリックする

「フッター」メニュー項目の設定

メニュー項目を設定していきます。

メニューに表示したい項目（カテゴリーや直リンク）を設定します。

メニューを設定する

サイドバーを作る

サイドバーを設定します。

■ サイドバーの初期化

サイドバーには標準でいくつかのウィジェットが設定されています。一度全て消しましょう。

WordPress の管理画面から、「外観」→「カスタマイズ」→「ウィジェット」→「共有サイドバー」を選択します。

標準で設定されているブロック（５個）をすべて削除する

■ サイドバーのおすすめ

サイドバーに表示するおすすめを紹介します。

プロフィールを設定
「検索」を配置
「カテゴリー」を配置
「目次」を配置

プロフィールの設定

プロフィールを表示しましょう。

「SWELL プロフィール」ウィジェットを配置する
「名前」を設定する
「プロフィール文」を設定する
「アイコン画像」を設定する
「プロフィール背景画像」を設定する

ポイント

「アイコン画像」の画像のサイズは「512×512」、「プロフィール背景画像」の画像のサイズは「1200×630」または「1200×675」がおすすめです。

「検索」ウィジェットの設定

検索ウィジェットを配置しましょう。

「検索」ウィジェットを配置する

「カテゴリー」ウィジェットの設定

「カテゴリー」ウィジェットを配置しましょう。

「カテゴリー」ウィジェットを配置する

追尾サイドバーの設定（目次設定）

「目次」ウィジェットを配置しましょう。

WordPress の管理画面から、「外観」→「カスタマイズ」→「ウィジェット」→「追尾サイドバー」を選択します。

「SWELL 目次」ウィジェットを配置する

記事エリアを設定する

記事エリアの各設定を行います。

■ 「投稿・固定ページ」設定

アイキャッチ画像の設定

記事に対するアイキャッチの設定です。

WordPress の管理画面から、「外観」→「カスタマイズ」→「投稿・固定ページ」→「アイキャッチ画像」を選択します。

「本文の始めにアイキャッチ画像を表示」のチェックを外す

ポイント

記事の上部にアイキャッチ画像を自動的に表示する機能です。必ずしも表示したいわけでは無い（表示する場合は手動で画像を配置すればよい）ので、チェックを外すことを推奨します。

コンテンツのデザイン（リンクのアンダーラインの設定）

テキストリンクのアンダーラインの有無を設定します。

WordPress の管理画面から、「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」を選択します。

「テキストリンクにアンダーラインを付ける」をチェックする

ポイント

SNSシェアボタンの設定

SNSシェアボタンの設定をします。

WordPress の管理画面から、「外観」→「カスタマイズ」→「投稿・固定ページ」→「SNSシェアボタン」を選択します。

SNSボタンに関する設定を行う

記事下エリアの設定

「著者情報を表示」を設定します。

WordPress の管理画面から、「外観」→「カスタマイズ」→「投稿・固定ページ」→「記事下エリア」を選択します。

「著者情報を表示」のチェックを外す

ポイント

記事に「著者情報」を自動で表示する機能です。必ずしも表示したいわけでは無い（表示する場合は手動で別途用意した情報を配置すればよい）ので、チェックを外すことを推奨します。

ブロックエディタの基本操作と記事作成

ブロックエディタの基本的な使い方（記事の書き方）を解説します。

■ 新規記事作成

WordPress の管理画面から「投稿」を選択し「新規作成」ボタンで記事を新規作成します。

「タイトル」に記事のタイトルを入力する

記事は「ブロック」という部品を用いて作っていきます。

最初の１行目をクリックして左上の「＋」ボタンをクリックすることでブロック一覧を表示する
任意のブロック（作りたいブロック）をクリックし、ブロックを作成する

■ 画像ブロックを利用する

画像ブロックの作り方と、ブロックの基本的な使い方です。

ブロック一覧から「画像」をクリックし、画像ブロックを作る
「アップロード」をクリックして、イメージファイル（ jpeg など）を指定する

作成したブロックに対しては、左上に表示されるメニュー、および、右上の歯車をクリックして表示する設定エリア（プロパティ）で設定する

ポイント

画像を説明するテキスト「ALT」はSEO効果に影響するので必ず設定しましょう。

■ テキスト（本文）ブロックを利用する

テキスト（本文）ブロックの作り方です。

テキストブロックは特にブロックの種類を選ぶ必要はないため、そのままテキストを入力する

■ 見出しブロックを利用する

見出し（章題）ブロックの作り方です。

テキストを入力する
メニューから「見出し」をクリックする

メニューから「見出しのレベル」を設定する

ポイント

H1 は記事タイトルレベルになりますので、基本的には H2～H6 で設定します。

■ 記事の公開

作成した記事の公開方法です。

設定エリアで「投稿」をクリックし、記事の設定エリア表示に切り替える
「カテゴリー」「アイキャッチ画像」「抜粋」などを設定・入力する

設定エリアで「公開」をクリックし、記事を公開する

トップページを作成する

サイトの顔はトップページですね。トップページをデザインします。

■ 記事スライダーを設置する

トップページ上部に最新の記事を左右に動くスライダーで表示する機能です。

ブロガーが「最新記事」を読者に気づいてもらうことに役立ちます。左右にスライドするため見た目にもインパクトがありますね。

WordPress の管理画面から、「外観」→「カスタマイズ」→「トップページ」→「記事スライダー」を選択します。

「記事スライダーを設置するかどうか」で設定する

■ （トップページの）サイドバー有無を設定する

トップページのみサイドバーを表示しないことができます。トップページは画面いっぱい使ってインパクトのあるデザインにしたい場合、有効ですね。

WordPress の管理画面から、「外観」→「カスタマイズ」→「サイドバー」を選択します。

「トップページにサイドバーを表示する」のチェックで設定する

■ メインビジュアルを設定する

SWELL のデザインセンスの塊のような、まさに SWELL を代表する機能の一つが、この「メインビジュアル」です。

トップページ上に大きく表示するイメージ（または動画）で、読者を一気に魅了します。

トップページ上のメインのビジュアル（画像）エリアです。

メインビジュアルの共通設定

メインビジュアルを設定します。

WordPress の管理画面から、「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」を選択します。

「スライド画像 1（PC）」に画像を設定する
「メインテキスト 1」を空（または任意の文字列）にする

ポイント

「メインテキスト 1」には初期設定で「さぁ、始めよう。」が設定されています。空にすることで表示文字を消すことができます。

表示の高さや、画像に対する効果を設定することで、さらに見た目をおしゃれに設定できます。

■ ピックアップバナー（ヘッダーカード）を設定する

画面上部にあるカード型のリンクで、主にカテゴリページへのリンクなどで利用します。

読者はいつでも好きなカテゴリーにワンクリックで移動できる便利な機能です。

ピックアップバナーの作成

ピックアップバナーはヘッダメニューやフッターメニューなどと同様に、「メニュー」によって作成します。

WordPress の管理画面から、「外観」→「メニュー」を選択します。

「新しいメニューを作成しましょう」をクリックする

「メニュー名」を設定する
「ピックアップバナー」をチェックして「メニューを作成」をクリックする

「カテゴリー」から「ピックアップバナー」に表示したいカテゴリをチェックして「メニューに追加」をクリックする

右下の「メニューを保存」をクリックする

「ピックアップバナー」を作成しました。SWELLの標準ではピックアップバナーを表示する設定になっているため、メニューを作成することで自動的に表示されます。

ピックアップバナーの共通設定

ピックアップバナーに関する各設定を行うことができます。

WordPress の管理画面から、「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」を選択します。

並べる数（列数）やバナーのデザインなどを設定する

ポイント

トップページ以外（記事ページなど）にもピックアップバナーを表示する場合、設定の下方にある「トップページ以外の下層ページにも表示する」をチェックします。

■ 固定記事をトップページに設定する

トップページを自由にカスタマイズするために、固定記事をトップページに設定します。

標準

標準ではトップページに記事一覧が並ぶ（ブログ型）

固定記事

トップページを固定記事にすることで自由にデザインできる（サイト型）

新規に固定記事を作成する

固定記事を新規作成します。

WordPress の管理画面から、「固定記事」を選択します。

固定記事を新規作成する
固定記事に任意のタイトルを入力する
固定記事を「公開」する

固定記事をトップページに設定する

トップページを差し替えます。

WordPress の管理画面から、「外観」→「カスタマイズ」→「WordPress設定」→「ホームページ設定」を選択します。

「ホームページの表示」に「固定ページ」を設定する
「ホームページ」に先ほど作成した固定ページを設定する

指定した固定記事内でデザインしていくことで、トップページを自由自在に変えていくことが可能です。

その他の設定

その他、細かい設定をしていきます。

■ サイト全体のアイキャッチ画像と抜粋を設定する

サイト全体（サイトのトップページ）のアイキャッチ画像の指定をします。

SWELL では、「SEO SIMPLE PACK」プラグインを用いて設定します。

ポイント

「SEO SIMPLE PACK」プラグインは、WordPress の管理画面から「プラグイン」を選択し、「新規作成」ボタン押下後、右上の「検索」フィールドから検索し、インストールできます。

インストールして「有効化」します。

「SEO SIMPLE PACK」プラグインを有効化後、サイト全体（サイトのトップページ）のアイキャッチ画像を設定します。

WordPress の管理画面から、「SEO PACK」→「OGP設定」を選択します。

サイト全体の「アイキャッチ画像」を設定する

ポイント

アイキャッチ画像のサイズは「1200×630」程度がおすすめです。

※ 一般的なアンドロイドスマホで撮った写真を縮尺すると「1200×675」になります。こちらもおすすめです。

完成

サイトの基本的な設定、デザインの完成です。

SWELLではもっと細かいデザインや工夫ができますので、より素敵なサイトに育ててください。

以下の「デモサイト（シンプルデザイン）」は、さらにSWELLの機能を使って、より細かくデザイン設定したサンプルです。参考にしてください。

サンプルサイト

デモサイト（シンプルデザイン）

SWELLテーマを利用したシンプルなデザインサンプルです。
SWELLの機能をそのまま素直に使って作ったサイトになります。

実際のサイトはこちら

本サンプルサイトデザインの作り方の詳細は note で紹介しています。

note の紹介記事はこちらから

note の紹介記事はこちら

まとめ：購入方法とインストール手順、初期設定、サイトデザイン方法

WordPress のテーマ「SWELL」を使うと、洗練されており見た目もきれいなデザインのブログを作成できます。

SWELLは以下の手順で購入・導入します。

主な手順

SWELL を購入～ダウンロードする
親テーマと子テーマをインストールする
SWELL の全体設定を行う
ヘッダーをつくる
フッターをつくる
サイドバーをつくる
記事エリアを設定する
記事を書く（ブロックエディタの基本操作と記事作成）
トップページを作成する
そのほかの設定を行う

SWELLのインストール完了です。サイト運営を楽しみましょう！

＼テーマを変えるなら早いほうがいい／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。