Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

SWELL カスタマイズ

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

INDEX

SWELLについて

\ ぜひ使って欲しい /

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

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

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

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

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

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

CSSを追記します。

swell ウィジェット人気記事
/*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の追記が必要です。

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


Swell タブ
Swell タブ
メインカラーの状態

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

Swell タブ
Tab1の色
.is-style-default .c-tabList__button[aria-selected="true"]{background-color:#A4D03B}

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

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

Swell タブ
Tab2の色
.is-style-default .c-tabList__button{background-color:#ccc;color: #333;}

デモサイトの設定

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

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

INDEX
閉じる