SWELLの人気記事ランキングにあるラベル色を変更するカスタマイズ方法

この記事ではWPテーマ「SWELL」のウィジェットにある

• 人気記事ランキング

についているラベルの色を簡単に変える方法をメモしておきます。

「SWELL」のウィジェットにある人気記事ランキングの１位・２位・３位に付いているラベルは、デフォルトで

• 金
• 銀
• 銅

に設定されています。

ただ

• キラキラをとりたい
• もっとシンプルにしたい
• 自分の好きな色に変更したい

といった要望もあると思うんです。

ということで、以下この部分の色を変えるCSSを紹介しておきます。

細かい部分ですが気になる人もいると思うので、よろしければコピペして使ってくださいね。

また「SWELL」を使っていて

• HTML
• CSS

の知識がサッパリないというブロガーさんもいると思いますので、なるべく簡単に解説します。

以下、参考にしてください。

ただし素人のカスタマイズなので、トラブル等の責任は取れません。あくまで自己責任でお願いします。

SWELL公式HPはこちら

SWELLのSNSシェアボタンの色を変えるコード

やり方はとても簡単です。

「SWELL」のカスタマイズの一番下に「CSSの追記」という部分がありますよね。

以下のコードをコピー＆ペーストするだけです。

/* 人気記事ランキングのラベルをシンプルに */
.-w-ranking .p-postList__item:nth-child(1)::before {
  background-image:none;
	background-color:#d4b572;
}
.-w-ranking .p-postList__item:nth-child(2)::before {
    background-image:none;
	background-color:#aaabab;
}
.-w-ranking .p-postList__item:nth-child(3)::before {
  background-image:none;
	background-color:#b15a5e;
}

簡単に説明をしておくと

• background-image:none
• ＝キラキラを消している部分

です。

カラー指定は、私が使っている色になっています。

上から順に、１位２位３位と並んでいるのでそれぞれ

• background-color:#カラーコード入れる;

と考えてください。

カラーコードの選び方

カラーコードは、一覧になっているサイトを参考にするといいです。

私はいつもこちらを使っています。

原色大辞典

WEB色見本 原色大辞典 – HTMLカラーコード 色の名前とカラーコードが一目でわかるWEB色見本

ちなみにカラーに関しては

• Googleの拡張機能

がおすすめです。

画面上の色のカラーコードを調べることができる機能はいくつかあるのですが、私は

• Colorgrab

というのを現在は使っています。

気になった部分のカラーコードをすぐにチェックできるので何かと便利でおすすめです。

ちょっと変わったデザインにしてみる

ここまでのカスタマイズで、SWELLのウィジェットにある記事ランキングのラベルの色を変えられたはずです。

ちなみに私の場合は

• 形をちょっと変える
• １位のラベルだけ大きくする

というカスタマイズを行って、このようになっています。

素人カスタマイズですが、気に入ったという方がいればコピペして使ってください。

PCとモバイル版でサイズが違うので分けています。

/*人気記事ランキングのラベル(PC)*/
.-w-ranking .p-postList__item:nth-child(1)::before {
  background-image:none;
	background-color:#d4b572;
	font-size:20px;
	border-radius:0px 10px;
}

.-w-ranking .p-postList__item:nth-child(2)::before {
  background-image:none;
	background-color:#aaabab;
	font-size:16px;
	border-radius:0px 10px;
}

.-w-ranking .p-postList__item:nth-child(3)::before {
  background-image:none;
	background-color:#b15a5e;
	font-size:16px;
	border-radius:0px 10px
}
/*(Mobile）*/
@media(max-width:768px){
.-w-ranking .p-postList__item:nth-child(1)::before {
  background-image:none;
	background-color:#d4b572;
	border-radius:0px 10px
}

.-w-ranking .p-postList__item:nth-child(2)::before {
  background-image:none;
	background-color:#aaabab;
	border-radius:0px 10px;
	font-size:10px;
}

.-w-ranking .p-postList__item:nth-child(3)::before {
  background-image:none;
	background-color:#b15a5e;
	border-radius:0px 10px;
	font-size:10px;
}
}

色は先程と同じように変えられます。

「border-radius」という部分は、丸みの調整です（消すと四角に戻ります）

繰り返し追記しますが、トラブル等の責任は負えません。あくまで自己責任でご利用ください。

Googleの検証機能を知っていれば簡単

ちなみにこういったカスタマイズは、Googleの検証機能を使って行っています。

使い方は簡単で

• Google Chrome上で右クリック
• 検証

を選択するだけです。

そうすると表示されているページのコードを見ることができます。

あとは基礎的な

• HTML
• CSS

の知識があれば、簡単な色の設定や形を変えることが可能です。

HTMLとCSSに興味がある人は「Progate」だけでも、１時間くらいやるのをおすすめします。

基礎の部分だけ無料で学習できるので、知らなかったらぜひ参考にしてください。

Progate

Progate(プロゲート) | Learn to code, learn to be creative. Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

Progateは簡単すぎるorもっと本格的にHTML＆CSSを学びたいという人には

• Udemy

がおすすめです。

セール時に２万円くらいのコースを1000円くらいで購入でき、私もかなり愛用しています。

他にも

• Photoshop
• Illustrator
• PHP
• Javascript

などブログ運営に役立つ知識を学べるコースが多いです。

気になる人は、ぜひチェックしてみてください。

＼セール時が狙い目／

Udemyの公式HPはこちら

それでは、当記事が同じSWELLユーザーの参考になれば幸いです。

最後まで読んでくださり、有難うございました！