Loading
MENU
  • Worksお仕事のこと
  • About私について
  • Blogブログ
  • Contactお問い合わせ

HOME

WORKS
お仕事

ABOUT
私のこと

BLOG
ブログ

CONTACT
お問い合わせ

HiranoAsaco|Portfolio
  • Worksお仕事のこと
  • About私について
  • Blogブログ
  • Contactお問い合わせ
HiranoAsaco|Portfolio
  • Worksお仕事のこと
  • About私について
  • Blogブログ
  • Contactお問い合わせ
  1. Home
  2. Web
  3. SWELLカスタマイズ
  4. SWELLをダークモードに:準備編

SWELLをダークモードに:準備編

2026 3/06
2026.03.06

SWELLをダークモードに:準備編

ⓘこのページにはプロモーションが
含まれています。

今回はSWELLにダークモード設定を作るための準備編となります。

SWELL購入はこちら
  1. SWELLの子テーマを入れる
    • 子テーマの設定のやり方
  2. プラグイン「Code Snippets」を入れる
    • プラグインの設定のやり方
    • Code Snippetsの使い方
    • function.phpを直接触らない理由
    • 注意点
  3. プラグイン「Simple Custom CSS and JS」を入れる
    • Simple Custom CSS and JSの使い方
    • カスタムCSSではいけない?
  4. 終わりに

1.SWELLの子テーマを入れる

SWELLはアップデートがあるためせっかく作ったコードも消えてしまう可能性があります。

なのでまずは子テーマをダウンロードしておく必要があります。

SWELL
SWELL子テーマのダウンロード | WordPressテーマ SWELL SWELLの子テーマは、会員サイトマイページよりダウンロード可能です。 子テーマは無料です。子テーマに自動更新機能はございません。親テーマであるSWELLをご購入してご使…

子テーマの設定のやり方

  • SWELLのマイページから子テーマをダウンロードする
    • マイページからSWELL製品ダウンロードにある「子テーマ」をダウンロードする
      ※zipファイルは展開しないこと!
  1. WordPressのテーマへ追加する
    • WordPressの管理画面から「外観」 「テーマの追加」
       「テーマのアップロード」へダウンロードしたデータを入れる
  1. 子テーマを有効化する

2.プラグイン「Code Snippets」を入れる

WordPress.org 日本語
Code Snippets An easy, clean and simple way to enhance your site with code snippets.

このプラグインはfunction.phpを直接触らずともコードの入力ができるものです。たとえ子テーマがアップデートされてもこちらにデータが残るので、消えることはありません。データ自体も取り出したり、自身で記入したコードをこのプラグイン内に入れることも可能です。

プラグインの設定の仕方

  • プラグインを探す
    • WordPressの管理画面から「プラグイン」 「プラグインを追加」
       検索画面で「Code Snippets」を入力する 「有効化」
プラグインCode Snippets

function.phpを直接触らない理由

function.phpを直接触って編集すると、たった一つのコードを入力しただけでも「真っ白」になってしまうことがあります。今回はそれを避けるため、このプラグインを設定します。

今回のダークモード以外にも、function.phpを触らずに設定したい時におすすめです!

注意点

無料で登録できるのは5つまでです。それ以上登録したい場合は有料になるので注意!
※一つのスニペッドにすべて入力してしまえばいいかもしれませんが。


3.プラグイン「Simple Custom CSS and JS」を入れる

WordPress.org 日本語
Simple Custom CSS and JS 最高のエディタで、ウェブサイトに独自の CSS や JS を簡単に追加できます。

カスタムCSSにコードを入れるのもいいけど、私はこちらに打ち込んで使用しています。CSSだけでなく、HTMLやJSも追加できるとても便利なプラグインです。登録の仕方は上記と同じです。

プラグインSimple Custom CSS and JS

カスタムCSSではいけない?

カスタムCSSに入力してもいいのですが、どこに何のコードを入れたのかがわからなくなってしまうので…。整理するためにも私はこちらに入力することが多いですね。

プラグインSimple Custom CSS and JS設定画面

4.終わりに

今回は準備編として子テーマの設定とコード入力のためのプラグインの紹介をしました。ダークモード設定以外でもテーマの設定を替えたい方には便利かもしれませんね。では、次回。

  • URLをコピーしました!
応援よろしくお願いします‼  


Web SWELLカスタマイズ
  • WordPressのテーマを「SWELL」へ変更しました。

Category
-カテゴリー-

アジアイトトンボのメス
Photo
カメラのこと
松ぼっくり
Web
サイト運営のこと
ZINE
自主製作本のこと
オウムガイのイラスト
Drawing
スケッチ・イラスト
など

Works

  • Design
  • ZINE
  • Comic

Web

  • WordPress
  • SWELLカスタマイズ

Photo

  • Film
  • Digital
  • Lens

Book

  • ZINE
  • Leading

Design

  • Photoshop
  • Illustrator
  • PrivacyPolicy
  • Links

© 2022 Hirano Asaco