LION MEDIAのタグクラウドウィジェットカスタマイズ

LION MEDIAのタグクラウドの背景色を変えたいとのコメントを頂いたので、その部分だけサクっと方法を紹介します。

簡単カスタマイズ
- Before
- After
CSSを追記
初期コード

簡単カスタマイズ

色の違う部分はホバー色です。

Before

After

CSSを追記

外観→テーマエディター　からstyle.cssに追記します。

サンプル通りのコード例

注意点

「!important」を指定しないと反映されません。

.widget .tag-cloud-link{
border:none; /*枠線を消す*/
background:#c02966 !important; /*背景色*/
color:#fff !important; /*文字色*/
}
/*ホバー時*/
.widget .tag-cloud-link:hover{
color:#000000 !important; /*背景色*/
background:#ffe6fa !important; /*文字色*/
}

色変更には以下もご利用下さい。

マカロンビビッドパステル和色セーフ色名赤桃青紫黄橙緑茶黒

枠線を使う場合

.widget .tag-cloud-link{
border-bottom: 1px solid #ffe6fa;
}

CSS:ボーダースタイル

余白を変える場合

.widget .tag-cloud-link{
padding:15px 20px;
}

padding:15px 20px;　の部分はお好きなサイズに変更して下さい。

上記の例だと上下が15px、左右が20px　になります。

ちなみにPadding指定は以下の通りです。

値を1つ指定：指定した値が[上下左右]
値を2つ指定：記述した順に[上下][左右]
値を3つ指定：記述した順に[上][左右][下]
値を4つ指定：記述した順に[上][右][下][左]

CSS：余白

CSSが反映されない場合

CSSコードを記述したのに変化がない場合は、キャッシュをクリアして下さい。

以下も参考にして下さい。

CSSとは？　CSSの基本とセレクタ・プロパティ一覧＋使用例

CSSとは？ CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページをデザインする為、スタイルを記述する言語です。 CSSは、HTMLと組み合わせて使用します。 HTML（エイチティーエ...

初期コード

LION MEDIA（親）のスタイルシートでは以下のように記述されています。

他に変更したいものがあれば、以下を参考にCSSを追記し、反映されないようであれば「!important」を使ってお試しください。

初期コード

/*タグクラウドウィジェット*/
.widget .tag-cloud-link{
position:relative;
display: inline-block;
padding: 10px 40px;
border-radius: 5px;
font-size: 1.3rem !important;
border: 1px solid #f0b200;
color: #f0b200;
background:transparent;
cursor:pointer;
transition: .2s;
padding: 10px;margin-bottom:10px;
font-size:1.2rem;
}
/*ホバー時*/
.widget .tag-cloud-link:hover{
color:#ffffff !important;
background:#f0b200;
}

その他「LION MEDIA」テーマに関する記事は以下にあります。

LION MEDIA