【Stinger7】右サイドバーのタグクラウドの文字左にアイコンをカスタマイズ

      2016/03/11

【Stinger7】右サイドバーのタグクラウドの文字左にアイコンを挿入する方法

@yuichico_です。ブログ訪問者をヘビーユーザーにするには、内容の濃い記事はもちろんのことです。タグクラウドやカテゴリーを掲載することでブログを見てもらうことでも、ヘビーユーザーが獲得されます。とあるスマートフォン関連ブログを見ていて、ムービーの画質に関する記事はどこにあるんだろうと必死になって探しましたが、なかなか見つけられず、さらに検索窓で検索しようかと思ったらその検索窓もなく、もういいやとおもい離脱して最終的にはGoogleの検索で site: ○○○.com/ ムービー で調べたらあった思い出があります。〇〇〇はスマートフォン関連ブログのURLです。もし、その検索方法でなかったら、また1から探していました。Googleの検索の仕方を知っている人がいれば問題ないですが、ほとんどの人は先程のような検索はしません。ですので、タグクラウドやカテゴリーは大事です。見栄え良くカスタマイズしてみましょう。完成図はこんな感じです。

【Stinger7】右サイドバーのタグクラウドの文字左にアイコンを挿入する方法 完成

スポンサードリンク

ダウンロードとインストール

リンク  Stinger7親テーマと子テーマのダウンロードとインストールのやり方

子テーマで編集することでさまざまなメリットがでてきます。

ウィジェット

タグクラウドを設置しましょう。まずは外観→ウィジェット

ウィジェット選択

枠を左クリックしながら、右の再度バーウィジェットの赤い四角の枠へドラッグ&ドロップ

タグクラウドをサイドバーウィジェットにドラッグ&ドロップ

イトルを入力するところに タグクラウド と入力します。そのあと下にある保存をクリックします。

タグクラウドと入力、保存をクリック

追加されました。

タグクラウドが追加された

ご自身が運営しているブログを見てみてください。右サイドバーにタグクラウドが追加されているはずです。

※記事投稿の際に タグ を追加しないと反映されません。

CSS

順に説明していきます。コピペでできますので、ぜひやってみてください。外観→テーマ編集→style.cssをクリック。以下をstyle.cssの一番下へ挿入

 

※2016/03/10追記

タグのフォントサイズがすべて同じじゃないとの、メッセージをいただきましたので、ここに掲載します。

a:before

文字の前(左)に装飾しますよ という意味です。この場合だとタグの文字の前(左)に FontAwesomeで アイコンをいれます。という意味になります。

a.tag-link

Cyberduckの文字tag-link-14とFontawesomeの文字tag-link-35はローマ字でしたので、日本語の文字の上幅と下幅に合わせてカスタマイズしました。日本語のみのタグでしたら、このカスタマイズは入りません。

まとめ

アイコンを入れることで、よりデザイン性が高くなり、見栄えが良くなりました。FontAwesomeはブログだけではなくHP制作など幅広く、使われるのでぜひ、利用してみてください。

シェアしていただけると助かります。

 - Stinger7, カスタマイズ