2023ワードプレスのテーマ「SWELL」でWebサイトやブログを作成しようと思い、SWELLの始め方を知りたい人は多いのではないだろうか。SWELLの始め方は、実際にやってみるとシンプルだ。何かしら案内がないとワードプレスへの導入(インストール)や初期設定のやり方で戸惑ってしまう。そこで、当記事ではワードプレス初心者に向けて、SWELLの始め方や初期設定について分かりやすく画像付きで解説している。......ただ、当記事ではSWELLの始め方を徹底的に解説しているため、目次が大変長くなってしまうのでSWELLの導入にはこちらの章を役立ててほしい。SWELLを買うべきか迷っている人へ(クリックで開く)有料テーマであるSWELLの料金は決して安くない。買うべきか迷っている人もいるだろう。結論からいえば他有料テーマよりもSWELLはおすすめだ。その理由を説明している。残念ながらSWELLでは2020年以降セールは一切行われておらず、今後行われる可能性も少ない。一度買えば複数サイトで使いまわしできる。現行の有料テーマに機能性・デザイン性・カスタマイズ性においてSWELLを超えるものは無い。何よりページ表示スピードが最適化されており、SEO面でも高い効果を発揮するので、有料テーマに迷うならSWELL一択だ「サイト運営に慣れるまで無料テーマ(Cocoon等)で良いかもしれない」テーマ移行用のプラグインはあるが、それでも記事数が多いほど移行作業が膨大になる。今後SWELLの導入予定があるのなら、記事が少ないうちに買っておくことをおすすめするSWELL公式サイトSWELLの評判がやたらと良い理由や、実際の利用者のレビューを判断材料にしたい人は、次の記事で詳しく紹介しているので参考に役立ててほしい。ワードプレステーマを本格的なものにしようと探していると、やたら評判の良いレビューが多い「SWELL(スウェル)」の名前を見かけることが多いのではないでしょうか。当記事ではSWELLの始め方をステップ分けして解説している。上から順番に参考にしてもらえれば、SWELLでサイトやブログの記事を書き始めるまでの設定が完了するようになっている。以下のコンテンツをクリックすればSWELLの導入方法を解説した各章に飛べるようにしてある。知りたい部分だけかいつまんで目次のように活用してくれれば幸いだ。SWELLの始め方3ステップ※クリックで解説している章にジャンプSTEP1SWELLのインストールSTEP2SWELLのユーザー認証STEP3SWELL推奨プラグインの追加SWELLの始め方3ステップが完了すれば、SWELLを使い始めることができる。当記事では、SWELLの初期設定方法も解説しているので併せて参考にしてほしい。着せ替えデモサイト【SWELLの始め方1】テーマのインストール導入方法SWELLの始め方ステップ1として、まずはSWELLの購入方法からワードプレスへのインストール方法までを解説する。SWELLの購入方法SWELLテーマを購入するまでの手順を説明する。公式サイトからダウンロードページにアクセスする利用規約に同意し購入ボタンをクリックするクレジットカード情報を入力し、テーマを購入するSWELL購入方法1:公式サイトからダウンロードページにアクセスするまずは、次のボタンよりSWELL公式ページにアクセスしよう。SWELL公式サイトSWELL公式ページにアクセスしたら、トップページ右上にある[購入する]をクリックし、ダウンロードページに遷移する。SWELL購入方法2:利用規約に同意し購入ボタンをクリックするSWELLダウンロードページの画面下部までスクロールすると[SWELLを購入する]ボタンがあるので、利用規約に同意してボタンをクリックしよう。SWELL購入方法3:クレジットカード情報を入力し、テーマを購入するSWELLの支払いに必要なクレジットカード情報を入力し、[支払う]ボタンをクリックし購入を完了させる。SWELLの支払いはクレジットカードが一般的だが、一部デビットカードやバーチャルカードでも決済できるようだ(筆者はJCBのバーチャルカードで決済した)。購入時のメールアドレスに注意SWELL購入時に利用するメールアドレスは、今後のメンバーズサイト会員登録、及びユーザー認証時に同じメールアドレスが必要となる。購入時のメールアドレスは正しく受信できる自身のものを登録しておくこと支払いが完了すると、SWELL公式よりテーマのzipファイルが添付された購入完了メールが届く。購入完了メールからzip形式のSWELLテーマをダウンロードし、WordPressにインストールして使い始めることができる。「ユーザー認証」や「着せ替えデータのダウンロード」などを利用する場合、SWELL会員である必要があるので、このままSWELL公式フォーラムに新規会員登録することをおすすめする。SWELL公式フォーラムに会員登録する方法SWELLテーマの購入が完了したら、SWELL公式フォーラムへの会員登録を完了させる。公式フォーラムにアクセスするSWELLERS’に新規会員登録する登録完了メールを確認するSWELL会員登録方法1:公式フォーラムにアクセスする先程のSWELL公式ページに戻り、トップページ右上の[フォーラム]をクリックする。SWELLERS’(公式フォーラム)のページに移動するので[会員登録はこちらから]をクリック。SWELL会員登録方法2:SWELLERS’に新規会員登録する新規会員登録フォームに「ユーザー名」「メールアドレス※」「パスワード」を入力し、利用規約に同意したら[登録]をクリックする。SWELLERS’の会員登録に必要なメールアドレスは、SWELLテーマ購入時に利用したものと同じでなくてはならない。「入力されたメールアドレスではSWELLLの購入履歴が見つかりませんでした。」と表示される時は...当サイトは購入履歴が確認できるアドレスでのみユーザー登録が可能です。購入したのにメールアドレスが認証されない場合は、お問い合わせページからご連絡ください。引用:SWELL公式サイト(2022/11/17時点)SWELL会員登録方法3:登録完了メールを確認するSWELLERS’の会員登録が完了すると、登録したメールアドレス宛に次のような登録完了メールが届く。以上でSWELL公式フォーラムへの新規登録が完了した。次のSWELL導入手順は、公式フォーラムよりテーマファイルをダウンロードする。SWELLのダウンロード方法SWELLERS’の会員登録が完了したら、SWELLのテーマファイルをPCにダウンロードする。SWELLERS’にログインするテーマファイルをダウンロードするSWELLダウンロード方法1:SWELLERS’にログインする新規会員登録が完了したら、公式フォーラムSWELLERS’トップページのメニュー右上にある[ログイン]をクリックし、ログインページに遷移する。会員登録時に使用したメールアドレス(購入時と同じもの)とパスワードを入力し、「CAPTCHAコード」を入力した後、[ログイン]をクリックする。ログインすると、トップページ右上にあるメニューから[マイページ]にアクセスできるようになる。マイページに遷移し、画面を下部までスクロールすると「SWELL製品ダウンロード」の項目があるはずだ。この項目にあるリンクからSWELLのテーマファイルをダウンロードすることができる。SWELLテーマのダウンロードリンクには、「最新版の本体(親テーマ)」と「子テーマ」の二つがあるので、両方共ダウンロードする。以上でSWELLテーマのダウンロードが完了した。SWELLのテーマのzipフォルダは解凍しない通常、テーマファイルはzip形式(圧縮状態)のままWordPressにアップロードする。親、子テーマそれぞれzip形式でダウンロードされるが、解凍せずに分かりやすいフォルダに格納しておこう次のSWELL導入手順では、テーマを反映させたいサイトやブログのWordPressにテーマファイルをインストールする。SWELLのインストール方法SWELLのテーマファイルのダウンロードができたら、WordPressにSWELLテーマのインストールを完了させる。クリック子テーマを有効化するSWELLインストール方法1:WordPress管理画面テーマページの[新規追加]をクリックするSWELLテーマを導入するサイトやブログのWordPress管理画面にログインしよう。WordPressへのログインが完了したら、管理画面の左のメニューにある[外観]⇒[テーマ]よりテーマページに移動し、[新規追加]ボタンをクリックする。SWELLインストール方法2:[テーマのアップロード]をクリックするテーマの追加ページに遷移するので、そのまま[テーマのアップロード]をクリックする。SWELLのインストール方法3:[ファイルを選択]をクリックするテーマファイルのアップロードページに遷移するので、[ファイルを選択]をクリックする。SWELLインストール方法4:「親テーマ(swell-x-x-x-x)」のファイルを選択するアップロードフォルダのウィンドウが開くので、先程ダウンロードしたSWELLテーマ二つのうち「親テーマ(swell-x-x-x-x)」を選択し[開く]をクリックする。当記事のSWELLの始め方のインストール手順では、先に親テーマをWordPressにアップロードしていが、最終的には親子二つインストールした上で子テーマ側を有効化すれば良いので、アップロードの順番はどちらでも構わないSWELLインストール方法5:[今すぐインストール]をクリックする親テーマを選択して開くと、インストールするファイル名が表示される。ファイル名が正しいことを確認した上で[今すぐインストール]をクリックする。SWELLインストール方法6:[テーマページに移動]をクリックする親テーマのインストールが完了すると、次のような画面が表示される。続けて「子テーマ」のアップロードも行うので、[テーマページへ移動]をクリックし一旦テーマページに戻る。SWELLインストール方法7:再度[新規追加]をクリックする続けて親テーマと同じように、WordPressに子テーマもインストールしていこう。テーマページに戻ったら、先程と同様[新規追加]をクリックする。SWELLインストール方法8:再度[テーマのアップロード]をクリックテーマの追加ページの[テーマのアップロード]をクリックする。SWELLインストール方法9:再度[ファイルを選択]をクリックテーマのアップロードページの[ファイルを選択]をクリックする。SWELLインストール方法10:「子テーマ(swell_child)」のファイルを選択するアップロードフォルダのウィンドウが開くので、「子テーマ(swell_child)」を選択し[開く]をクリックする。クリックファイル名が正しいことを確認した上で[今すぐインストール]をクリックする。SWELLインストール方法12:子テーマを「有効化」する子テーマのインストールが完了したら、[有効化]をクリックする。この画面で[テーマページへ移動]をクリックしてしまっても、テーマページから子テーマを有効化すればOKだ。念のため、テーマページで正しくWordPressにSWELLがインストールできているか確認しておこう。CHILD)」が有効になっていること以上でSWELLテーマのインストールは完了だ。ちなみにWordPressにSWELLテーマをインストールしても、「ユーザー認証」が行われていないと次のような警告文が出る。次のSWELLの始め方のステップでは、ユーザー認証の方法を解説している。【SWELLの始め方2】ユーザー認証SWELLの始め方ステップ2として、テーマをインストールしたサイトやブログのユーザー認証を完了させる手順を解説する。SWELLのユーザー認証を済ませておかないと、SWELLテーマの最新バージョンがリリースされた際に、アップデートを行うことができない。ユーザー認証を行わなくてもSWELLを利用できるので後回しでも構わないが、ユーザー認証の作業は数分で完了するのでやっておくことをおすすめする。SWELLユーザー認証方法SWELLのインストールが完了したら、WordPressからそのままSWELLのユーザー認証を行う。WordPress管理画面のアクティベート設定で認証リクエストを送信する受信したメールを開き、認証用URLをクリックする公式フォーラムでユーザー認証の完了を確認するSWELLユーザー認証方法1:WordPress管理画面のアクティベート設定で認証リクエストを送信するWordPress管理画面の左のメニューにある[SWELL設定]⇒[アクティベート]をクリックし、SWELLアクティベート設定ページに遷移する。メールアドレスの入力フォームがあるので、SWELL購入時と公式フォーラム登録時に利用したものと同じメールアドレスを入力し[認証リクエストを送信]をクリックする。SWELLユーザー認証方法2:受信したメールを開き、認証用URLをクリックするSWELLアクティベート設定ページに入力したメールアドレス宛に、「認証用URL」が添付されたメールが届くのでURLをクリックする。SWELLユーザー認証方法3:公式フォーラムでユーザー認証の完了を確認する認証用URLをクリックすると公式フォーラムに遷移し、画面右下にユーザー認証が完了した旨のメッセージがポップアップする。ポップアップ内の[自分のサイトに戻る]をクリックすると、再度WordPressのSWELLアクティベート設定ページに戻り、ユーザー認証が完了していることが確認できる。以上でSWELLのユーザー認証は完了だ。次のSWELLの始め方のステップでは、テーマを使う上で適したプラグインと、そうでないものを紹介している。【SWELLの始め方3】プラグインの最適化SWELLの始め方ステップ3として、テーマを使う上で推奨されるプラグインと、非推奨のプラグインを紹介する。WordPressにSWELLをインストールしたら、プラグイン周りの見直しが必要となる。その理由は次の通りだ。テーマの標準機能だけで補いきれない機能を、プラグインで補完する必要があるから一般的に必須とされているプラグイン機能を標準搭載しており、機能が重複するから以上の理由から、SWELLで推奨されるプラグイン・非推奨とされるプラグインが存在するのである。SWELLのプラグインの導入方法SWELLのプラグインの紹介前に、WordPressでのプラグイン導入方法について軽く触れておこう。WordPress管理画面の左メニューにある[プラグイン]⇒[新規追加]をクリックすると、プライグイン追加ページに遷移する。プライグイン追加ページの右上にある検索フォームにプラグイン名を入力・検索し、プラグインの追加と有効化を行うことができる。SWELLテーマの導入推奨プラグインSWELLに導入すべき推奨プラグインは次の通りだ。重要度「高」としているプラグインはほぼ必須で、それ以外は必要に応じて追加する形で良いだろう。SWELL開発者が作成したシンプルなSEOプラグイン。XMLサイトマップの作成プラグイン。サイトやブログの動作を重くするリビジョンデータを簡単に制限できるプラグイン。WordPressのセキュリティ全般を担うプラグイン。WordPresの記事・画像・プラグインデータなどのバックアッププラグイン。可愛いデザインのブロックエディタの拡張プラグイン。Amazon・楽天・Yahoo!の商品を検索し、アフィリエイトリンクを管理できるプラグイン。開発にSWELL公式が関わっているSWELLテーマの非推奨プラグイン次に、SWELLを使う上で不要なプラグインと、不具合の原因となりそうなプラグインを紹介する。基本的に、クラシックエディターや高速化関連のプラグインと機能が重複するため、SWELLでは非推奨とされている。WordPressで作成するサイトやブログでは、推奨されていることの多い定番プラグインもいくつか含むので要注意だ。理由が無い限りは、表のプラグインは削除してしまって問題ない。SWELLで不具合報告が挙がっているため【SWELLの始め方】初期設定(購入後)SWELLの始め方の説明が終わったところで、購入後の「初期設定」について解説する。SWELLの初期設定には、サイト全体の見た目のデザインやGoogleアナリティクスやサーチコンソールとの連携設定などが挙げられる。SWELLのデザインはカスタマイズ性に優れる反面、設定項目が多いと感じる人もいるだろう。いった場合は、SWELLの着せ替え用デモ(テンプレート)をベースにし、デザインをカスタマイズすることも可能だ。SWELL初期設定:デザインの設定SWELLの初期設定として、サイト全体的に適用される「デザインの設定」を解説する。SWELLテーマを適用したワードプレスでは、好みに応じて好きにサイトデザインを細かくカスタマイズできる。SWELLのデザインに関することは「テーマカスタマイザー([外観]⇒[カスタマイズ])」で設定するのが一般的だ。カスタマイザーはデザインの設定をリアルタイムでプレビューできるので、適用後のサイトの見た目を確認しつつ調整することができる。SWELLのデザイン設定の各項目について詳しく解説していく。基本カラー設定SWELLで作成したサイト全体に適用される色の設定。基本カラーの設定場所[外観]⇒[カスタマイズ]⇒[サイト全体設定]⇒[基本カラー]SWELLの基本カラーで設定した色は、サイトやブログの次のような箇所に適用される。サイトの背景全体に適用されるSWELLの基本カラーの中でも、メインカラーはサイトやブログのテーマカラーともいえるだろう。メインカラーには白色でテキストが重なるため、淡い色に設定するとテキストが読みづらくなってしまう点には注意したい。基本デザイン設定SWELLで作成したサイト全体に適用される基本デザインについての設定。基本デザインの設定場所[外観]⇒[カスタマイズ]⇒[サイト全体設定]⇒[基本デザイン]SWELLの基本デザイン設定は、サイトやブログの次のような箇所に適用される。サイトの背景に画像を設定するテーマカスタマイザーで実際に各デザインを変更してみて、サイトの見た目がどう変わるかを目視で確認しつつ調整していくと良いだろう。お知らせバーの設定SWELLで作成したサイト全体に表示される「お知らせバー」の設定。お知らせバーの設定場所[外観]⇒[カスタマイズ]⇒[サイト全体設定]⇒[お知らせバー]SWELLのお知らせバーは、サイトやブログ内の全ページの上部に表示される。標準の初期設定では非表示となっている。イベントやキャンペーン情報など、訪問者に告知したいメッセージを目立たせたいときに役立つだろう。お知らせバーの色や質感などデザインを設定する見出しデザイン設定SWELLで作成したサイトの記事や固定ページで使う見出し(hタグ)のデザインの設定。見出しデザインの設定場所[外観]⇒[カスタマイズ]⇒[投稿・固定ページ]⇒[コンテンツのデザイン]SWELLの見出しデザイン設定では、見出しの見た目を変えることができる。全体カラーで設定したメインカラーとは別の色を設定することも可能だ。h4タグの見た目を選択するサイトやブログ記事の見出しは、もっとも使用頻度が高いタグで読者の目に留まる部分だ。そのため、本文のテキストとメリハリが付く見出しデザインを選択することをおすすめする。目次デザイン設定SWELLで作成したサイトやブログの記事中に表示される目次のデザインの設定。目次デザインの設定場所[外観]⇒[カスタマイズ]⇒[投稿・固定ページ]⇒[目次]SWELLの目次デザイン設定では、目次の見た目だけではなく、表示・非表示の切り替えもできる。記事中に見出しがいくつ以上あれば目次を表示するかを設定するSWELL初期設定:エディターの初期設定SWELL初期設定として、主に記事中のテキストや装飾のデザインに適用されるエディター設定について説明する。記事毎にいちいち装飾のカラーやパターンを作る必要はなく、エディター設定さえしておけば一括で適用されるのでとても便利な機能だ。カラーパレット設定SWELLで作成したサイトやブログの記事中の「テキストの色や背景色」に利用するカラーセットを設定。カラーパレットの設定場所[SWELL設定]⇒[エディター設定]⇒[カラーセット]⇒[カラーパレット設定]SWELLのカラーパレット設定では、8種類のカラーパレットが作成できる。記事の本文でテキストを色分けし、メリットやデメリットを強調したいときなどに役立つはずだ。(使用例)SWELLのカラーパレット設定では、このようにテキストの色を変更することができるSWELLのカラーパレット設定では、このようにテキストの背景色にも設定することができるリストのカラー設定SWELLで作成したサイトやブログの記事中の「リスト(liタグやolタグ)」に適用されるカラーセットを設定。リストカラーの設定場所[SWELL設定]⇒[エディター設定]⇒[カラーセット]⇒[リスト設定]SWELLのリストカラー設定では、5種類のリストそれぞれに1色ずつ色を設定できる。(使用例)SWELLのリストカラーで設定では、リストの色に適用されるSWELLのリストカラーで設定では、リストの色に色に適用されるSWELLのリストカラーで設定では、リストの色に色に適用されるSWELLのリストカラーで設定では、数字リストの色にも適用されるSWELLのリストカラーで設定では、数字リストの色にも適用されるSWELLのリストカラーで設定では、数字リストの色にも適用されるキャプションブロックのカラー設定SWELLで作成したサイトやブログの記事で利用できる「キャプションブロック(ラベル付き囲い)」に適用されるカラーセットを設定。リストカラーの設定場所[SWELL設定]⇒[エディター設定]⇒[カラーセット]⇒[キャプションブロック設定]SWELLのキャプションブロック設定では、3種類のキャプションボックスにそれぞれ2色を設定できる。(使用例)キャプションブロックSWELLのキャプションブロック設定では、キャプション部分と内側の背景色の色を変更できるキャプションブロックSWELLのキャプションブロック設定では、キャプション部分と内側の背景色の色を変更できるキャプションブロックSWELLのキャプションブロック設定では、キャプション部分と内側の背景色の色を変更できるQ&Aのカラー設定SWELLで作成したサイトやブログの記事で利用できる「FAQ」のカラーセットを設定。リストカラーの設定場所[SWELL設定]⇒[エディター設定]⇒[カラーセット]⇒[Q&A設定]SWELLのQ&A設定では、QとAそれぞれに1色ずつ色を設定できる。(使用例)SWELLのQ&A設定では何ができますか?このように、QとAそれぞれに色を設定することができます。ボーダーのデザイン設定SWELLで作成したサイトやブログの記事で利用できる「ボーダー(囲い)」のデザインを設定。ボーダーデザインの設定場所[SWELL設定]⇒[エディター設定]⇒[ボーダーセット]SWELLのボーダーセットでは、囲いの線の種類や太さ、色を4種類設定できる。(使用例)SWELLのボーダーセットでは、囲いの線の種類や枠の太さを設定できるSWELLのボーダーセットでは、囲いの線の種類や枠の太さを設定できるマーカーの設定SWELLで作成したサイトやブログの記事中のテキスト装飾「マーカー」の設定。ボーダーデザインの設定場所[SWELL設定]⇒[エディター設定]⇒[マーカー]SWELLのマーカー設定では、マーカーの色とスタイルを4セット設定できる。本文中にここぞとばかりに主張したいテキストがあるときに役立つだろう。マーカーの色によっては文字の視認性が悪くなるので、太字(bタグ)と組み合わせて利用するのがおすすめだ。(使用例)SWELLのマーカー設定では、テキストを装飾するマーカーの色やスタイルを変更できるマーカーでテキストを装飾すると、読みづらくなるので太字と組み合わせると良いだろうボタンのデザイン設定SWELLで作成したサイトやブログで利用する「ボタン」のデザインを設定。ボタンデザインの設定場所[SWELL設定]⇒[エディター設定]⇒[ボタン]SWELLのボタン設定では、ボタンのカラーやグラデーション、スタイルやアニメーションなどを3セット設定できる。アフィリエイトのコンバージョンボタンなどに使うのなら、アニメーションなどで一際目立つボタンにデザインすると良いだろう。(使用例)SWELLの標準的なボタン色とサイズ、アニメーションを設定したボタンアイコンボックスの設定SWELLで作成したサイトやブログの記事で利用する「アイコンボックス」のデザインを設定。アイコンボックスデザインの設定場所[SWELL設定]⇒[エディター設定]⇒[アイコンボックス]SWELLのアイコンボックスの設定では、各種アイコンボックスの色やスタイルを設定できる。アイコンボックスは、記事中で本文の捕捉や注意喚起を行いたいときに役に立つ。(使用例)SWELLのアイコンボックスは捕捉文があるときに利用すると良いだろうアイコンボックスを使うと、読者への注意喚起文を目立たせることができるふきだしのデザイン設定SWELLで作成したサイトやブログの記事で利用する「ふきだし」のデザインを設定。ふきだしデザインの設定場所[SWELL設定]⇒[エディター設定]⇒[ふきだし]ネットの記事を見ていると、ふきだしを使って本文の一部を会話風に装飾しているサイトやブログを目にしたことは無いだろうか。SWELLでは、テキストを入れるふきだしのデザインを5セット設定し、登録できる。ふきだしの使用頻度が高い場合、ふきだし設定ページで画像やデザインを登録しておけば、記事の編集画面で簡単に呼び出すことができるので執筆作業がラクになるだろう。(使用例)SWELLのふきだし設定では、このように吹き出しのカラーを変更できる「発言」風や「心の声」風にしたり、外枠を付けたりなど吹き出しのデザインも変更可能だブログカードのデザイン設定SWELLで作成したサイトやブログの記事内のリンクデザイン「ブログカード」のデザイン設定。ブログカードデザインの設定場所[SWELL設定]⇒[エディター設定]⇒[その他]SWELLでは、内部・外部リンクにブログカードを設定でき、デザインの種類を選択することができる。自分のサイトやブログ内の別記事(内部リンク)や、記事を書くときに参考にした別サイト(外部リンク)を目立たせたいときに利用する。(使用例)SWELLでサイトやブログを作るときにおすすめのレンタルサーバーは次の記事で紹介している(内部リンク)。個人サイトやビジネスでWEBサイトを開設する際、コストを抑えるために無料レンタルサーバーを検討している方は多いはずだ。レンタルサーバーの無料プランやアメブロな...なお、SWELLの使い方で困ったら公式フォーラム「SWELLERS’」で質問してみると良いだろう(外部リンク)。SWELLユーザー限定の新会員サイトです。SWELLユーザー限定の新会員サイトです。引用のデザインSWELLで作成したサイトやブログの記事中で使う「引用」の囲いのデザイン設定。引用デザインの設定場所[SWELL設定]⇒[エディター設定]⇒[その他]SWELLでは、他サイトの文章を引用する際に利用する「引用(blockquoteタグ)」の囲いデザインを変更できる。引用の囲いはデザインというよりも、本文と引用部分を明確に区別し、無断転載ではないことを明示するための重要な部分だ。引用タグを用いることでGoogleに対しコピーコンテンツではないことを伝える目的がある。(使用例)ワードプレステーマ「SWELL」では、購入後のキャンセルや返品・返金には応じてもらえないので注意しよう。いについても対応はいたしかねますので充分ご注意ください。通信販売のためクーリングオフは適応されません。デモサイトを十分にご確認の上、ご購入ください。引用:SWELL公式サイト/ご利用規約(2022/11/19時点)SWELL初期設定:トップページの設定SWELLの初期設定として、トップページのデザインの設定を解説する。法人のコーポレートサイトやeコマースサイトにおいて、トップページは特に重要な部分なのでデザインにはこだわりたいところだ。コーディングやデザインの知識が無くてもSWELLテーマでは簡単におしゃれなトップページが作成できるのでご安心を。SWELLを使ったサイトやブログのトップページの初期設定方法について解説しよう。メインビジュアルのデザイン設定SWELLで作成したサイトやブログのトップページに表示する「メインビジュアル(ページ上部に掲載する大きい画像)」の設定。メインビジュアルの設定場所[外観]⇒[カスタマイズ]⇒[トップページ]⇒[メインビジュアル]SWELLのメインビジュアルでは、画像だけではなく動画もメインビジュアルに設定することができる。メインビジュアルはサイト訪問者の目に最初に飛び込むエリアなので、サイト全体で伝えたいメッセージや印象的な画像や動画を利用すると良いだろう。メインビジュアル上に掲載するテキストやボタンを設定するピックアップバナーの設定SWELLで作成したサイトやブログのトップページに表示する「ピックアップバナー(任意に設定したページへ飛ぶメニュー)」の設定。ピックアップバナーデザインの設定場所[外観]⇒[カスタマイズ]⇒[トップページ]⇒[ピックアップバナー]SWELLのピックアップバナーは、基本的に記事スライダーの下のエリアに配置され、訪問者におすすめしたい記事などをアピールできる。ピックアップバナーの上に表示させるタイトルテキストやバナーのデザインを設定するなお、SWELLのピックアップバナーエリアは標準の初期設定では表示されていない。ピックアップバナーと記事スライダーは見た目が似ているが、「任意の記事を表示する」か「新規記事を自動表示する」かで機能が異なる点で区別できる。ピックアップバナーに任意のページを表示させる際の設定場所はカスタマイザーとは異なるため、別に解説する。「メニュー構造」の項目内「メニュー設定」内の「ピックアップバナー」にチェックを入れる「メニュー項目を追加」の項目内にある固定ページや投稿ページなど任意のページにチェックを入れ、[メニューに追加]をクリックメニューに追加し、「メニュー構造」に移動した記事を開き、「ナビゲーションラベル(ピックアップバナーに表示するテキスト)」や「説明(ページの説明や画像URLを挿入できる)」を入力ナビゲーションラベルに配置したいページを追加し終わったら、右下の[メニューを保存]をクリックして完了ナビゲーションラベルの説明欄に画像URLを入力する場合、あらかじめワードプレスのメディアフォルダ([メディア]⇒[ライブラリ])に追加したい画像がアップロードされており、画像URLを取得できるようにしてある必要がある記事スライダーの設定SWELLで作成したサイトやブログのトップページに表示する「記事スライダー(記事を並べる要素)」の設定。記事スライダーの設定場所[外観]⇒[カスタマイズ]⇒[トップページ]⇒[記事スライダー]SWELLの記事スライダーは、基本的にメインビジュアルの真下のエリアに配置され、標準の初期設定で表示されている。非表示にすることもできるが、トップページ⇒各記事へのクローラビリティが向上するため、SEOの観点では表示しておくことを推奨する。記事スライダーの表示記事数、スライドのアニメーション速度やタイミングを設定する記事スライダーの設定では他にも、記事スライダーのタイトルや背景画像、表示幅や余白量など細かく設定できる。SWELL初期設定:ヘッダー設定SWELLの初期設定として、ヘッダーの設定について解説する。ページ最上部にあるヘッダーは、Googleの検索結果から直接あなたの書いた記事に訪問するユーザーが最初に目にする部分だ。運営者情報やお問い合わせページなどのグローバルメニューを配置することも多いヘッダーエリアの役割は大きい。SWELLを使ったサイトやブログのヘッダーの初期設定方法について解説しよう。※ヘッダー内に任意の要素を配置する方法については、グローバルメニュー設定の章で解説している。ヘッダーカラーの設定SWELLで作成したサイトやブログのヘッダーに表示する「ヘッダーカラー」の設定。ヘッダーカラーの設定場所[外観]⇒[カスタマイズ]⇒[ヘッダー]SWELLのヘッダーエリアの背景色や文字色を設定できる。標準では背景色に白色、文字色にはやや薄い黒色が設定されている。ヘッダーエリアに記載されるテキストの色を設定するヘッダーロゴの設定SWELLで作成したサイトやブログのヘッダーに表示する「ヘッダーロゴ」の画像設定。ヘッダーロゴの設定場所[外観]⇒[カスタマイズ]⇒[ヘッダー]SWELLのヘッダーロゴには、企業ロゴや自社ブランドのロゴ画像を掲載すると良いだろう。個人ブログの場合でも訪問者に印象を残せるため、サイトロゴをお持ちの人はヘッダーロゴ画像を設定しておくことをおすすめする。PCとスマホそれぞれで表示するヘッダーロゴ画像サイズを選択するヘッダーの追従設定SWELLで作成したサイトやブログのヘッダーを「追従させるか」の設定。ヘッダーの追従設定場所[外観]⇒[カスタマイズ]⇒[ヘッダー]SWELLのヘッダーロゴを追従させると、訪問者がページをスクロールさせても常にヘッダーが表示されるようになる。追従ヘッダーにメニューや読んでほしい記事へのリンクを掲載すれば誘導しやすい。スマホ画面では要素を詰め込み過ぎたヘッダーが追従すると、肝心の記事の読みやすさに悪影響を及ぼす恐れがあるので要注意。追従し始めたときのヘッダーの透明度を指定する(0~1の値で設定)ヘッダーバーの設定SWELLで作成したサイトやブログのヘッダー上部に表示する「ヘッダーバー」の設定。ヘッダーの追従設定場所[外観]⇒[カスタマイズ]⇒[ヘッダー]SWELLのヘッダーバーは、サイト上部にあるヘッダーのさらに一段上に表示されるエリアだ。ヘッダーバーにはサイトのキャッチフレーズを記載したり、RSSやサイト内検索、SNSのアイコンを配置したりするのが一般的だ。スマホ環境ではヘッダーバーそのものが表示されない点には注意しておこう。ヘッダーバーにSNSアイコンを表示したり、ヘッダーバー内に何も配置しなくてもバーを表示したり設定できるSWELL標準の初期設定では、ヘッダーバーにはサイトのキャッチフレーズが記載されているが、[キャッチフレーズ設定]で表示・非表示やヘッダーエリアのどの部分に記載するかを設定できる。SWELL初期設定:フッターの設定SWELLの初期設定として、フッターの設定について解説する。ページ最下部にあるフッターエリアには、サイトマップや別で運営しているサイトへのリンクを掲載したりするのに利用する。SWELLを使ったサイトやブログのフッターの初期設定方法について解説しよう。フッター内に任意の要素を配置する方法については、ウィジェット設定の章で解説している。フッターカラーの設定SWELLで作成したサイトやブログの「フッターカラー」の設定。フッターカラーの設定場所[外観]⇒[カスタマイズ]⇒[フッター]SWELLのヘッダーエリアの背景色や文字色を設定できる。標準では背景色に白色、文字色にはやや薄い黒色が設定されている。フッター内のウィジェットのテキストの色を設定するコピーライトの設定SWELLで作成したサイトやブログのフッターに記載する「コピーライト」の設定。コピーライトの設定場所[外観]⇒[カスタマイズ]⇒[フッター]SWELLのフッター最下部には、サイトの著作権保護のためのコピーライトが表記される。標準の初期設定では「©サイト名.」といったように記載されるが、サイト名を変更した場合などに併せて設定しておこう。コピーライト部分に記載するテキストを設定するフッターのタイトルデザインの設定SWELLで作成したサイトやブログの「フッターのタイトルデザイン」の設定。フッターの表示設定場所[外観]⇒[カスタマイズ]⇒[サイト全体設定]⇒[タイトルデザイン]SWELLのフッターのタイトルデザイン設定では、フッターに配置したウィジェットのタイトルを装飾することができる。SWELL初期設定:サイドバーの設定SWELLの初期設定として、「サイドバー」の設定について解説する。サイドバーには、サイト運営者のプロフィール、カテゴリ一覧、CTA...などと、とにかくあらゆる要素を置くことができる。サイドバーはスマホ環境だとメインエリアの下部に配置されるが、PCの表示ではメインエリアの横に常に表示されるため重要なエリアといえるだろう。SWELLを使ったサイトやブログのサイドバーの初期設定方法について解説しよう。サイドバー内に任意の要素を配置する方法については、ウィジェット設定の章で解説している。サイドバーの表示設定SWELLで作成したサイトやブログの「サイドバーの表示」についての設定。サイドバーの表示設定場所[外観]⇒[カスタマイズ]⇒[サイドバー]SWELLのサイドバーは標準の初期設定では右側に表示されている。好みに応じて配置を左右変更したり、サイドバーを特定のページだけ表示したりすることが可能だ。サイドバーの表示位置を左右どちらか選択するサイドバーのタイトルデザインの設定SWELLで作成したサイトやブログの「サイドバーのタイトルデザイン」の設定。サイドバーのタイトルデザインの設定場所[外観]⇒[カスタマイズ]⇒[サイト全体設定]⇒[タイトルデザイン]SWELLのサイドバーのタイトルデザイン設定では、サイドバーに配置したウィジェットのタイトルを装飾することができる。SWELL初期設定:ウィジェットの設定SWELL初期設定として、「ウィジェット」について解説する。プロフィール」など自由な要素を配置することができる。サイドバー・フッターエリアへの要素の配置は、共通してウィジェット設定画面で行う。ウィジェット設定画面の右にある[共通サイドバー]をクリックして開くウィジェット設定画面の左にある「利用できるウィジェット」を[共通サイドバー]にドラッグ&ドロップして移動する[共通サイドバー]に移動したウィジェットをクリックで開き、ウィジェット内容を編集するちなみに、HTMLの知識が必要となるが「カスタムHTML」のウィジェットでは、HTMLコードで自由な要素を作ることができる。SWELL初期設定:グローバルナビ(ヘッダーメニュー)の設定SWELL初期設定として、「グローバルナビ(ヘッダーメニュー)」について解説する。グローバルメニューの設定場所[外観]⇒[メニュー]SWELLのグローバルナビの設定では、任意のページをヘッダーメニューとして配置できる。ヘッダーメニューでは「運営者情報」「プライバシーポリシー」「お問合せフォーム」などのページへのリンクをメニューにして配置するのが一般的だろう。ちなみに、SWELL標準の初期設定では固定ページがヘッダメニューに配置される。「メニュー構造」の項目内にある「メニュー名」に任意の名前(例:グローバルナビ)を入力し[メニューを作成]をクリック「メニュー構造」の項目内「メニュー設定」内の「グローバルナビ」にチェックを入れ、[メニューを保存]をクリック「メニュー項目を追加」の項目内にある固定ページや投稿ページなど任意のページにチェックを入れ、[メニューに追加]をクリックメニューに追加し、「メニュー構造」に移動した記事を開き、「ナビゲーションラベル(メニューのタイトル)」や「説明(ページの説明や画像URLを挿入できる)」を入力ヘッダーに配置したいページを追加し終わったら、右下の[メニューを保存]をクリックして完了SWELL初期設定:SNS情報SWELL初期設定として、「SNS情報」について解説する。SNS情報の表示設定場所[外観]⇒[カスタマイズ]⇒[SNS情報]SWELLのSNS情報の設定では、各SNSのURLを入力することでヘッダーバーエリアにSNSのリンクが追加される。SNS情報に追加できるSNSは次の通りだ。FacebookTwitterInstagramTikTok楽天ROOMLINEPinterestGithubYouTubeAmazon欲しいものリストSWELL初期設定:Googleアナリティクスとの連携SWELL初期設定として、「Googleアナリティクス(GA)」との連携設定について解説する。GoogleアナリティクスとSWELLを連携する手順は次の通りだ。手順4で必要となるGoogleアナリティクスの計測IDの確認方法は次の通りだ(GA4の場合)。Console(サチコ)」との連携設定について解説する。PACK」を使った方法を採用している。GoogleサーチコンソールとSWELLを連携する手順は次の通りだ。Consoleに戻り、[確認]をクリックすると所有権の確認が始まる所有権が認証されると、サーチコンソールでのサイトデータの計測が始まる。集計が終わるのは約1日かかるので待とう。AdSense(アドセンス)」との連携設定について解説する。各入力欄に対応する広告コードを貼り付け[変更を保存]をクリックSWELL初期設定:高速化の設定SWELL初期設定として、「高速化」の設定について解説する。高速化の設定場所[SWELL設定]⇒[SWELL設定]⇒[高速化]SWELLは元々ページの表示速度が速いことで有名だが、標準の初期設定で高速化設定はほぼOFFになっているため、最適化することでさらに高速化できる。ページスピードの改善はユーザーの離脱率(記事を読む前に戻る人の割合)の軽減に繋がるため、速いに越したことはない。基本的には全部チェックを入れれば良いのだが、SWELLの高速化設定ページの各項目ごとにおすすめの設定を紹介する。空欄SWELLテーマで作成したサイトやブログを高速化するためには、上記の高速化設定以外にも対策方法がある。レンタルサーバーを高速なものに乗り換える不要なプラグインを削除するサイト内の画像をWebP形式に対応させるサイトのフォントを「游ゴシック」か「ヒラギノゴシック>メイリオ」に設定するとはいえ、サイトの高速化にこだわりだすとキリがないのも事実だ。Insights(ページスピードインサイト)」で計測し、あまりにもページスコアが低い(赤色表示)場合にのみ対策するのがおすすめだ。Insights【SWELLの始め方】着せ替えデモサイトでブログをカスタマイズSWELLの公式サイトには、サイトの着せ替え用テンプレート「デモサイト」が公開されている。SWELLはサイトデザインの設定項目が多いが故に、初心者がデザイン設定に手を出すと途方もない時間を費やしてしまうのが難点だ。「デザインのカスタマイズ設定に時間をかけたくないが、せっかくだしオシャレなサイトに仕上げたい」と、思うのであれば、SWELLのデモサイトへの着せ替えを検討してみては如何だろうか。好みのデモサイトをベースに、そこからデザインをカスタマイズしていくのも一つの手だろう。SWELLのデモサイトへの着せ替え方法について解説しておこう。files?]にチェックを入れ、[Import]をクリックするとデモサイトが適用されるSEWLLの始め方:まとめSWELLの始め方の要点SWELLの始め方は「インストール」⇒「ユーザー認証」⇒「プラグイン導入」の3ステップSWELLの初期設定項目は非常に多いが、始め方の3ステップさえ完了すれば記事を書き始めることができるSWELLのデザイン設定が手間な場合は、公式テンプレート「デモサイト(着せ替え)」で簡単に設定できるSWELLをワードプレスに導入しようと思うと、サイトやブログ初心者の方は躓くかもしれない。SWELLはカスタマイズ性に優れる分、デザインなどの設定項目で戸惑ってしまいがちだ。そのため、SWELLの初期設定については、当記事を読み返しつつゆっくりと慣れていって欲しい。SWELLテーマは、高い機能性やカスタマイズ性が非常に高い。何より、とてもオシャレなサイトが出来上がる。あなたもSWELLのテーマに慣れてさえしまえば、サイト運営が楽しくて仕方なくなるはずだ。