この記事では、WordPressテーマ「SWELL」のフッター周辺をカスタマイズする方法をご紹介します。
フッターを綺麗にしておくと、よりサイトデザインのバランスが整います。
SWELLの標準機能でカスタマイズできる項目と、CSSを追加してカスタマイズする方法をまとめましたので、ひととおりチェックしてみてください。
- 「そもそもSWELLとは」については、下記の記事をご参考ください。
- カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
- カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』
SWELLフッターカスタマイズ【標準機能編】
まずはSWELL標準機能でフッターまわりをカスタマイズする方法を解説していきます。
SWELLのフッターエリアは、下記のパーツにわかれています。
各フッターエリアごとに、カスタマイズ方法を見ていきましょう。
フッター直前とフッター（PC）1〜3
フッター直前とフッター（PC）1〜3の部分は「ウィジェット」からカスタマイズできます。
「外観→カスタマイズ→ウィジェット」と進み、下記のとおり対応している項目を編集します。
とくに難しいことはありません。
ちなみにスマホから見ると、フッター（PC）1〜3は下記のとおり縦に並びます。
フッターメニュー
フッターメニューは、メニュー項目からカスタマイズします。
「外観→カスタマイズ→メニュー」から、メニューを新規作成して「フッター」を選ぶと、下記のような画面になります。
フッターメニューに掲載したいページやURLを選んで追加・修正しましょう。
フッターメニュー上のSNSアイコン
フッターメニューの上には、SNSアイコンを表示させることもできます。
「外観→カスタマイズ→フッター」と進み「その他の設定」の「フッターにSNSアイコンリストを表示する」にチェックを入れると、下記のとおり表示されます。
コピーライト
サイトの最下部に掲載される「コピーライト」表示もカスタマイズできます。
「外観→カスタマイズ→フッター」と進み「コピーライトのテキスト」を修正しましょう。
フッターエリアの背景・テキストカラー
フッターエリアの背景色や文字色もカスタマイズできます。「外観→カスタマイズ→フッター」と進み「カラー設定」の項目へ。
「フッター」と「ウィジェットエリア」の2ヶ所のカラーを選べます。
- フッター：フッターエリア全体を指定
- ウィジェットエリア：フッターメニューより上のフッターウィジェットエリアのみ指定
好きな色にカスタマイズしてください。
SWELL固定フッターカスタマイズ【標準機能編】
SWELLには、スマホ表示用の「固定フッター」を表示する機能がついています。
表示するか否かは「メニュー」欄から。基本的な表示内容は「サイト全体設定」からカスタマイズします。
固定フッターのメニュー設定
「外観→カスタマイズ→メニュー」と進んで新規メニューを作り、メニューの位置に「固定フッター（SP）」を選ぶと配置されます。
配置するメニューの「説明」欄にSWELLのアイコンショートコードを入力すると、アイコンも表示されます。
固定フッター表示項目の設定
メニューや検索ボタン、トップへ戻るボタンなどは、メニューとは別の項目でカスタマイズします。
「外観→カスタマイズ→サイト全体設定→下部固定ボタン・メニュー」へと進むと「スマホ用固定フッターメニューの設定」項目があります。
下記の項目の、固定フッターへの表示・非表示をカスタマイズできます。
- メニュー開閉ボタン
- 検索ボタン
- ページトップへ戻るボタン
- 目次メニュー
その他背景色や文字色なども調整できますので、ご自身のサイトにあわせてカスタマイズしてみてください。
SWELLフッターカスタマイズ【CSS編】
SWELLのフッターエリアをCSSでカスタマイズする方法を解説していきます。
ここで紹介するコードは、基本的に「外観→カスタマイズ→追加CSS」に記述してください。
- 掲載しているカスタマイズをしたことでなにかあっても責任は取れません。すべて自己責任でお取り組みください。
フッターに背景画像を挿入するカスタマイズ
SWELLのフッター背景に任意の画像を指定して、固定背景にするカスタマイズです。挙動が分かりにくいかと思いましたので、動画を用意しました。
カスタマイズするには、下記のコードを追記します。
/*SWELLフッター背景*/
#footer {
background-image: url( 画像URL );
background-attachment: fixed;
background-size: cover;
background-position: center;
}画像URL の部分に、自分のサイトにアップロードしている好きな画像のURLを貼り付けてください。メディアライブラリで画像を選択したとき、下記のように右下に表示される「ファイルのURL」です。
フッターのフォントサイズを変更するカスタマイズ
フッターウィジェットエリアの全体的なフォントサイズを変更するには「l-footer」のclassを指定してカスタマイズします。下記のコードを追加してください。
.l-footer{
font-size:0.8rem;
}remはHTMLの通常フォントサイズを1として、その倍率であらわす単位です。つまり0.8remなら0.8倍、1.5remなら1.5倍になりますので、お好みのサイズを指定してください。
当サイトでは、フッターウィジェットのフォントサイズには「0.8rem」を当ててています。
フッター内見出しテキストサイズを変更するカスタマイズ
フッターウィジェットエリアの見出しテキストのサイズをピンポイントで変更するには、下記のコードを追加してください。
.c-widget__title.-footer{
font-size:0.5rem;
}上記コードでは小さくしていますが、1.2remや1.5remなど1以上を指定すると大きくもできます。
フッター内見出しのアンダーラインを非表示にするカスタマイズ
フッターウィジェット内の見出しデザインには、デフォルトでアンダーラインが引かれています。このデザインを非表示にするには、下記のように指定しましょう。
/*フッター見出しのアンダーライン非表示*/
.c-widget__title.-footer:after, .c-widget__title.-footer:before{
height:0px;
}
本来あるものを、0px指定して無理やり非表示にする形です。デフォルトの太さが1pxですので、反対に2px、3pxと大きくすると罫線を太くすることもできます。
かなりピンポイントなカスタマイズですが、必要でしたら実装してみてください。
SWELLのフッターカスタマイズまとめ
フッターは意外とオリジナリティを出せるポイントです。
フッターはかなりコアな読者しか見にこない部分ですが、だからこそこだわりを見せたいところ。理想のフッターデザインにカスタマイズしてみてください。
