今回は、WordPressテーマ「SWELL」を購入したらやっておきたいカスタマイザーの設定方法を解説します。
紹介する設定を行うことで、WordPress初心者でもSWELLを使いこなして、プロフェッショナルなサイトを作成できるようになります。
「SWELLをインストールしたけど、その後の使い方がわからない」「自分のサイトが何だか素人っぽくてイケてない」「プロの設定と考え方を知りたい」という方に向けて、この動画ではSWELLでできるカスタマイズの項目、設定方法、おすすめの設定などを完全網羅しています。最後までご覧いただくことで、次の3つのメリットがあります。
- SWELLのカスタマイザーでできる設定が全てわかる。
- 設定に迷ったときの設定方法がわかる。
- 初心者が避けるべきポイントとその対策がわかる。
事前準備
カスタマイザーの設定に入る前に、あらかじめパーマリンクの設定とカスタム用のトップページとブログ一覧ページの作成を行っておきましょう。
パーマリンクの設定
ダッシュボードにログインしたら、サイドメニューから「設定」→「パーマリンク」と進み、パーマリンクを「投稿名」に設定して変更を保存します。
固定ページの作成
- サイドメニューから「固定ページ」→「新規追加」と進みます。
- 新規ページ作成画面が開いたら、タイトルに「トップページ」と入力し、本文は空欄でも構いませんが、投稿リストを挿入するとわかりやすいです。
- パーマリンクのURLスラックを「home」と入力して公開します。
- 同様に、新規固定ページ作成画面を開き、今度はタイトルに「ブログ」と入力し、本文は空欄でOKです。URLスラックを「blog」と入力して公開します。
次に、これらのページをトップページとブログ一覧ページとして設定します。
- サイドメニューから「設定」→「表示設定」と進みます。
- 表示設定のページで、ホームページの表示を「固定ページ」を選択し、ホームページに「トップページ」、投稿ページに「ブログ」を選択して変更を保存します。
カスタマイザーの設定
SWELLのカスタマイザーでは、次のような設定が行えます。
- WordPress設定
- サイト全体設定
- ヘッダー、フッター、サイドバー
- トップページ
- 投稿、固定ページ、アーカイブページ、記事一覧リスト
- SNS情報
- 高度な設定
- メニュー
- ウィジェット
- 追加CSS
WordPress設定
サイト基本情報
ここではサイトのタイトル、キャッチフレーズ、サイトアイコンを設定できます。タイトルは後でロゴ画像にもできますが、会社名、サイト名、サービス名などを設定しましょう。キャッチフレーズはSEOにも影響するため、重要なキーワードを入れて設定することが大切です。
ホームページ設定
ホームページ設定は先ほど説明した固定ページの設定です。カスタマイザーからも設定することができます。
サイト全体設定
基本カラー
基本カラーではメインカラー、テキストカラー、リンクカラー、背景色を設定できます。配色は感覚ではなく、プロの配色を真似することが重要です。参考サイトや配色ツールを利用して、失敗しない配色を設定しましょう。
基本デザイン
基本デザインではサイト全体の見た目、フォントの設定、コンテンツ幅の設定、サブメニューの表示形式、ページ背景などを設定できます。特にフォントの選択やコンテンツ幅の設定は、サイトの可読性に大きく影響するため、慎重に設定しましょう。
コンテンツヘッダー
コンテンツヘッダーの設定では、画像にフィルターをかけることができます。背景画像にフィルターをかけて文字を見やすくすることができます。
パンくずリスト
パンくずリストは、ユーザーがサイト内のどこにいるかを示すためのものです。ページ上部または下部に表示させることができます。
ページャー
ページャーは複数ページにわたるコンテンツのナビゲーションを提供します。形状やデザインを設定できます。
スマホ開閉メニュー
スマホ開閉メニューは、スマホからのアクセス時に表示されるメニューで、アイコンをタップすることで開閉されます。カラーの変更も可能です。
下部固定ボタン・メニュー
画面右下に目次ボタンやページトップボタンを表示させることができます。デザインやテキストも変更可能です。
ヘッダー
ヘッダーでは、背景色、テキスト色、ロゴの設定、追従ヘッダーの設定、PC用およびスマホ用のレイアウト設定などを行います。スマホ用のロゴサイズの変更や、メニューの配置も設定可能です。
フッター
フッターでは、カラー設定、コピーライト設定、SNSアイコンの表示などを行います。ウィジェットを配置して、サイトのアクセントにすることもできます。
サイドバー
サイドバーは表示するかどうか、表示する位置を設定できます。サイドバーの有無によってサイトのデザインやユーザビリティが変わるため、慎重に設定しましょう。
トップページ
トップページでは、メインビジュアル、記事スライダー、ピックアップバナーの設定が行えます。メインビジュアルの表示内容を画像や動画に設定し、スライダーの表示方法を設定することができます。
投稿・固定ページ
投稿・固定ページでは、タイトルの表示位置、アイキャッチ画像の表示、目次の表示、SNSシェアボタンの配置、記事下エリアの設定などが行えます。
アーカイブページ
アーカイブページでは、タイトルの表示位置、リストレイアウト、投稿情報の表示設定などを行います。タブの切り替え設定も可能です。
SNS情報
SNSリンク設定では、各SNSへのリンクを設定し、サイト内に表示させることができます。
高度な設定
高度な設定では、GoogleADSやアナリティクス、サーチコンソールなどの認証コードを設定することができます。
メニュー
メニューの位置や表示内容を設定します。グローバルナビ、スマホ用ヘッダー、スマホ開閉メニュー、フッター、固定フッター、ピックアップバナーなどを設定します。
ウィジェット
ウィジェットの配置や表示内容を設定します。
追加CSS
追加CSSでは、デザインをカスタマイズするためのコードを入力します。ただし、SWELLは非常に柔軟なカスタマイズが可能なため、CSSの入力はほとんど不要です。
おわりに
最後までご覧いただき、本当にありがとうございました。
SWELLの初期設定としてやれることは多岐にわたりますが、これらの設定を行うことで、初心者でもプロフェッショナルなサイトを作成できます。
WordPressの始め方やサイト構築の方法がわからない人向けに
構築代行するサービスも行っていますのでお気軽にお問い合わせください。