Genki Wi-Fi

フリーランス イラストレーター高田ゲンキの情報発信ブログ、『Genki Wi-Fi(ゲンキ・ワイファイ)』。

*

Stinger5のタグクラウドを
かっこよくカスタマイズする方法

      2016/05/15

 - ブログ, WordPress    - ,

LINEで送る
Pocket

最近WordPressのカスタマイズにますますハマってる高田ゲンキ( genki119)です。

今日は、“Stinger5のタグクラウドをかっこよくカスタマイズする方法”を紹介したいと思います。

タグクラウド、カスタマイズ前とカスタマイズ後

↓これがカスタマイズの前と後の状態です。

tagcloud-beforeafter

デフォルトのタグクラウドも嫌いではないのですが「ちょっと見づらいな〜…」って思ってたので、右のような“タグの投稿数に関わらず、全部同じ大きさでタイル状”のタグクラウドに変更してみました。まあ、これを“かっこいい”と思うかどうかは主観なので、おなじく「かっこいい!」と思ってくれる方は参考にしてもらえたら嬉しいです。

sponsored link

カスタマイズ手順

① style.cssに記述を追加

一番下に注釈込みで追加すれば大丈夫です。子テーマを使用している人は子テーマのstyle.cssに記述してください。↑のコードは僕のブログからコピペした状態なので、このまま使うと色も踏襲されてしまいます。各自、タグクラウドの標準色(僕のブログの場合は青)を13行目の「background: #00a0ea; 」の部分で、マウスオーバーで変わる色(僕のブログの場合はオレンジ)を23行目の「background: #F99900;」の部分で設定してください。

これだけで、タグクラウドの外観上のカスタマイズ作業は終了です。

③ 「float: left;」の解除タグをテキストウィジェットで挿入

しかし、これだけだとウィジェットに適用された「float: left;」が解除されないため、下の関係ないウィジェットのテキストが流れ込んでくる現象が起きてしまいます。

tagcloud-disorder

こんなひどい状態に…

僕は知識が足りず、これをphpのソースで解除する方法がわからなかったので、「WordPressのダッシュボード」→「外観」→「ウィジェット」から、タグクラウドウィジェットの下にもうひとつ新規にテキストウィジェットを挿入し、そこに

と記述しました。

tagcloud-widget

こういう感じです

かなり無理矢理な方法ですが、これによってこのテキストウィジェットの部分でfloatが解除されて、次のウィジェットには影響しなくなるので問題解決しました。

タグの外観カスタマイズの作業は以上です。

ついでにタグの表示数を変更してみた

ところで、WordPressはデフォルトでタグ表示数の上限が45個に設定されていますが、僕はかなりタグを多用するので、この上限数を増やして、タグを全て表示させるようにしてみました。

方法は単純にfunction.phpの一番最後に下記の記述を追加するだけ(この情報は古いので、下記の「※2016年5月15日・追記」をご参照ください)。

とても簡単ですが、function.phpはほんの少しでも扱いを間違えるとサイト全体が表示されなくなってしまうので、必ずバックアップを取ってから作業してくださいね。

タグの表示上限数について

タグの表示上限数に関しては賛否両論あるかもしれません。多すぎると見栄えが悪いと思う人もいるかもしれませんし。ただ、僕はけっこう人のブログを見る時にカテゴリー一覧だけじゃなく、タグクラウドから面白そうな文字列を探すのが好きで、タグが多く表示しているブログの方がワクワクするので自分のブログもそうしてみました。逆に少なくしたい人も上記の方法で減らせるのでトライしてみてください。

※2016年5月15日・追記

上記のfunction.phpへの記述ですが、先日、WordPressのバージョンを4.5.2にアップデートしたところ、仕様変更に伴って、正しく反映されなくなってしまいました。どういう状態かというと「表示上限数は反映されるけど、style.cssでカスタマイズしたタグクラウドのデザインが反映されず、初期状態(文字が並んで、使用回数の多いタグのテキストが大きく表示される、デフォルト状態)に戻ってしまう」感じです。

結論として、function.phpへの記述を↓このように変更したところ、無事に表示されるようになりました。同じ症状が出た人は参考にしてください。

 

まとめ

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

少し前までは、Web専門で仕事をしているわけではないので、この手の記事を書くことをためらっていましたが、ちょっとでも他人の参考になるかもしれませんし、何よりこうして書き残しておくと、あとあと自分で思い出す際の備忘録としても非常に有効なので、これからも(主にStingrer5の)カスタマイズの成功例をシェアして行きたいと思います!

sponsored link


LINEで送る
Pocket


 - ブログ, WordPress    - ,




Comment

  1. kengo0831 より:

    はじめまして。只今STINGER5をカスタマイズしたブログを制作中です。タグクラウドをスタイリッシュなモノにしたくてこちらを見つけました。ところがコードを子テーマのstyle.cssの最後にペーストしても反映されませんでしたが、オリジナルファイルのstyle.cssに貼り付けた所反映されました。子テーマでの運用をしたいのですが、原因はわかりますでしょうか?
    よろしくお願いします。

    • Genki より:

      お返事遅くなりました! 記事を参考にしていただきありがとうございます。
      子テーマだと反映されない理由ですが、申し訳ありませんが僕もよくわかりません。幸い僕の場合は子テーマで反映されていますが、他の機能追加の際などに子テーマだと反映されないケースが稀にあり、そういう場合は原因究明の時間がもったいないので親テーマに書き込んで済ませてしまっています。

      お役に立てずすみません。ブログ制作、がんばってくださいね!

      • kengo0831 より:

        Genki様、回答ありがとうございました。このCSSだけが子テーマで反映されないので、いろいろ調べてみたのですが、わかりませんでした。とりあえずオリジナルに直接書込んでおきたいと思います。

Message

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

CAPTCHA


  関連記事

no image
イラストレーターにとって効果的なブログを作るために必要な5つのこと

前回のブログに引き続き、ブログ運営をするにあたって実務的な部分で注意する点を書きたいと思います。タイトルは「イラストレーターが…」としましたが、イラストレーター …

no image
Stinger5のヘッダー画像にリンクを追加し、 マウスオーバー時の透過処理を無効にする方法

前回はヘッダーのテキストを隠す方法を説明しましたが、今回はそれに引き続き、“ヘッダー画像にリンクを追加し、マウスオーバー時の透過処理を無くす方法”を説明したいと …

“genki-wifi.net”、スタート。

新しいドメインを取りました。今後はこちらで更新していきますので、ブックマーク等もこちらに変更をお願いします。 主な理由としては、使用しているエックスサーバーとサ …

no image
2015年の振り返りと2016年の展望について

明けましておめでとうございます。高田ゲンキ( genki119)です。 暮れから一時帰国中で神奈川県にいます。年末年始とばたばたしていたらいつの間にか新年も4日 …

Genki Wi-Fiの「feedly」読者数が100人を超えました!

いつもGenki Wi-Fiにアクセスありがとうございます。高田ゲンキ( genki119)です。 昨日の記事では当ブログのFacebookページが100人を超 …

当ブログ「Genki Wi-Fi」をスタートして1年が経ちました

当ブログ「Genki Wi-Fi」が、5月24日で1周年を迎えました。というわけで、ブログを1年運営してみて感じたことを書いてみます。 Contents1 1年 …

2016年を振り返ってみる

こんにちは。高田ゲンキ( genki119)です。 2016年もあと少し。ということで、今年最後の本投稿で、この一年を振り返ってみたいと思います。 sponso …

Xサーバー利用者がMarsEditで「HTTP Username」アラートが出て困った場合の対処法

ひさしぶりにブログを更新するためにMarseditを開いたところ、↓こんなアラートが出て先に進めなくなりました。 This blog is protected …

ベルリンを題材にしたブログの最高峰、 中村真人さんの『ベルリン中央駅』がリニューアル!

『素顔のベルリン』『ベルリンガイドブック』の著者、中村真人さんのブログ、『ベルリン中央駅』が、2015年8月1日で10周年を迎え、ドメインも新たにリニューアルし …

新ブログ「Genki Wi-Fi(ゲンキ・ワイファイ)」開設の解説!

新しいブログ、「Genki Wi-Fi」を作りました。今までのウェブサイトやウェブサイト内の既存のブログと並行して運営していこうと思っています。 位置づけとして …

Stinger5のタグクラウドをかっこよくカスタマイズする方法

フリーランス イラストレーター高田ゲンキの情報発信ブログ、『Genki Wi-Fi(ゲンキ・ワイファイ)』。

Copyright© Genki Wi-Fi , 2015 All Rights Reserved.