[WordPress] SWELL デザインのカスタマイズ あれこれ
このサイトで使用している人気のWordPressテーマ「SWELL」は、そのままでも十分なのですが、カスタマイズしたい事もありますよね。
基本的にはコピペでOKです。随時書き足しています。
SWELLについて
このサイトもSWELLを使用しています。有料(買い切り）ではありますが、高機能です。機能もどんどん追加されていて、コスパが良いと思います。
メンテナンスもバッチリなので、知識が無くても安心してブログの運営が出来ます。
表示スピードが速いので検索対策としても十分です。スピードの改善はプラグインを使用してもなかなか上手く行かないものです。組み込まれているので楽です。
きっと理想のサイトを作る事が出来ると思います。
画像サイズ
表示速度にも影響するので、大きくて高画質が良いとは言い切れません。あくまで目安です。公式サイトのサイズもSwellのデモページの場合は少し異なる事もあります。臨機応変に対応して下さい。
| 画像 | 公式サイト | バリエーション |
|---|---|---|
| ロゴ | 1024x230px | 1024×159～230 |
| ファビコン | 512x512px | – |
| アイキャッチ | 1200×630px | 730x400px(2カラム時） |
| コンテンツヘッダー | 1600x | 1600x180px |
| メインビジュアル（PC） | 1600×900px | 1280ｘ |
| メインビジュアル(スマホ） | 960px | – |
| 吹き出し用 | 600x600px 以下でもOK |
WebPに変換しておくと良いと思います。プラグインで変換するより、面倒でも1枚づつ作る事をお勧めします。
PCだけスマホだけ（表示）
「高度な設定」にclassを追記できるので、便利ですね。
PCだけ表示、スマホだけ表示と使い分けるには、classを付けます。pc_only か sp_only
人気記事のランキングの色を変える
ウィジェットにある「[SWELL]人気記事」。cocotiieの場合はサイドバーのPopular Post一覧の数字の背景色を好きな色にする方法です。
/*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ファイルをインポートします。以前のデータは上書きされます。ご注意下さい。
広告タグのボタンの色を変える
カスタマイザー等で色の設定はできません。CSSを書き足します。ボタンを１つしか使わない場合は-btn1だけでOKです。
.p-adBox__btn.-btn1{background:#4886CD;}
.p-adBox__btn.-btn2{background:#4886CD;}目次の背景色
目次の背景色は、サイトの背景色と設定した色が使われます。ちょっと違うなぁと思った時は、CSSで上書きする事が出来ます。
外観→カスタマイズ→
サイト全体→基本カラー→「背景色」
サイトの背景をピンクにしたので、ピンクのグラデーションになりました。グラデーション部分と、べた塗の2層構造になっています。
目次の背景の部分のCSSで、var(–color_bg)が使用されているので、具体的な色で上書きすればOK。
.p-toc.is-omitted:not([data-omit=nest]):before {
background: linear-gradient(hsla(0,0%,100%,0),var(--color_bg));
.
.
}
.p-toc.is-omitted:not([data-omit=nest]):after {
background: var(--color_bg);
.
.
}書き換え後（好きな色にして下さい。
//目次
.p-toc.is-omitted:not([data-omit=nest]):before {
background: linear-gradient(hsla(0, 0%, 100%, 0), #F6F7F7);
}
.p-toc.is-omitted:not([data-omit=nest]):after {
background:#F6F7F7;
}
コメント ※ハンドルネームでお願いします