WordPress

AFFINGER5でタグクラウドの背景(バックグラウンド)カラーをカスタマイズしたい!薄くなるのを直したい!

投稿日:

AFFINGER5でサイドバーに表示するタグクラウドのカラーを好みの色に変更するカスタマイズ方法をシェアします。またデフォルトでは50%透過になっているため、指定したカラーが薄く表示されてしまいます。これを100%不透明に直す方法を併せてご紹介します。

この変更にはstyle.cssへの記述が必要となります。子テーマの作成およびstyle.cssのコピーは完了しているものとします。

ここではFTPクライアントソフトとテキストエディタを使いファイルごとカスタマイズする方法を解説します。基本操作はこちらをご参照ください。

また変更後は確認作業のためブラウザのキャッシュのクリアを推奨します。Googleクロームの操作はこちらをご参照ください。

 

通常のタグクラウドのカラーのカスタマイズ

AFFINGER5でタグクラウドのカラーのカスタマイズを実行するには、通常、ダッシュボード「外観」>「カスタマイズ」>「[+]各テキストとhタグ(見出し)」>「タグクラウド」のパネルを操作します。

tagcolor03

しかしここでは文字色とボーダー色しかカスタマイズできません。この記事では「カスタマイズ」の設定を上書きする形で、背景色も含めて好みのカラーに変更、自動透過表示を直します。

 

背景色を設定し、透過せず表示したい

style.cssの必要な場所につぎのコードを記述してください。

「style.cssの必要な場所」とは:

AFFINGERではスマートフォン、タブレット、PCの各モニターサイズによる記述場所が明確に区分されています。また全サイズに対して一括で適用することができます。今回の記述についてIT-SORAYORIは「全サイズ」に指定しました。

記述するコード

各コードの説明

border: none;

枠線を消しています。枠線を入れたい場合はその下の行同様に「#任意のカラーコード」に差し替えてください。Webカラーのコードを調べるにはこちらのサイトが便利です。

background-color: #bbe2f1;

背景色を指定しています。現在は「ベビーブルー」です。「#任意のカラーコード」に差し替えてください。

color: #0073a8!important;

文字色を指定しています。現在は「エジプシャンブルー」です。「#任意のカラーコード」に差し替えてください。「!important」は変更が反映されにくい場合に使用します。

opacity: 1.0;

数字の「1.0」は100%不透明を指定しています。デフォルトではこの数字が「0.5」となっているため自動で50%透過されていました。「0.0から1.0 」まで10%刻みで透過度を指定できます。

この「opacity」の指定によってデフォルトでは

と表示されてしまうものが

とクリアに表示できます。

 

文字と枠線を透過せず表示したい

なお背景色が不要の場合はテーマの「カスタマイズ」とstyle.cssの以下の記述のみで文字色と枠線色をクリアに表示できます。

 

以上、タグクラウドのカラーのカスタイマイズ方法でした。

 

お役立ち記事

171106twittertsuchi2 1
pdfedit 2
Twitterスパムアイキャッチ 3
photo_gallery10 4
spotify_1807 5
ipodアイキャッチ 6
yahoo_auc_eye 7
プリンター250 8
Evernote新機能01 9
無線LAN04-2 10
zenfone_filedelete46 11
kensaku05 12
googlesite02 13
spotify_sf_size01 14

-WordPress
-

Copyright© IT-SORAYORI , 2018 All Rights Reserved.