【簡単】swellでフッターをカスタマイズする方法を紹介します!

swellでフッター周りをカスタマイズする方法を紹介!【簡単です】

takato(@n8takato)です!

swellでフッターをカスタマイズする方法を知りたい。

この記事は上記の課題に向けて作成しています。

swellのフッターは簡単にカスタマイズすることが出来ます。

フッターをカスタマイズしたい方は参考にしてみてください。

この記事を読むメリット

  • swellのフッターをカスタマイズする方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人

swellに関する他の記事はこちら

あわせて読みたい
swellのサイドバーをカスタマイズする方法をわかりやすく紹介! swellでサイドバーをカスタマイズしたい この記事では上記の課題を解決します。 swellを導入したら、サイドバーをカスタマイズしたいですよね。 swellはサイドバーのカ...
あわせて読みたい
【2022年版】swellで吹き出しを作る簡単な方法を紹介! swellで吹き出しを表示する方法を知りたい。 この記事は上記の課題に向けて作成しています。 ブログを書く時に吹き出しを作る事があると思います。 swellでは簡単に吹き...
目次

swellでフッターをカスタマイズする方法

swellでフッターをカスタマイズする方法
swellでフッターをカスタマイズする方法

早速swellでフッターをカスタマイズする方法を紹介します。

swellは下記3つのフッター部分をカスタマイズ出来ます。

swellのフッターをカスタマイズ出来る3つの部分

  1. コピーライト
  2. SNSアイコン
  3. ウィジェット

コピーライト

コピーライトとはサイトの一番下に記載されている「@〇〇」のことです。

コピーライトは読者に対して著作権の保護をアピールすることが出来ます。自分のサイトを守るためにもコピーライトは作成しておいた方が良いです。

このブログもサイト最下部に「© TAKATO BLOG」と記載しております。

コピーライトをカスタマイズする手順は下記の通りです。

コピーライトのカスタマイズ手順

  1. 「カスタマイズ」をクリック
  2. 「フッター」をクリック
  3. 「コピーライト設定」で編集

①「カスタマイズ」をクリック

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

swell カスタマイズ
swell カスタマイズ

②「フッター」をクリック

カスタマイズメニューの中にある「フッター」を選択します。

カスタマイズ フッター
カスタマイズ フッター

③「コピーライト設定」で編集

フッターメニュー内にある「■コピーライト設定」で編集します。

コピーライトに表示したい文章を記入してください。

※コピーライトは自分のサイト名にすることが多いです。

コピーライトの入力
コピーライトの入力

無事にコピーライトにテキストが表示されたかと思います。

補足:コピーライトのカラー設定

コピーライトは色を変えることも出来ます。

カスタマイズメニューの「フッター」から「■カラー設定」で変更します。

コピーライトのカラーを変更出来る箇所は下記の2つです。

  • フッター背景色
  • フッター文字色
コピーライトのカラー入力
コピーライトのカラー入力

色を変更したい方は設定してみてください。

SNSアイコン

swellはフッター部分にSNSのアイコンを表示出来ます。

表示出来る主なSNSは下記の通りです。

  • Twitter
  • Instagram
  • Facebook
  • YouTube
  • アマゾンの欲しいものリスト など

フッターにSNSアイコンを表示する手順は下記の通りです。

フッターにSNSアイコンを表示する手順

  1. 「カスタマイズ」をクリック
  2. 「SNS情報」をクリック
  3. SNS情報を入力
  4. 「フッター」をクリック
  5. 「その他の設定」でSNSアイコンの表示を設定

①「カスタマイズ」をクリック

先ほどと同様にWordPressの管理画面から「外観」→「カスタマイズ」を選択します。

②「SNS情報」をクリック

カスタマイズメニュー内の「SNS情報」を選択します。

SNS情報
SNS情報

③SNS情報を入力

各SNSのリンク先を追加します。

swell SNS情報
swell SNS情報

④「フッター」をクリック

続いてカスタマイズメニュー一覧から「フッター」を選択します。

⑤「その他の設定」でSNSアイコンの表示を設定

フッター内の「その他の設定」で「フッターにSNSアイコンリストを表示する」にチェックを入れます。

フッターにSNSアイコンを表示する
フッターにSNSアイコンを表示する

SNSアイコンの表示設定は以上です。

ウィジェット

swellはフッター部分に3列のウィジェットを作ることが出来ます。

ウィジェットとは「記事一覧」や「カテゴリー」などの様々なパーツを表示することの出来る機能です。

このブログもフッターに3列のウィジェットを作成しています。

swell フッターウィジェット
swell フッターウィジェット

下記の手順でフッターにウィジェットを設定することが出来ます。

フッターにウィジェットを設定する手順

  1. ウィジェットを表示する
  2. 表示したい項目を選択
  3. 表示先の選択

①ウィジェットを表示する

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

②表示したい項目を選択する

ウィジェット左にある「利用できるウィジェット」から表示したい項目を選択します。

項目の選択
項目の選択

③表示先の選択

項目の表示先を選択します。

表示先は下記3つのどれかを選択します。

  • フッター(PC)1 (左に表示される)
  • フッター(PC)2 (真ん中に表示される)
  • フッター(PC)3 (右に表示される)
表示先の選択
表示先の選択

指定したフッター部分に項目が表示されるようになります。

補足:ウィジェットのカラー設定

ウィジェットも色を変更することが出来ます。

カスタマイズメニューの「フッター」から「■カラー設定」で変更します。

色を変更できる部分は下記の2つです。

  • ウィジェットエリアの背景色
  • ウィジェットエリアの文字色

お好みのカラーに変更してみてください。

swellのフッターをカスタマイズしよう!

swellのフッターをカスタマイズしよう!
swellのフッターをカスタマイズしよう!

この記事ではswellでフッターをカスタマイズする方法を説明しました。

まだ設定していない方は実施してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次