*

Stinger3でタグクラウドのスタイル変更 文字サイズや枠線

公開日: : 最終更新日:2020/12/13 WordPress

 

サイドバーにあるタグの表示がどうも気になります。

よく使われるタグのフォントサイズが大きくなるようで、不揃い感が半端ないです。

気持ちよく並べたいとフォントサイズの統一や枠線で飾るなど変更してみました。

テーマはStinger3です。

スポンサーリンク

 

タグクラウドのスタイル変更

その1 タグクラウドのフォントサイズを揃える

よく使われるタグは大きくなるようで汚いというか・・はかなり見にくいので、

 

文字を同じサイズに統一してから別の方法で表現できるようにしたいと思います。

CSSをいじるようなので、とりあえずバックアップしてから!

 

スポンサーリンク

 

 

手 順

ダッシュボードの「外観」⇒「テーマの編集」⇒「スタイルシート」と開き

スタイルシートの最後に以下を追加記述します。


/* タグクラウドのフォントサイズを統一 */
.tagcloud a {
font-size: 16px !important;
}

記述できたら「ファイルを更新」をクリックします。

結果はこんな感じです。

 

その2 タグクラウドの文字を枠線で囲む

文字サイズが揃っただけでもスッキリはしたのですが、味気ないというか・・・

なので個々のタグに枠線をつけてみました。


/* タグクラウドのフォントサイズ統一 */
.tagcloud a {
font-size: 16px !important;
border: solid 1px #000080;
border-radius: 5px;
display: inline-block;
padding: 5px;
margin-bottom: 8px;
</span >
}

先ほどのフォントサイズ統一の後に赤字の部分を追記します。

フォントサイズも枠線の色も好みで変更できます。

 

表示結果は次のようになります。

だいぶいい感じになってきました(^^)

 

スポンサーリンク

 

その3マウスオーバー時に背景色をつける

タグクラウドにマウスオーバーしたときに背景色が付くようにしました。

スタイルシートに次の記述を追加。


/* タグクラウドのマウスオーバー時の背景色 */
.tagcloud a:hover {
background-color: #f6bfbc;
text-decoration: none;
color: #000;
}

マウスオーバー時の背景色

フォントサイズ(16→14)・枠線の色も変えて、最終的に次のようになりました。

タグクラウドスタイル変更

以上で終了!

 

Stinger3のタグクラウド編集 さいごに

CSSの知識もないまま、様々なサイトを探し回り・・・

今回のタグクラウドのスタイルの変更ももっと他のやり方もみつけましたが

一番失敗が少なそうな(^^; 簡単なやりかたを参考にさせていただきました
<(_ _)>
(参考:西沢直木のIT講座)

タグが見やすくなったところでもう一度カテゴリーやタグの見直しをしなくちゃ・・というところですね(^^;)

 

WordPressの他の記事は WordPress記事一覧から

 


にほんブログ村

スポンサーリンク




スポンサーリンク




Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


コロナ禍でのアクリルパーテーションの手入れとゴミの出し方

コロナで自粛が続く中、飲食店や会社でもコロナ対策としてアクリルパー

コロナ禍のマスク生活 呼吸が楽なインナーカップとカラーマスク購入

まだまだコロナは収まりそうにないので、マスク生活は続きそうです。

手の痺れはビタミンB12不足が原因? コロナ禍で処方箋を貰った方法

腱鞘炎で痺れと力が入らないという症状から処方してもらっていた薬は、

節分て2月3日じゃなかった?!2021年の節分は2月2日!そのわけは

節分は2月3日!と、もう、ずっと思い込んでいたのに・・ なんと2

狭い部屋にも違和感のないミニ仏壇でお位牌に仮の家を!

前回の記事てお仏壇や位牌のことを調べて書きましたが、迷った末にやっ

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中
    好きなものは・・・アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    やりたいことは・・いろいろあるけど、まずは資金と自由な時間を確保しないと進まない。日々どうしたらできるか考えながらリアル仕事に追われています。

  • BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール

  • 手軽に雑誌が読める!
    楽天マガジン

PAGE TOP ↑