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

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

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

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

SWELL カスタマイズ

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

INDEX

SWELLについて

\ ぜひ使って欲しい /

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

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

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

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

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

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

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

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

Swell Plus

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

画像サイズ

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

画像公式サイトバリエーション
ロゴ1024x230px1024×159~230
ファビコン512x512px
アイキャッチ1200×630px730x400px(2カラム時)
コンテンツヘッダー1600x1600x180px
メインビジュアル(PC)1600×900px1280x
メインビジュアル(スマホ)960px
吹き出し用600x600px 以下でもOK

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

ウィジェットにある「[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ファイルをインポートします。以前のデータは上書きされます。ご注意下さい。

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

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

コメント ※ハンドルネームでお願いします

コメントする

INDEX