SWELLカスタマイズまとめ｜目的別の一覧【コピペで使える】

2026.09.072026.09.30

SWELLのカスタマイズ記事を、目的別にまとめました。

カスタマイザーの追加CSSで済むものから、functions.phpに書くものまで扱っています。

コードはコピーして使えます。

閲覧数の多い順に表示しています。

記事は随時追加しているので、一覧は自動で更新されます。

カスタマイズ画面の項目そのものを探したい場合は、全項目の一覧を別の記事にまとめています。

https://motoki-design.co.jp/wordpress/swell-customize-menu/

作りたいものから探す

作りたい表示が決まっている場合は、下の表から近いものを選んでください。

左の列で目的を確かめ、右の列のリンクから手順の記事を開けます。

やりたいこと	手順を見る
画面をスクロールしてもバナーを表示し続けたい	スマホ画面下とサイドバーに追従バナーを固定する
ブロックの見た目を比べてから使うものを選びたい	SWELLとWordPressのブロックをデザインパターンで見比べる
ヘッダーやフッターのデザインを変えたい	ヘッダーとフッターの見た目をCSSで調整する
記事の一覧をスライドで見せたい	投稿リストを自動で横スクロールさせる
よくある質問を開閉式にしたい	FAQブロックをクリックで開閉するアコーディオンにする
見出しやボタンに添えるアイコンを探したい	CSSでも使えるSWELLアイコンを一覧から選ぶ
SNSアイコンを横並びのリンクにしたい	ボックスメニューとCSSで作るSNSアイコンの見本

リンク先の記事で、それぞれの作り方や使い方を確認できます。

SWELLの絞り込み検索：条件と配置で選ぶ

記事をカテゴリーやタグから探せるようにする場合は、組み合わせる条件とメニューの配置で方式を選びます。次の2記事には実際に操作できる見本があり、検索結果を6件ずつ表示します。

作りたい検索	実装方法と見本
カテゴリー・タグ・キーワードを組み合わせる	複数条件の絞り込み検索。条件解除とページ送りに対応し、同じページの複数フォームを独立して操作できます。
カテゴリーの選択メニューと結果を別の場所に置く	別配置型の絞り込み検索。カテゴリーを1つ選び、サイドバーなどから本文の一覧を切り替えます。

どちらも通常投稿を対象にした実装例です。カスタム投稿や検索条件のURL保存が必要な場合は追加実装が必要です。PHPを登録する前に、各記事の対象範囲と設置手順を確認してください。

固定バナー・固定メニューの選び方

メニュー項目を固定するならSWELL標準の固定フッターメニュー、ブログパーツのデザインを固定するならブログパーツとCSSによる固定バナーを使います。閉じる操作と高さに応じた末尾余白が必要なら、閉じるボタン付き固定バナーの見本とコードを確認してください。

実装前の準備と公開後の確認

コードを貼る場所と戻し方を先に確認しておくと、作りたい表示を試しやすくなります。設定の変更、CSSの追加、PHPの編集では、保存先と復旧方法が異なります。

CSSを貼る場所・適用範囲・元に戻す方法：見た目を変更する前の準備。
子テーマが必要な場合と導入前の確認：PHPやテンプレートを扱うときの判断。
検証環境から本番へ反映する手順と注意点：本番の記事・注文などを上書きしないための確認。

投稿リスト・記事スライダーの選び方

まず、読者が手動で横に動かせればよいのか、自動で切り替えたいのかを決めます。次に、投稿リストを使うのか、表示する記事を手動で指定するのかを選んでください。見た目が似ていても、追加するコードと保守する対象が異なります。

作りたい表示	必要な作業
ブロック設定で横に並べる	手動表示はブロック設定。自動スクロールはJavaScript・ボタン用CSS
960px以下で横スクロール	CSS
投稿リストをSwiper化	PHP・JavaScript・CSS。前後ボタン付きの見本と複数設置
指定した記事をSwiper表示	PHP・CSS・JavaScript。記事IDで順番を指定
標準の記事スライダーを本文へ	PHP・CSS・JavaScript
ギャラリー・投稿リスト・カラムをスライダー化	Flickityの読込・PHP・CSS・JavaScript

コードを減らしたい場合は、ブロック設定またはCSSによる横スクロールから検討します。SwiperやFlickityを選ぶ場合は、同じライブラリの重複読み込み、複数設置、スマホの操作、自動再生の停止方法を公開前に確認してください。各記事の掲載コードを同じページへまとめて入れる方法ではありません。

リンク先の記事にはコードの一部を有料公開しているものがあります。この記事の比較表は方式を選ぶための案内です。

開閉する見本を試す

HTMLのdetails要素とsummary要素を使うと、クリックで開閉する表示を作れます。

下の2つの見出し部分をクリックすると、説明が開きます。

クリックすると説明が開きます

summaryの文字をクリックするたびに、この部分が開いたり閉じたりします。

コードを貼る場所は？

ブロックエディターで追加したカスタムHTMLブロックに貼り付けます。

この見本は、JavaScriptやCSSを追加せずにHTMLだけで開閉します。

details要素は初期状態では閉じていて、summaryの文字だけが表示されます。

最初から開いた状態にしたい場合は、details要素にopen属性を付けます。

開閉部分の見た目は、使っているテーマのスタイルによって変わる場合があります。

見本と同じHTML

上の見本と同じHTMLは次のとおりです。

<details><summary>クリックすると説明が開きます</summary><p>summaryの文字をクリックするたびに、この部分が開いたり閉じたりします。</p></details>
<details><summary>コードを貼る場所は？</summary><p>ブロックエディターで追加したカスタムHTMLブロックに貼り付けます。</p></details>

試すときは、投稿の編集画面でカスタムHTMLブロックを追加し、このコードを貼り付けます。

コードをコピーするときは、最初のdetailsの開始タグから最後のdetailsの終了タグまでをまとめて選択してください。

ブロックのツールバーでプレビューに切り替えると、開閉する表示を確認できます。

summaryの文字とpタグの中の文章を書き換えると、自分の内容に置き換えられます。

不要になった場合は、そのカスタムHTMLブロックを削除すれば元の状態に戻せます。