Web Design

WordPress タグクラウドの「フォントサイズ」や「枠線」をカスタマイズする方法

ワードプレスの「タグクラウド」をカスタマイズする方法を紹介します。

タグクラウドの「フォントサイズ」や「枠線」をカスタマイズする方法

WordPress(ワードプレス)のタグクラウドの「フォントサイズ」や「枠線」をCSSを使ってカスタマイズする方法を紹介します。デフォルトの設定のままでもいいのですが、デザインに合わせたり見た目にこだわりたい方は、タグクラウドをカスタマイズしてみましょう!

タグクラウドの「フォントサイズ」や「枠線」をカスタマイズする方法

タグクラウド(デフォルトの状態)

タグクラウドの「フォントサイズ」を変更する方法

ワードプレスのタグクラウドの「タグ」は使用するテーマによっても違いますが、ほとんどの場合「フォントサイズ」が大きくなりサイズにバラつきがあります。デザイン的にもサイズを揃えたい方は下のCSSのコードで変更しましょう。タグクラウドは「tagcloud」というクラス名なので、そのリンクである「a」のフォントサイズを指定します。デフォルトのフォント設定よりもCSSを優先させるために後ろに「!important」を付けます。これでタグのフォントサイズが揃うので、かなりスッキリした見た目になると思います。

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

タグクラウドの「フォントサイズ」を変更する方法

タグクラウド(フォントサイズを揃えた状態)

タグクラウドのフォントに「枠線」をつける方法

タグクラウドのフォントに「枠線」をつける方法もCSSを使って簡単にカスタマイズできます。下のCSSコードをコピペして変更してみて下さい。下のコードはタグクラウドのフォントに枠線をつけて、更にフォントサイズも揃うようになります。

/* タグクラウドのフォントに枠線をつけてフォントサイズも揃える */
.tagcloud a {
    font-size: 11px !important;
    border: solid 1px #ffffff;
    border-radius: 5px;
    display: inline-block;
    padding: 5px;
    margin-bottom: 8px;
}

タグクラウドのフォントに「枠線」をつける方法

タグクラウド(枠線をつけてフォントサイズを揃えた状態)

こんな感じで、ワードプレスのタグクラウドを簡単にCSSでカスタマイズすることができます。フォントサイズは「px」の数字を変更すれば変えることができますし、枠線の色や太さは「border」から変更できます。ワードプレスのCSSを変更する方法は、管理画面にあるメニューの「外観」から「CSS編集」を選択して、CSSのコードをコピペして追加します。

この記事が気に入ったら
いいね ! しよう

Twitter で
Tags