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

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

SWELLについて

＼ ぜひ使って欲しい ／

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

カスタマイズいろいろ

SWELL公式サイトへ

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

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

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

SWELL関連の投稿一覧

画像サイズ

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

WebPに変換しておくと良いと思います。プラグインで変換するより、面倒でも1枚づつ作る事をお勧めします。

あわせて読みたい

画像圧縮 おすすめツール２選 Squoosh ,Tiny PNG PageSpeed Insightsに気に入られよう画像は軽量化する必要があります。最近はPageSpeedがWebPの使用を推奨してきます。無料で軽量化や変換ができるツールをご紹介します…

PCだけスマホだけ（表示）

「高度な設定」にclassを追記できるので、便利ですね。

PCだけ表示、スマホだけ表示と使い分けるには、classを付けます。pc_only　か　sp_only

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

ウィジェットにある「[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…

広告タグのボタンの色を変える

カスタマイザー等で色の設定はできません。CSSを書き足します。ボタンを１つしか使わない場合は-btn1だけでOKです。

はじめてでもできる GitとGitHubの教科書

2,640円（書籍版）

詳しくみる

.p-adBox__btn.-btn1{background:#4886CD;}
.p-adBox__btn.-btn2{background:#4886CD;}