[WordPress] SWELL デザインのカスタマイズ あれこれ

このサイトで使用している人気のWordPressテーマ「SWELL」は、そのままでも十分なのですが、カスタマイズしたい事もありますよね。質問を頂きましたので、ご紹介します。コピペでOKです。随時書き足して行く予定です。

SWELLについて

＼ ぜひ使って欲しい ／

高機能、驚きの使い心地
プログラミング不要で素敵なサイトが作れます

カスタマイズいろいろ

SWELL公式サイトへ

このサイトもSWELLを使用しています。有料(買い切り）ではありますが、高機能です。機能もどんどん追加されていて、コスパが良いと思います。

メンテナンスもバッチリなので、知識が無くても安心してブログの運営が出来ます。

表示スピードが速いので検索対策としても十分です。表示スピードの改善はプラグインを使用してもなかなか上手く行かないものです。組み込まれているので楽です。

SWELL関連の投稿一覧

子テーマ　要る？要らない？

Swellを使う場合、基本的には子テーマは不要です。子テーマが必要な方というのは、function.phpや、その他のテンプレートファイルをカスタマイズしたい方です。

Swellはファイル構造がかなり複雑なので、あまりお勧めしません。なので、CSSの追記は、「外観」 → 「カスタマイズ」のCSSの所に書いて下さい。

やっぱり子テーマが必要な方は、購入後にマイページからダウンロードできます。

Swell Plus

 エディタから呼び出し可能な装飾アイコン（Font Awesomeのアイコン）が追加されている子テーマです。

【逆引き】SWELLデモサイト ★[設定…

SWELL子テーマ「SWELL PLUS」で機能拡張【アイコン、目次ハイライト】 | 【逆引き】SWELLデモサイト ★[設定… シンプルなSWELLに最小限の機能追加 「SWELL PLUS」は、WordPressテーマ「SWELL」に装飾機能を追加する子テーマです。 1) SWELLに装飾アイコンを追加 アイコンフォント（絵…

画像サイズ

表示速度にも影響するので、大きくて高画質が良いとは言い切れません。あくまで目安です。公式サイトのサイズもSwellのデモページの場合は少し異なる事もあります。臨機応変に対応して下さい。

人気記事のランキングの色を変える

ウィジェットにある「[SWELL]人気記事」。cocotiieの場合はサイドバーのPopular Post一覧の数字の背景色を好きな色にする方法です。

CSSを追記します。

/*3位までの例*/
.-w-ranking .p-postList__item:nth-child(1)::before {
    background-image:none;
    background-color:#f7dc11;
  }
.-w-ranking .p-postList__item:nth-child(2)::before {
    background-image:none;
    background-color:#A4D03B;
  }
.-w-ranking .p-postList__item:nth-child(3)::before {
    background-image:none;
    background-color:#539da4;
  }

タブの色を変える

SWELLの標準機能として、「タブブロック」があります。とても便利で優れた機能です。

タブの色は「メインカラー」が使用されます。変更するにはCSSの追記が必要です。

メインカラーの設定は、「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」にあります。

選択されているタブの色を変える

.is-style-default .c-tabList__button[aria-selected="true"]{background-color:#A4D03B}

選択されていないタブの色を変える

Tab１の色に加え、Tab２にも色を付けたい場合は、CSSを更に追記します。

.is-style-default .c-tabList__button{background-color:#ccc;color: #333;}

デモサイトの設定

公式サイトで配布されているデモサイトのデータ。これは、子テーマを配布している訳ではなく。カスタマイザーの設定データを配布しています。ダウンロードしたデモサイトの.datファイルをインポートします。以前のデータは上書きされます。ご注意下さい。

設定方法

[WordPress]カスタマイザーの移植に Customizer Export/Import WordPressのテーマをカスタマイズし、子テーマを他のサイトにコピーしても、カスタマイザーの設定までは移植できません。それを可能にしてくれるプラグイン「Customizer…