LION MEDIAのタグクラウドの背景色を変えたいとのコメントを頂いたので、その部分だけサクっと方法を紹介します。
簡単カスタマイズ
色の違う部分はホバー色です。
Before
After
CSSを追記
外観→テーマエディター からstyle.cssに追記します。
サンプル通りのコード例
注意点
「」を指定しないと反映されません。
.widget .tag-cloud-link{
border:none; /*枠線を消す*/background:#c02966 ; /*背景色*/color:#fff ; /*文字色*/}
/*ホバー時*/.widget .tag-cloud-link:hover{
color:#000000 ; /*背景色*/background:#ffe6fa ; /*文字色*/}
色変更には以下もご利用下さい。
枠線を使う場合
.widget .tag-cloud-link{
border-bottom: 1px solid #ffe6fa;
}
余白を変える場合
.widget .tag-cloud-link{
padding:15px 20px;
}
padding:15px 20px; の部分はお好きなサイズに変更して下さい。
上記の例だと上下が15px、左右が20px になります。
ちなみにPadding指定は以下の通りです。
値を1つ指定： 指定した値が[上下左右]
値を2つ指定： 記述した順に[上下][左右]
値を3つ指定： 記述した順に[上][左右][下]
値を4つ指定： 記述した順に[上][右][下][左]
値を2つ指定： 記述した順に[上下][左右]
値を3つ指定： 記述した順に[上][左右][下]
値を4つ指定： 記述した順に[上][右][下][左]
CSSが反映されない場合
CSSコードを記述したのに変化がない場合は、キャッシュをクリアして下さい。
以下も参考にして下さい。
CSSとは？ CSSの基本とセレクタ・プロパティ一覧＋使用例
CSSとは？ CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページをデザインする為、スタイルを記述する言語です。 CSSは、HTMLと組み合わせて使用します。 HTML（エイチティーエ...
初期コード
LION MEDIA（親）のスタイルシートでは以下のように記述されています。
他に変更したいものがあれば、以下を参考にCSSを追記し、反映されないようであれば「」を使ってお試しください。
初期コード
/*タグクラウドウィジェット*/.widget .tag-cloud-link{
position:relative;
display: inline-block;
padding: 10px 40px;
border-radius: 5px;
font-size: 1.3rem ;
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 ;
background:#f0b200;
}