MENU
  • 合同会社キューブリックcompany
  • 事業内容service
  • サイト改修 自動見積りbooking
  • お知らせannouncement
  • コンテンツcontents
    • 技術ブログtech_blog
    • WEBマーケティング
    • プログラミング資格取得支援
    • ITエンジニア転職支援
お問い合わせ
WEBサイト制作・保守運用からSEO改善・マーケティング支援まで、ビジネスのデジタル基盤を総合的にサポート。WordPressサイト開発、検索流入最大化、業務効率化提案など、成果につながるソリューションを中小企業・個人事業主様に提供します。
合同会社キューブリック | WEBサイト制作・SEO改善・デジタルマーケティングの総合支援
  • 合同会社キューブリックcompany
  • 事業内容service
  • サイト改修 自動見積りbooking
  • お知らせannouncement
  • コンテンツcontents
    • 技術ブログtech_blog
    • WEBマーケティング
    • プログラミング資格取得支援
    • ITエンジニア転職支援
お問い合わせ
  1. ホーム
  2. 技術ブログ
  3. WordPress
  4. SWELLカスタマイズ完全ガイド|初心者がやる順番と必須項目【2026年版】

SWELLカスタマイズ完全ガイド|初心者がやる順番と必須項目【2026年版】

2026 5/27
WordPress
2026年5月26日2026年5月27日

SWELLを買ったはいいものの、管理画面を開いて固まっていませんか。

こんな状態に心当たりはないでしょうか。

  • 設定項目が多すぎて、どこから触ればいいのか分からない
  • とりあえず色を変えたら、全体がチグハグになった
  • 他の人のブログはおしゃれなのに、自分のサイトだけ垢抜けない
  • カスタマイズ記事を読んでも専門用語ばかりで頭に入らない
  • どこまで設定すれば「完成」なのかが分からない

最後まで読めば、SWELLのカスタマイズをどの順番で進めればいいのかが分かり、迷わず手を動かせるようになります。さらに、初心者がやりがちな失敗の回避法、コピペで使えるCSS、アップデートでデザインが消えない対策、崩れたときの直し方まで一通り押さえられます。

筆者自身、現在このブログをSWELLで運営していて、記事もすべてSWELLで書いています。最初は管理画面の項目の多さに面食らいましたが、触る順番を決めてからは迷いがなくなりました。

その実体験から「初心者がつまずくポイント」と「実は触らなくていい項目」がはっきり見えています。そこを踏まえて、遠回りせずにおしゃれなサイトへ到達できる順番で解説します。

伊藤

ちなみにSWELLの強みは、CSSやPHPを一切書かなくても、マウス操作だけでかなりのところまで仕上がる点にあります。プログラミングの知識はいりません。まずは肩の力を抜いて、上から順に進めていきましょう。

目次

SWELLカスタマイズ・サイト型トップページ構築代行(初期設定まるごと対応)、代行できます

料金目安: 40,000〜80,000円(初期設定一式の場合)

合同会社キューブリック
合同会社キューブリックが対応します(代表社員 / WEBエンジニア)
無料で相談する

結論|SWELLカスタマイズは「順番」さえ守れば失敗しない

先に結論をお伝えします。

SWELLのカスタマイズは、サイトの土台になる部分から、細部の装飾へと順番に進めるのが鉄則です。具体的には、サイト基本情報やカラーといった全体に影響する設定を先に固め、そのあとでヘッダー、フッター、トップページ、記事ページと範囲を狭めていきます。最後にCSSで微調整します。

この順番を守るだけで、「あとから色を変えたら全部やり直し」という手戻りがなくなります。逆に、いきなりCSSや細かい装飾から入ると、土台が変わるたびに崩れて、何度も直すはめになります。

伊藤

実は筆者は最初、この順番を知らずに細かいボタンの色から触り始めて大失敗しました。

伊藤

あとから基本カラーを変えた瞬間、せっかく整えたボタンやリンクの色が全部ちぐはぐになり、結局半日かけてやり直すことになったのです。あの徒労を味わってから、土台から固める順番の大切さが骨身にしみました。

本記事で進める大きな流れは次のとおりです。

ステップ設定する範囲主な手段
1サイト基本情報(アイコン・ロゴ)カスタマイザー
2基本カラー・フォントカスタマイザー
3ヘッダー・グローバルナビカスタマイザー+メニュー
4フッター・サイドバーカスタマイザー+ウィジェット
5トップページ(サイト型)固定ページ+ブロック
6投稿・固定ページの装飾ブロックエディター
7仕上げの微調整追加CSS

この流れに沿って、ひとつずつ見ていきます。

SWELLカスタマイズの全体像と3つの手段

最初に、SWELLの見た目を変える方法には何があるのかを整理しておきます。ここをぼんやり理解したまま設定を触ると、「どこをいじったのか分からなくなる」という事態に陥りがちです。

SWELLのカスタマイズ手段は、大きく3つに分かれます。それぞれ役割がはっきり違うので、最初に押さえておくと迷いません。

  • カスタマイザー。
    管理画面の「外観」から「カスタマイズ」で開く画面です。カラー、ヘッダーの形、フッターの構成など、サイト共通の設定の大半がここに集約されています。プレビューを見ながら変更できるので、初心者がまず触るべき場所です。
  • ブロックエディター。
    記事や固定ページを書くときの編集画面です。ページごとの中身を作る役割を担います。SWELL独自のブロックを組み合わせれば、トップページのサイト型レイアウトもコードなしで組めます。
  • 追加CSS。
    上の2つでは届かない細かい部分を、コードで微調整するための手段です。本記事で配布するコードをコピペするだけなら知識はいりません。あくまで仕上げの最終手段と考えてください。

イメージとしては、カスタマイザーが家全体の間取りと内装、ブロックエディターが各部屋の家具配置、CSSが最後のインテリア小物といった具合です。いきなりCSSから入るのは、家具も置いていない部屋に小物を飾るようなもので、順番として無理があります。

伊藤

筆者は今でも、サイト全体の調整の9割をカスタマイザーで済ませています。CSSを書くのは月に一度あるかないか程度です。

伊藤

最初の頃は「カスタマイズ=CSSを書くこと」だと思い込んでいましたが、実際に運営してみると、その思い込みがいちばんの遠回りでした。コードを書かなくてもここまでできるのか、というのがSWELLを使ってみての正直な感想です。

初心者が「やらなくていいこと」を先に決める

カスタマイズで時間を溶かす人の多くは、全部の項目を完璧に設定しようとして力尽きます。

実際には、SWELLのデフォルト設定はよく作り込まれていて、触らなくても十分に整って見えます。最初の段階で本当に変えるべきなのは、サイトアイコンやロゴ、基本カラーといった、あなたのブランドに直結する部分だけです。

細かいアニメーションの速度や、めったに使わないブロックの細部は、後回しで構いません。むしろ初期段階で凝りすぎると、記事を書く時間が削られてブログ運営そのものが止まります。カスタマイズは7割で公開、残りは運営しながら微調整くらいの気持ちがちょうどいいです。

伊藤

白状すると、筆者はブログを始めた最初の1か月、ほとんど記事を書かずにカスタマイズばかりいじっていました。

伊藤

気づけば「設定は完璧なのに記事はゼロ」という本末転倒な状態です。あのとき誰かに「7割で公開していい」と言ってほしかった。だからこそ、これから始めるあなたには同じ遠回りをしてほしくないのです。

ここを意識できると、このあとの作業がぐっと軽くなります。それでは具体的な準備に入ります。

カスタマイズを始める前の準備とやる順番

設定画面を開く前に、ひとつだけやっておくと作業が一気に楽になる準備があります。それがデザイン確認用のダミー記事の用意です。

カスタマイザーで見出しやボタンの色を変えても、真っ白なサイトでは変化が分かりません。あらかじめ見出し、本文、ボタン、リスト、表などを盛り込んだテスト記事を1本作っておくと、設定を変えるたびに「どう見えるか」をその場で確認できます。

作り方は簡単です。投稿の新規追加から記事を1本作り、H2やH3の見出し、適当な段落、SWELLのボタンブロックやリストブロックをいくつか並べておくだけです。公開せず下書きのままプレビューで確認すれば、表に出る心配もありません。

ダミー記事が用意できない方は、ダミー記事のインポートも便利です。WordPressのインポート機能で、wordpress-theme-test-data-ja.xmlを読み込んで使用してください。

伊藤

このダミー記事、筆者は今も下書きフォルダに「デザイン確認用」として残しています。

伊藤

テーマがアップデートされたときや、新しい装飾を試したいときに、この1本を開けばすぐに見え方を確認できて重宝しています。一度作っておくと長く使えるので、最初の手間を惜しまないでください。

準備ができたら、いよいよ設定です。

冒頭の表で示したとおり、影響範囲の大きい順に進めます。なぜこの順番かというと、基本カラーは見出しにもボタンにもリンクにも反映されるからです。

先に色を決めておけば、あとから各パーツを微調整するときに土台がぶれません。逆にパーツごとの色を先に決めてしまうと、基本カラーを変えた瞬間に全部やり直しになります。

子テーマについても触れておきます。SWELLには専用の子テーマが用意されていて、CSSやPHPで本格的にカスタマイズする予定があるなら、子テーマを有効化しておくと安心です。

理由は後半のアップデート対策のパートで詳しく説明しますが、カスタマイズを長く守るための土台になります。カスタマイザーとブロックだけで完結させるつもりなら、必須ではありません。

準備が整ったところで、最初の設定であるサイト基本情報に進みます。

サイト基本情報の設定(サイトアイコン・ロゴ)

ここからが実際の設定です。まず手をつけるのは、サイトの「顔」になる基本情報です。

設定場所は、管理画面の「外観」から「カスタマイズ」を開き、「WordPress設定」のなかの「サイト基本情報」です。ここでサイトのタイトル、キャッチフレーズ、サイトアイコンを設定します。

サイトアイコンは、ブラウザのタブや検索結果、スマホのホーム画面に表示される小さな画像です。

ファビコンとも呼ばれます。512×512ピクセル程度の正方形画像を用意しておくと、どの場所でもきれいに表示されます。これが設定されていないと、タブにWordPressの初期アイコンが出たままになり、見る人に「作りかけのサイト」という印象を与えてしまいます。地味ですが必ず設定しておきたい項目です。

ロゴ画像でサイトの第一印象が決まる

次にロゴです。設定場所は「外観」から「カスタマイズ」を開き、「ヘッダー」のなかのロゴ設定です。

ロゴはサイトの一番上、ヘッダーの左側に表示される最も目立つ要素です。テキストのままでも問題ありませんが、画像ロゴにするとオリジナリティが一気に増します。デザインに自信がなければ、シンプルなテキストロゴを画像化するだけでも十分です。無料のデザインツールで、サイト名を好きなフォントで打ち込んで書き出せば、それらしいロゴになります。

ロゴ画像を用意するときは、次の点を押さえておくと失敗しません。

  • 背景を透過したPNG形式にする(ヘッダーの色を変えても馴染む)
  • 横長で、横幅は200から400ピクセルほどを目安にする
  • 大きすぎるとスマホで間延びするので、実機プレビューで確認する

おすすめのロゴ作成ツールはキャンバのロゴ作成ツールです。無料でカンタンにイメージ通りのロゴが作成できます。是非お試しください。

伊藤

筆者の当初のロゴは、無料ツールでサイト名を打ち込んで書き出しただけの、ごくシンプルなものでした。

伊藤

それでもテキストのままだったときと比べると、サイトの締まり方がまるで違いました。透過PNGにし忘れて背景が白く浮いてしまった失敗もあったので、書き出すときの形式だけは気をつけてください。

サイトアイコンとロゴ、この2つを整えるだけで、サイトの第一印象は見違えます。

ここまでが土台のさらに土台にあたる部分です。続いて、サイト全体の雰囲気を左右する基本カラーの設定に進みます。

基本カラーとフォントの設定

サイトの印象を最も大きく左右するのが色です。ここを丁寧に決めておくと、このあとのカスタマイズがすべて楽になります。

設定場所は「外観」から「カスタマイズ」を開き、「サイト全体設定」のなかの「基本カラー」です。

SWELLでは主にメインカラーを設定します。

メインカラーは、リンクや見出しの装飾、ボタンなど、サイト全体で繰り返し使われる色です。ここがサイトのテーマカラーになります。

色選びで失敗しないコツは、使う色を絞ることです。あれもこれもと色を増やすと、まとまりのない素人っぽいサイトになります。次の構成を守るだけで、ぐっと洗練されて見えます。

  • メインカラーを1色だけ主役に置く
  • アクセントカラーは要所のみ、控えめに使う
  • 残りは白とグレーで余白を作る

色に迷ったら、自分の扱うジャンルから連想される色を選ぶと外しません。落ち着いた知的な印象なら濃いネイビー、親しみやすさなら暖色系といった具合です。カラーコードで微妙な色味まで指定できるので、好みのサイトの色を参考にするのもありです。

伊藤

筆者は最初、好きな色を片っ端から使ってしまい、見返したときに「縁日の屋台みたいだ」と頭を抱えました。

伊藤

思いきってメインカラーを1色に絞り、あとは白とグレーで余白を作る構成に変えたところ、同じ中身なのに急にプロっぽく見えるようになったのです。色は足すより引くほうが効く、と実感した瞬間でした。

フォントは読みやすさを最優先する

色が決まったら、次はフォントです。設定場所は同じく「サイト全体設定」のなかの「基本デザイン」で、サイト全体の基本フォントを選べます。

フォント選びで凝りたくなる気持ちは分かりますが、ブログ記事の本文に関しては読みやすさが正義です。装飾性の高いフォントは見出しでは映えても、長い本文に使うと目が疲れて離脱されます。本文はゴシック体系の標準的なフォントにしておくのが無難です。

伊藤

僕のおすすめはNoto Sans JPです。GoogleとAdobeが共同開発した高品質な日本語の角ゴシック体フォントで、クセのない読みやすいデザインで迷ったらいつもこのフォントにしています。

文字サイズも初期設定のままで問題ないケースがほとんどです。あえて触るなら、スマホでの本文サイズが小さすぎないかだけ確認しておきましょう。読者の大半はスマホで読みます。PCで調整したあと、必ずスマホ表示でも見え方をチェックする癖をつけてください。

色とフォントという土台が固まりました。ここから先は、サイトのパーツを上から順に整えていきます。まずはヘッダーです。

ヘッダーとグローバルナビのカスタマイズ

ヘッダーは、サイトの一番上に固定されて表示される、いわば看板部分です。訪問者が最初に目にする場所であり、サイト内を回遊してもらうための入り口でもあります。

設定場所は「外観」から「カスタマイズ」を開き、「ヘッダー」です。ここでヘッダーのレイアウト、色、ロゴの配置、固定表示するかどうかなどを設定します。

SWELLにはヘッダーのレイアウトパターンが複数用意されていて、ロゴを左に置くか中央に置くか、メニューをどう並べるかを選べます。最初はシンプルなレイアウトで構いません。スクロールしてもヘッダーが画面上部に残る「追従ヘッダー」をオンにしておくと、読者がいつでもメニューにアクセスでき、回遊率が上がります。

伊藤

筆者は追従ヘッダーをオンにしてから、サイト内の別記事への移動が目に見えて増えました。

伊藤

読者がどこまでスクロールしてもメニューに手が届くというのは、思っていた以上に効果があります。設定はチェックを入れるだけなので、まだの方は今すぐオンにすることをおすすめします。

グローバルナビで読者を迷わせない

ヘッダーの見た目を整えたら、グローバルナビを設定します。グローバルナビとは、ヘッダーに並ぶメニューのことです。サイト内の主要なカテゴリーやページへの案内板の役割を果たします。

設定場所はカスタマイザーとは別で、「外観」から「メニュー」を開いて作成します。ここでメニューに表示する項目を選び、「グローバルナビ」の位置に割り当てます。

ここで初心者がやりがちな失敗が、メニューに項目を詰め込みすぎることです。あれもこれも見せたくなりますが、項目が多いと読者はどこを見ればいいか分からず、かえって離脱します。本当に見てほしいカテゴリーやページを4つから6つほどに絞るのが理想です。

スマホではグローバルナビがハンバーガーメニュー、つまり三本線のアイコンに収納されます。

SWELLにはこのメニューの開き方や見せ方を調整する機能もありますが、こだわり出すとキリがない部分です。メニューの中身を整理することのほうが、見た目の調整より先決だと考えてください。メニューの細かいデザインをCSSで詰めたい場合は、後半のCSSパートで触れます。

伊藤

かつて筆者のメニューはカテゴリーが10個近く並んでいて、自分でも目が滑る状態でした。思いきって主要な5つに絞ったところ、かえって読んでほしい記事へのアクセスが集まるようになったのです。

伊藤

メニューは欲張らないほうが結果的に読まれる、という逆説をここで学びました。

ヘッダーが整うと、サイトの上半分の印象がほぼ決まります。続いて、サイトの足元を支えるフッターに移ります。

フッターとサイドバーのカスタマイズ

フッターはサイトの一番下に表示される領域で、ヘッダーほど目立ちませんが、サイトの信頼性に関わる大切な場所です。

設定場所は「外観」から「カスタマイズ」を開き、「フッター」です。ここでフッターの色やレイアウト、コピーライト表記を設定します。

あわせて読みたい
503 Service Temporarily Unavailable

フッターには、プライバシーポリシーや運営者情報、お問い合わせといった、サイトの信頼を担保するページへのリンクを置くのが定番です。これらのページは検索エンジンからの評価にも関わるため、まだ作っていなければ用意しておきましょう。なお、プライバシーポリシーやお問い合わせフォームの設置は、本記事とは別の初期設定の領域になるため、未対応の場合はそちらの解説記事を先に確認してください。

フッター用のメニューも、グローバルナビと同じく「外観」の「メニュー」から作成し、フッターの位置に割り当てます。ヘッダーには載せきれなかった補助的なリンクをここにまとめると、サイト全体の導線が整理されます。

サイドバーは「読まれる場所」だけ残す

サイドバーは、記事の横に表示される細長い領域です。設定は「外観」から「ウィジェット」を開いて行います。

サイドバーにはプロフィール、人気記事、検索窓、カテゴリー一覧などを置けますが、ここも盛りすぎは禁物です。読者がスクロールしながらチラッと見る程度の場所なので、本当に効果のあるものだけに絞ります。具体的には、運営者の信頼を伝えるプロフィールと、回遊を促す人気記事あたりが定番です。

スマホではサイドバーが記事の下に回り込んで表示される点も覚えておいてください。PCのつもりで詰め込むと、スマホでは記事の後ろに長い余分なブロックがぶら下がる形になります。ここでもスマホ表示の確認を忘れないようにしましょう。

伊藤

筆者はサイドバーにあれこれ広告やバナーを詰め込んでいた時期がありましたが、スマホで自分の記事を読んだとき、本文のあとに延々とブロックが続くのを見てぞっとしました。

伊藤

今はプロフィールと人気記事だけに絞っています。サイドバーは引き算で考えるのが正解だと、身をもって知りました。

ヘッダーからフッターまで、サイトの枠組みが整いました。いよいよ、訪問者が最初に着地することの多いトップページを、本格的なサイト型に仕上げていきます。

トップページをサイト型にする手順

SWELLのカスタマイズで多くの人が憧れるのが、このサイト型トップページです。

サイト型トップページとは、新着記事がただ時系列で並ぶブログ型ではなく、メインビジュアルやおすすめ記事、カテゴリー案内などを自由に配置した、雑誌の表紙のようなトップページのことです。読者を目的の記事へ効率よく導けるため、滞在時間や回遊率の向上が期待できます。

作り方の全体の流れは次のとおりです。

  1. 固定ページでトップページ用のページを1枚作る
  2. SWELLのブロックを組み合わせて中身をデザインする
  3. カスタマイザーの「WordPress設定」内「ホームページ設定」で、表示するトップページをその固定ページに切り替える

これでブログ型からサイト型に変わります。

メインビジュアルとピックアップで第一印象を作る

サイト型で核になるのが、ページ最上部のメインビジュアルです。設定はカスタマイザーの「トップページ」内のメインビジュアル項目から行い、画像や動画、キャッチコピーを設定できます。ここで世界観を一発で伝えられると、読者の第一印象が大きく変わります。

固定ページ側では、SWELLの「投稿リスト」ブロックを使って、特定カテゴリーの記事一覧やおすすめ記事を並べられます。フルワイドブロックで背景色をつけたセクションを作れば、雑誌のように区切られた読みやすいレイアウトになります。

最初から完璧なサイト型を目指すと手が止まります。まずはメインビジュアルと、おすすめ記事を並べたセクションだけの最小構成で公開し、運営しながら肉付けしていくのが現実的です。サイト型トップページの細かい組み方は奥が深いので、より詳しい手順を知りたい場合は専用の解説記事を参照すると、つまずきにくくなります。

伊藤

筆者も最初のサイト型トップは、メインビジュアルとおすすめ記事のセクションだけの、本当にあっさりした構成でした。それでもブログ型から切り替えただけで見栄えが段違いになり、訪問者が複数記事を読んでくれるようになったのです。

伊藤

完璧を待たずに公開してよかった、と心から思っています。

トップページが形になれば、サイトの大枠は完成です。残るは、読者が実際に読む記事ページの中身を整える作業になります。

投稿・固定ページのデザイン調整

サイトの枠組みが整ったら、読者が最も長く目にする記事ページの中身を整えます。ここが読みやすいかどうかで、最後まで読まれるかが決まります。

記事ページの装飾は、カスタマイザーとブロックエディターの両方で行います。全体に共通する設定はカスタマイザーの「投稿・固定ページ」から、個々の装飾は記事を書きながらブロックエディターで行う、という役割分担です。

カスタマイザー側では、見出しのデザインを選べます。SWELLには見出しのスタイルがいくつも用意されていて、下線だけのシンプルなものから、背景色つきの目立つものまで選べます。ここでも派手にしすぎないのがコツです。H2とH3でデザインの差をつけ、本文との区別がはっきりつく程度に整えれば十分です。装飾が強すぎる見出しは、記事全体を騒がしく見せてしまいます。

目次の表示もこの画面で設定します。ある程度の長さの記事なら、最初のH2の前に目次を自動表示する設定にしておくと、読者が読みたい場所へ飛べて親切です。

ブロックの装飾は使うものを絞る

ブロックエディターでは、SWELL独自の豊富なブロックを使って記事を装飾できます。吹き出し、キャプション付きボックス、ボタン、ステップ、アコーディオンなど、種類は非常に多いです。

ただ、種類が多いからといって全部使う必要はありません。むしろ毎回いろいろなブロックを使うと、記事ごとに見た目がバラバラになり、サイト全体の統一感が損なわれます。自分の中で「強調はこのマーカー」「補足はこのボックス」と使うパターンを数種類だけ決めておくと、記事を量産しても見た目が安定します。

よく使うブロックの組み合わせは、再利用ブロックやパターンとして登録しておくと、次回からワンクリックで呼び出せます。記事執筆のスピードが大きく変わるので、運営を続けるなら早めに整えておきたい部分です。

伊藤

筆者はこの記事も含め、すべての記事をSWELLのブロックで書いています。最初は装飾の種類の多さに目移りして、1記事に何種類ものボックスを使っていました。でも読み返すと統一感がなく、結局「強調はマーカー」「補足はキャプションボックス」と数種類に固定したのです。

伊藤

さらによく使う型をパターン登録してからは、執筆スピードが体感で倍近くになりました。装飾を絞ることが、見た目の安定と時短の両方につながると実感しています。

記事ページまで整えば、マウス操作だけでできるカスタマイズはほぼ完了です。ここからは一歩進んで、CSSによる仕上げと、せっかくのカスタマイズを守るための対策に入ります。

コピペで使えるCSSカスタマイズ集とアップデート対策

ここからは、カスタマイザーやブロックでは届かない細部を整えるためのCSSを紹介します。コードを書く必要はなく、コピペするだけで使えます。

CSSの貼り付け場所は2か所あります。手軽なのはカスタマイザーの一番下にある「追加CSS」です。本格的に管理したいなら、子テーマのスタイルシートに記述します。まずは追加CSSで試し、量が増えてきたら子テーマへ移す、という流れで問題ありません。

本文の行間が詰まって読みにくいと感じるときは、次のコードで広げられます。

.post_content p {
  line-height: 2.0;
}

リンクの色を本文中で少し目立たせたいときは、次のように指定します。色のコードは自分のメインカラーに合わせて変えてください。

.post_content a {
  color: #1a73e8;
  text-decoration: underline;
}

スマホでだけ見出しの文字を少し小さくしたい、といった調整も、メディアクエリで画面幅を絞れば実現できます。

@media (max-width: 600px) {
  .post_content h2 {
    font-size: 1.3rem;
  }
}

CSSを足すときは、もともとSWELLが用意しているデザインを大きく崩さないことが大切です。土台を無視して上書きを重ねると、アップデートで予期せぬ崩れが起きやすくなります。あくまで微調整にとどめるのが安全です。

伊藤

筆者が最初に追加したCSSは、まさにこの行間を広げるコードでした。たった3行ですが、本文がふっと読みやすくなって感動したのを覚えています。

伊藤

逆に欲を出して大量のCSSを書き足したときは、アップデート後に一部が崩れて原因探しに苦労しました。CSSは「効くものを少しだけ」が安全だと痛感しています。

カスタマイズを上書きから守る方法

ここが上位の解説記事でも手薄になりがちな、大事なポイントです。

SWELLは定期的にアップデートされます。このとき、もしテーマ本体のファイルを直接書き換えていると、アップデートで上書きされて、せっかくのカスタマイズが消えてしまいます。これを防ぐ仕組みが子テーマです。

子テーマとは、本体テーマの設定を引き継ぎつつ、変更点だけを別に保存しておく仕組みのことです。子テーマにCSSやコードを書いておけば、本体がアップデートされても、あなたの変更はそのまま残ります。SWELLには公式の専用子テーマが無料で配布されているので、それをダウンロードして有効化するだけで準備が整います。

どこに保存すれば消えないのか、整理しておきます。

  • カスタマイザーの設定とブロックで作ったデザインは、データベースに保存されるためアップデートで消えない
  • テーマファイルを直接書き換えた変更は、アップデートで消えるおそれがある
  • CSSやコードを使うなら、追加CSSではなく子テーマに集約しておくと安全で見返しやすい

つまり、注意が必要なのはコードを書くケースだけです。

伊藤

筆者は導入時に公式の子テーマを有効化しておいたおかげで、これまで何度アップデートが来ても、書き足したコードが消えたことは一度もありません。

伊藤

最初のひと手間で後々の安心が買えるので、コードを触る予定が少しでもあるなら、子テーマの有効化は済ませておくことを強くおすすめします。

カスタマイズを長く安全に保つ土台ができました。とはいえ、設定どおりに進めても「うまく反映されない」と感じる場面は出てきます。最後に、そうしたトラブルへの対処を見ておきます。

カスタマイズが反映されない・崩れたときの対処法

設定を変えたのに見た目が変わらない、あるいは急にレイアウトが崩れた。カスタマイズ中によく起きるトラブルです。原因のほとんどはパターン化できるので、順に確認すれば解決します。

最も多いのが、変更が反映されないケースです。これはキャッシュが原因のことが大半です。キャッシュとは、表示を速くするために一時保存された古い状態のことです。ブラウザやキャッシュ系プラグイン、サーバー側のキャッシュが古い状態を表示し続けていると、変更が見えません。対処としては、ブラウザのスーパーリロードを試し、それでも直らなければキャッシュ系プラグインの設定でキャッシュを削除します。これで多くは解決します。

伊藤

筆者は「変更が反映されない」と30分ほど格闘した末、原因がただのキャッシュだったという経験が何度もあります。あれほど悩んだのに、キャッシュを削除した瞬間あっさり直るのです。

伊藤

表示が変わらないときは、設定を疑う前にまずキャッシュを疑う。これだけで無駄な時間がかなり減らせます。

次に多いのが、カスタマイザーで変更したのに保存されていないケースです。カスタマイザーは画面上部の「公開」ボタンを押さないと設定が確定しません。プレビューでは変わって見えても、公開を押し忘れると元に戻ります。地味ですが見落としやすい点です。

レイアウトが崩れた場合は、直前に何をしたかを思い出すのが近道です。原因として多いのは次の2つです。

  • 直前に追加したCSS。いったん削除して元に戻るか確認し、戻るなら一行ずつ足し直して原因を特定する
  • 新しく入れたプラグイン。一時的に停止して表示が直るなら、SWELLとの相性問題が疑われる

どうしても原因が分からないときは、いったんカスタマイズ前の状態を思い出せる範囲で戻し、一つずつ設定を足し直すのが結局いちばん早い解決法です。焦って複数の箇所を同時にいじると、原因の切り分けができなくなります。一度に一つだけ変える、という基本を守れば、たいていのトラブルは自力で解決できます。

よくある質問(FAQ)

無料テーマから乗り換えたばかりですが、何から手をつけるべきですか。

本記事の順番どおり、サイト基本情報から始めてください。前のテーマの設定は引き継がれないため、カラーやメニューを一から設定し直す必要があります。焦らず、影響範囲の大きい設定から順に進めれば、迷わず移行を完了できます。

他の人のSWELLサイトと見た目が似てしまいます。差別化するには。

メインカラーとロゴ、メインビジュアルの3点を変えるだけで、印象は大きく変わります。デフォルトのまま使うと似がちなので、まずこの3つに自分らしさを反映させてください。フォントの選択や余白の取り方を少し変えるだけでも、オリジナリティが出ます。

カスタマイズした内容はアップデートで消えませんか。

カスタマイザーの設定やブロックで作ったデザインは、データベースに保存されるため消えません。消えるリスクがあるのはテーマファイルを直接書き換えた場合だけです。CSSやコードを使うなら、公式の子テーマに記述しておけば安全に保てます。

カスタマイズはどこまでやれば完成と言えますか。

サイトアイコン、ロゴ、基本カラー、ヘッダー、フッターまで整えば、公開して問題ないレベルです。トップページのサイト型化や細かい装飾は、運営しながら少しずつ進めれば十分です。最初から完璧を目指すより、7割で公開して記事を書き始めるほうが成果につながります。

SWELLのカスタマイズにプログラミングの知識は必要ですか。

基本的に不要です。カスタマイザーとブロックエディターだけで、おしゃれなサイトの大部分が完成します。CSSは細かい微調整に使う最終手段で、本記事のコードをコピペする程度なら知識はいりません。筆者自身、サイト全体の調整のほとんどをコードなしで済ませています。

作業代行・開発ならおまかせください

この記事で扱った作業について、構築から運用まで対応可能です。

参考情報

想定工数 8〜16時間(対応範囲によって変動) 費用目安 40,000〜80,000円(初期設定一式の場合)

SWELL導入済みのサイトが対象です。プライバシーポリシーやお問い合わせフォームが未作成の場合は別途対応となります。料金が事前に把握できる無料自動見積りをご用意していますので、まずは https://cubrick.co.jp/booking/ からお気軽にご確認ください。

対応内容

  • サイトアイコン・ロゴ画像の設定
  • 基本カラー・フォントのデザイン調整
  • ヘッダーとグローバルナビの構築
  • フッター・サイドバーの設定
  • サイト型トップページの作成(メインビジュアル・投稿リスト配置)
  • 投稿ページの見出し・目次デザイン調整
  • コピペでは難しいCSSによる微調整
  • SWELL子テーマの導入とアップデート対策
  • 表示崩れ・反映されない不具合の修正
  • スマホ表示の最適化チェック

まずは状況をお聞かせください。無料で相談対応しています。

合同会社キューブリック
合同会社キューブリックが対応します
代表社員 / WEBエンジニア
相談する
WordPress

この記事を書いた人

合同会社キューブリックのアバター 合同会社キューブリック 代表社員 / WEBエンジニア

合同会社キューブリックは、福岡県に拠点を置き、WEBサイト制作やSEO改善、デジタルマーケティングを総合的に支援する企業です。中小企業・個人事業主を対象に、WordPressサイト開発、キーワード戦略の立案、コンバージョン率最適化、テクニカルSEO対策などを提供。「集客できない」「問い合わせが来ない」といった課題を抱える企業の利益最大化に向けて、テクノロジーと人の力で徹底的に伴走し、ビジネス成長を支援しています。担当WEBエンジニア:伊藤プロフィール

合同会社キューブリック

〒812-0011
福岡県福岡市博多区博多駅前一丁目23番2号
ParkFront博多駅前一丁目5階B

月~金:10:00~18:00
定休日:土曜・日曜・祝日

  • 合同会社キューブリック
  • 事業内容
  • サイト改修 自動見積り
  • お知らせ
  • コンテンツ
    • 技術ブログ
    • WEBマーケティング
    • プログラミング資格取得支援
    • ITエンジニア転職支援
  • 利用規約
  • プライバシーポリシー

© 合同会社キューブリック

目次