【SWELL】半透明な固定サイドバーを表示するカスタマイズ
2023年12月4日更新
WordPressテーマSWELLで半透明な固定のサイドバーを配置してみました。SNSアイコンやナビゲーションになるアイコンを並べると、SWELLじゃないみたいに変化しました！
本記事では半透明でオシャレな固定サイドバーの作り方を紹介します。
ちなみに対象のサイドバーは下記画像内、右側にある赤線内エリアのことでです↓
サンプルサイト
カスタマイズ解説用のサンプルサイトを用意しました↓
トップページはSNSアイコンと、ページトップへボタンを配置しました。
トップページ以外の下層ページには、各ページへのリンクを追加設置しました。「サービス」「ニュース」「メール」部分です！
※固定サイドバーの透け感が伝わりやすいように、背景に固定動画を設置しています。今回の記事では固定動画の設置方法は解説していません。
興味があれば「【SWELL】背景に固定で動画を表示するカスタマイズ方法」をご覧ください。
サンプルサイトの構成
【バージョン】
WordPress：6.3.1
SWELL：2.7.8.4
WordPress、テーマともに記事執筆時に利用可能な最新バージョンです。
カスタマイズの概要
今回のカスタマイズはフックを使っています。
Code Snippetsプラグインなどを有効化している環境であれば、SWELLのPHPテンプレートファイルを直接編集する必要はありません。子テーマも不要です（子テーマ化していても大丈夫です！）。
子テーマ化している環境であれば、子テーマのfunctions.phpにコードを加えるカスタマイズ形式でも動作します。
※Code SnippetsはWordPress公式プラグインに登録されている無料プラグインです。公式サイトからダウンロードできるほか、ダッシュボードからインストールしてお使いください。
備考
「スッキリしたオシャレなサイトを作りたい」
そんな人向け。
今回設置する半透明な固定サイドバーは、SWELL標準のサイドバーを使っていない1カラムのデザイン用です。
標準サイドバーのあるデザインでも使えますが、デザインによってはサイドバーがコンテンツに重なり「ちょっとジャマかなー」と感じるかもしれません。
スマホなど横幅が狭い端末の場合は非表示となる仕様です。
メディアクエリを使い、「960px以下ならサイドバーを消す」という簡単な仕様なので、ブレイクポイントを編集するだけで「1000px以上の場合だけ表示！」みたいなことも実現できます。
その辺りの参考コードも記載していますのでぜひ活用してみてください。
更新履歴
2023年12月 記事更新（最新バージョンへの対応）
2023年９月 記事公開
有料コンテンツ部分では以下の内容を画像、コード付きで解説しています。
全ページに固定サイドバーを表示する方法
トップページだけに固定サイドバーを表示する方法
記事ページだけに固定サイドバーを表示する方法
固定サイドバーを左側に表示する方法
ブレイクポイントを指定してサイドバーを消す方法
トップページとそれ以外のページで表示する内容を変える方法
ここから先は
¥ 7,980
この記事が気に入ったらサポートをしてみませんか？