>> リニューアルや機能停止など 当サイトのお知らせはこちら →
PR

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

WordPress・カスタマイズ
この記事は約3分で読めます。
     

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

 


 

簡単カスタマイズ

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

Before

LION MEDIA タグクラウド

 

After

LION MEDIA タグクラウド

 

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

コメント

タイトルとURLをコピーしました