4.フッターデザインの変更方法
このマニュアルでは、WordPressテーマ「LiteWord」を使用しているサイトのフッター部分のデザインを変更する手順を解説します。
はじめに:フッターとは
フッターとは、ウェブページの最下部に表示される領域のことです。一般的に、コピーライト表記、運営者情報、連絡先、プライバシーポリシーへのリンク、SNSリンクなどが配置されます。フッターのデザインを調整することで、サイト全体の印象や利便性を向上させることができます。
1. フッターデザイン設定画面へのアクセス
フッターのデザイン変更は、WordPressのカスタマイズ画面から行います。
1.1. WordPressダッシュボードへのログイン
- ウェブサイトのトップページURLの末尾に「
/wp-admin
」と入力し、アクセスします。 - ログイン画面が表示されたら、WordPressのユーザー名とパスワードを入力し、「ログイン」ボタンをクリックします。
1.2. カスタマイズ画面への移動
- WordPressダッシュボードの左側メニューから「外観」にマウスカーソルを合わせます。
- 表示されたサブメニューから「カスタマイズ」をクリックします。
1.3. フッター設定画面へのアクセス
- カスタマイズ画面の左側メニューから「デザイン設定」をクリックします。
- 次に「フッター」をクリックします。
2. フッターデザインのパターンを選択する
フッター設定画面内にある「パターンの選択」をクリックします。
- ここで、フッターの基本的なレイアウトパターンを選択できます。初期状態では「未選択」になっている場合があります。
- 「パターン1」や「パターン2」など、用意されているパターンにチェックを入れると、フッターのデザインが切り替わります。プレビューで確認しながら選択してください。
- 将来的には、さらに多くのデザインパターンが追加される予定です。
3. 選択したデザインパターンの詳細を設定する
デザインパターンを選択後、カスタマイズ画面のメニューで一つ前の階層に戻ると、「パターン1の設定」や「パターン2の設定」といった、選択したパターンに応じた詳細設定項目が表示されます。これをクリックして設定を進めます。
3.1. 表示/非表示の切り替え
各パターンの設定項目内で、フッター全体や特定の要素(例:SNSセクション、コピーライト表示部、ロゴ、ウィジェットエリアなど)を表示するか非表示にするかをチェックボックスで切り替えられます。
3.2. SNS設定
- 表示とデザイン: SNSアイコンセクションの表示/非表示、背景色、アイコンの色などを設定できます。
- 表示するSNSとリンク: 表示したいSNSの種類(X、YouTube、Instagram、LINE、メールなど)のアイコンを選択し、それぞれのリンク先URLを設定します。最大4つまで設定可能です。
3.3. コピーライト設定
- 表示と内容: コピーライト表示部の表示/非表示を選択し、表示するテキスト内容を自由に入力できます。
- テキストの色: コピーライト文言の文字色を変更できます。
3.4. ロゴ設定(対応パターンのみ)
パターン2など、一部のデザインパターンではフッターにロゴを表示できます。
- 表示タイプと内容: ロゴを「画像」で表示するか、「テキスト」で表示するか、または「表示しない」かを選択します。
- 画像の場合:ロゴ画像をアップロードまたはメディアライブラリから選択します。
- テキストの場合:表示するテキストを入力し、必要に応じて色やフォントを選択します。
- サイズ調整: ロゴのサイズを、PC、タブレット、スマートフォンそれぞれの表示に合わせて調整できます。
3.5. ウィジェットエリアの表示設定(対応パターンのみ)
パターン2など、一部のデザインパターンではフッター内に専用のウィジェットエリアを設けることができます。このエリアを表示するかどうかを選択できます。実際にウィジェットエリアにコンテンツを追加する作業は、後述のウィジェット設定画面で行います。
4. フッターにウィジェットを配置する
デザインパターンで表示設定したウィジェットエリアや、テーマ共通で用意されているフッター用ウィジェットエリア(例:「フッター上1」「フッター上2」「フッター上3」)にコンテンツを追加するには、WordPressのウィジェット設定画面を使用します。
4.1. ウィジェット設定画面へのアクセス
- WordPressダッシュボードに戻ります。(カスタマイズ画面を開いたまま、別のタブでダッシュボードを開いても構いません)
- 左側メニューの「外観」にマウスカーソルを合わせ、「ウィジェット」をクリックします。
4.2. フッター関連ウィジェットエリアへの追加
ウィジェット設定画面には、利用可能なウィジェットエリアが表示されています。
- フッター上のウィジェットエリア: 「フッター上1」「フッター上2」「フッター上3」といった名称のエリアが用意されている場合があります。これらは通常、フッターのメインコンテンツ部分の上部や、フッター内で横並びに配置されるエリアです。
- デザインパターン内のウィジェットエリア: 「3.5. ウィジェットエリアの表示設定(対応パターンのみ)」で表示するように設定した、特定のデザインパターン専用のウィジェットエリア。
4.3. ウィジェットの追加と設定
- 画面左側(またはブロックエディタの場合は「+」ボタン)から追加したいウィジェット(例:画像、テキスト、カスタムHTML、カテゴリーリスト、検索バーなど)を選択します。
- 選択したウィジェットを、目的のフッター関連ウィジェットエリアにドラッグ&ドロップするか、ウィジェット名の横にあるオプションから追加先エリアを指定します。
- 追加後、各ウィジェットが必要とする設定(画像選択、テキスト入力、HTMLコード記述など)を行います。テキストウィジェットやカスタムHTMLウィジェットは、アフィリエイトバナーなどの埋め込みにも利用できます。
4.4. 表示位置の確認
「フッター上1」「フッター上2」「フッター上3」のように番号で区切られたウィジェットエリアは、一般的に番号順に左から右、または上から下に並んで表示されます。実際にウィジェットを配置してみて、サイトのプレビューで表示位置を確認するのが最も確実です。
5. 設定を保存してサイトに反映する
5.1. カスタマイズ画面での保存
フッターのデザインパターン選択や詳細設定など、カスタマイズ画面で行った変更は、画面上部にある「公開」ボタンをクリックすることで保存され、サイトに反映されます。
5.2. ウィジェット設定の保存
ウィジェット設定画面で行った変更(ウィジェットの追加、削除、並べ替え、内容編集)は、多くの場合、操作後に自動的に保存されます。ブロックベースのウィジェットエディタではない従来のウィジェット画面の場合や、明示的な「保存」ボタンがある場合は、それをクリックしてください。