LION MEDIAのタグクラウドの背景色を変えたいとのコメントを頂いたので、その部分だけサクっと方法を紹介します。
簡単カスタマイズ
色の違う部分はホバー色です。
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;
}
余白を変える場合
.widget .tag-cloud-link{
padding:15px 20px;
}
padding:15px 20px; の部分はお好きなサイズに変更して下さい。
上記の例だと上下が15px、左右が20px になります。
ちなみにPadding指定は以下の通りです。
値を1つ指定: 指定した値が[上下左右]
値を2つ指定: 記述した順に[上下][左右]
値を3つ指定: 記述した順に[上][左右][下]
値を4つ指定: 記述した順に[上][右][下][左]
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」テーマに関する記事は以下にあります。
コメント