【STORK】『タグクラウド』をCSSカスタマイズ

【カスタマイズ前】

 

【カスタマイズ後】

【カテゴリーをカスタマイズ】と同じ要領で『タグクラウド』のインターフェイスも変える事ができます。以下のCSSコードを【追加CSS】に貼るだけで【カスタマイズ後】のインターフェイスに変わります。

/* タグクラウドのカスタマイズ */
.widget.widget_tag_cloud a{
font-size: 20px !important;
display: inline-block;
margin-bottom: 5px;
padding: 1px 10px;
text-decoration: none;
color: black;
border-radius: 5px;
border: 2px solid black;
background-color: white;
font-weight:bold;
transition: 0s;
}

.widget.widget_tag_cloud a:hover{
opacity:1;
color:white;
transition: 0s;
font-weight:bold;
background-color: red;
}

さらに自分好みの外観にしたい場合は、以下の『コード説明』を参考にしながらカスタマイズしてください。

 

コード束①

/* タグクラウドのカスタマイズ */
.widget.widget_tag_cloud a{
font-size: 20px !important;
display: inline-block;
margin: 5px 0px;
padding: 1px 10px;
text-decoration: none;
color: black;
border-radius: 5px;
border: 2px solid black;
background-color: #fff;
font-weight:bold;
transition: 0s;
}

最初の1文で『タグクラウド』を指定しています。

【font-size】文字の大きさを指定。値を下げるごとにどんどん文字が小さくなります。

【display: inline-block;】タグクラウドはデフォルトでこの指定が入っているので特に指定する必要もないのですが、一応簡単な説明だけ。

コンテンツの表示方式には大きく【inline】【block】【inline-block】という物があります(まだあるけどよく使うのはこの3つ)詳しくしりたいならばこちらの検索結果からどうぞ【CSS display inline block】

【inline】は横のライン上に並ぶ
【block】は縦にブロックが積まれるように並ぶ
【inline-block】両方の特性を併せ持つ

まあ説明を聞くよりやってみた方が分かりやすいと思いますので、それぞれのコードを入力し、違いを確認してみてください。

 

【margin】コンテンツの境界から外の空間を調節します

【padding】コンテンツの境界の内側の空間を調節します

【text-decoration】これもデフォルトで指定されているので特に記述する必要はないのですが念のため。リンクを設定した場合に自動でアンダーラインが付く場合があり、それを消す為の命令です。

【color: black;】文字の色を指定

【border-radius: 5px;】四隅を丸める命令。値にゼロを入力すれば完全な四角形になります。値が大きくなるほど角が丸まります。

【border: 2px solid black;】コンテンツの境界にボーダーラインを引きます。数値は線の太さ 【solid】は線の種類 【black】は色を指定します。線の種類も色々なコードがあります。

【background-color】背景色を指定

【font-weight:bold;】文字を太文字に

【transition】は『マウスオン時から通常時に戻るまでの時間』を指定。ここでは0になっていますのでマウスが離れた瞬間『通常時』に戻ります。1にすれば戻るまでに1秒のグラデーションを挟みます。

 

コード束②

.widget.widget_tag_cloud a:hover{
opacity:1;
color:white;
transition: 0s;
font-weight:bold;
background-color: red;
}

1行目で【hover】でタグクラウドの『マウスオン時』を指定。以下の命令は全て『マウスオン時』の状態を指定しています。

【opacity】マウスオン時の透明度を指定します。値をゼロにすれば完全な透明になり、1にすれば完全な不透明になります。半透明にしたければ『0.5』を与えてください。

【color】マウスオン時の文字色を指定

【transition】さきほども使用されていましたが、ここでは『通常時からマウスオン時に変わるまでの時間』を指定しています。さっきと逆ですね。

【font-weight:bold;】マウスオン時に太文字

【background】マウスオン時の背景色を指定

 

タグクラウドの表示数を増やす方法

もっと簡単な方法が『STORK公式』から発表されてました!そちらの方法ですと『ワードプレスが更新された時などに上書きされない』という事なので、散々書き散らした直後に発見して泣きそうですが、安全性などを踏まえてもSTORK公式のやり方を推奨します。

【ウィジェットのタグクラウドの最大表示数を変更する方法】

 

もはやゴミと化した記事

この記事を理解するには『FTPとPHPの知識』が必要です

PHPの編集

本来なら『子テーマにコピーして編集する』という段取りを挟むのですが、僕がやってみたところ、それではタグの上限が増えませんでした。

他の方法を探すのも面倒だったんで、あまりやりたくないですが、今回は直接『親テーマのPHP』を編集します。ここから先は自己責任でお願いします。

FTPを開き【public_html】【wp-includes】【category-template.php】というPHPデータを開き、直接書き換えます。『編集ボタン』みたいなヤツをおせば下図のように英語の羅列が出て来ると思います。

結構内容量が多いので【CTRL+F】でワード検索します。『45』と入力し、『”number”=>45,』という表記を探してください。これが最大表示数の値です。デフォルトのタグクラウド最大表示数は45個という意味で、タグを100も200も作ったってウィジェットで表示されるのは45個だけです。

この上限値を書き換えて編集を確定すればタグクラウドの最大表示数があなたの指定した個数だけ表示されるようになります。

SEOの観点から言えばタグは多すぎない方がいいという事なので、その辺を考慮して設定を行ってください。僕はワードプレスで『自分専用・カスタマイズ自由なエバーノート』みたいな物を作ってます。SEOとかどうでもいいので1000にしてます。

 

ちなみに

こちらが『子テーマ』を書き換えた際のキャプチャ。

実際にPHP編集はできるのですが、反映されませんでした(値を1000にしても最大表示数が45個のまま)。データの置き場所が違うのか、何かよく分かりませんが『どうしても子テーマで編集したい怖い!』っていう方はどうにか方法を探してみてください。

数値変えるだけの簡単な編集なので異常はでないと思いますが、FTPさえ使えれば万が一異常がでてもどうにかなります。

 

『僕のアゴが頻繁に外れる理由』を知り、人類がこの先、同じ過ちを繰り返さない様に願う論文