*

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

公開日: : 最終更新日:2018/10/04 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;

}

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

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


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


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


スポンサーリンク



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


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

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

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


マウスオーバー時の背景色
フォントサイズ(16→14)・枠線の色も変えて、最終的に次のようになりました。


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


以上で終了!

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


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

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

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

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



にほんブログ村

スポンサーリンク




スポンサーリンク




Message

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


ほどけにくい靴ひもの結び方 イアンとベルルッティ

スニーカーや革靴など、靴ひものある靴で歩いていて紐がほどけて困った

大掃除は断捨離に最適!見直しや不要品の手放しのチャンス

大掃除の時期には10月はまだ早いけど、時間のかかる無精者には

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

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

クリームパン足?足のむくみには名前があった・・対処方法は

なんだか最近足のむくみ方がかわってきました。 今まではふくら

イメージマップがスマホでずれる!プラグインで簡単解決

イメージマップがスマホでは位置がずれてしまい、予期せぬところにリンクし

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中

    好きなものは
    アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    ・チョコレート・中島みゆきさんの歌・・

    やりたいことは・・
    空を飛びたい・馬に乗って自由に
    走り回りたい・猫を飼いたい・・

    いろいろあるけど、
    まずは資金と自由な時間を確保
    しないと進まない。
    日々どうしたらできるか考えながら
    リアル仕事に追われています。

PAGE TOP ↑