koikenote-loading
広告あり

【Cocoon】タグクラウドのカスタマイズ【フッターへの設置にも有効】

Cocoonのタグクラウドのカスタマイズ方法
記事内に広告が含まれています

WordPressのテーマ「Cocoon」のウィジェットを使用してサイドバーやフッターに設置した「タグクラウドをカスタマイズする方法をご紹介します。
(CSSの記述を含むため、できるだけ大きな画面でご覧ください)

Cocoon設定でフッターの文字色などを設定していても有効な方法です。

※2022/12/07に一度投稿した記事をもとに加筆修正しています。
当ブログでの実装コードですが、WordPressブログ運営&独学カスタマイズ歴5ヶ月の時点で備忘録的に投稿していますので「ベストな記述法」ではない可能性があります。ご了承ください。

このような方に向けた内容です
  • WordPress初心者でCocoonを使用している方
  • タグクラウドのカスタマイズをしたい方
  • サイドバーで成功したhoverがフッターでは効かなくて困っている方
  • Cocoon設定で「サイトキーテキストカラー」や「フッター文字色」を設定している方

フッターのタグクラウドでhoverが効かない問題も解決できました

スポンサーリンク

当ブログのタグクラウド(完成イメージ)

当ブログ(WordPressテーマ:Cocoon)では「ウィジェット」を使用し、フッターと投稿記事のサイドバーに「タグクラウド(記事の属性・内容を表すタグの一覧)」を設置しています。

タイトルは「KEYWORD」と表記(ウィジェットの設定画面で入力)。

カーソルを合わせた時の変化など、この記事のサイドバーかフッターで実際に見ていただければと思います。

Cocoonでタグクラウドのカスタマイズ
「ブログ運営」タグにカーソルを合わせた状態
カスタマイズ内容
  • タグひとつひとつを囲む四角い枠を角丸にした
  • ブログに合わせた色合いにした
  • カーソルを合わせた時に選択部分の色が変わるようにした

タグクラウドのカスタマイズ方法

タグクラウドのカスタマイズはCSSの追記で行います。

\ カスタマイズが初めての方はチェック /
  • STEP-1
    管理画面から「外観」→「テーマエディター」と開くと、「style.css」の編集画面が開きます

    初めて開いた時には「直接編集をおすすめしない」的な警告文が出ると思います。ドキッとしますが「理解しました」をクリックで大丈夫です。

  • STEP-2
    Cocoon Child:スタイルシート(style.css)という編集画面になっていることを確認し、バックアップをとります

    この時点でstyle.css(カスタマイズ用CSSを追加する前の状態)を丸ごとコピーし、テキスト系アプリにペーストして保存しておきます。この後のCSSの追記作業によって不具合が起こった場合、保存していたコードを丸ごとコピペすれば元の状態に戻すことが可能です。

  • STEP-3
    カスタマイズ用のCSSを記述します

    /*必要ならばここにコードを書く*/ という文言の下に、追加したいCSSを記述します。

    カスタマイズ用CSSコードをコピペでOKです

ウィジェットのタイトル部分のCSSはこの記事では解説を省きますが「見出し用のCSS」を応用すればカスタマイズ可能です。
(見出し用CSSのh1やh2の部分を「sidebar h3」または「footer h3」に変更)

\ 検索ボタンをクリックで参考記事を探す /

サイドバーのタグクラウドに有効な追加CSS

CSSはコピペOKですが、ご自身のブログに合わせて色指定などを変更してください。

私が実際に追記しているCSS
.tagcloud a {
   background: none; /*背景を消す*/
   border: 1px solid #bcb2a4; /*実線の太さと色*/
   border-radius: 20px; /*角の丸み*/
   color: #40210f; /*文字色*/
   padding: 3px 10px; /*要素の内部余白*/
   text-decoration: none; /*文字の装飾なし*/
   font-size: 13px; /*文字サイズ*/
   margin: 2px; /*要素の外部余白*/
   display: flex; /*横並びにする*/
   flex: 1 1 auto; /*余白分の自動伸縮比率*/
   justify-content: space-between; /*左右幅いっぱいに均等に配置する*/
}
.tagcloud a:hover { 
   background: #40210f; /*カーソルを合わせた時の背景色*/
   border: 1px solid #40210f; /*カーソルを合わせた時の線色*/
   color: #fff; /*カーソルを合わせた時の文字色*/
   transition: 0.5s; /*アニメーションの時間*/
}

どこが何を指定しているのか理解するためと今後アレンジしやすいように、ブログの画面上では表示されないメモ書きをつけています。
(スタイルシートへはこれも含めてコピペでも大丈夫です)

/* こういうメモをコメントアウトと呼ぶらしいです */

CSSはまだまだ手探りですが、ひとつひとつ調べてメモを繰り返しているうちに少しずつ理解できてきました

フッターのタグクラウドにカーソルを合わせた時(hover)のCSSが反映されない場合

サイドバーは上記CSSの追加でイメージ通りに反映されましたが、フッターにもタグクラウドを設置したところ、なぜかこちらではカーソルを合わせても色が変更してくれませんでした。

なんでぇえええ???

原因 | Cocoon設定のCSSが優先されていた

当ブログの場合「Cocoon設定」で「サイトキーテキストカラー」や「フッター文字色」の設定をしていたため、その色指定が優先されたことでフッターでのhover(カーソルを合わせた時の色変化)が反映されなかったことが判明しました。

解決 | フッターのタグクラウドに有効なCSSを追記

「Cocoon設定」での「サイトキーテキストカラー」や「フッター文字色」の設定を解除しても良いのですが、そうすると他の部分の文字色にも影響がでるため、CSSの優先順位を上げる対策として「idセレクタ」を追加してみたところ、無事にフッターでもhover(カーソルを合わせた時の色変化)の反映に成功しました。

/*フッターへの反映*/ から下が追記したCSSです
.tagcloud a {
   background: none; /*背景を消す*/
   border: 1px solid #bcb2a4; /*実線の太さと色*/
   border-radius: 20px; /*角の丸み*/
   color: #40210f; /*文字色*/
   padding: 3px 10px; /*要素の内部余白*/
   text-decoration: none; /*文字の装飾なし*/
   font-size: 13px; /*文字サイズ*/
   margin: 2px; /*要素の外部余白*/
   display: flex; /*横並びにする*/
   flex: 1 1 auto; /*余白分の自動伸縮比率*/
   justify-content: space-between; /*左右幅いっぱいに均等に配置する*/
}
.tagcloud a:hover { 
   background: #40210f; /*カーソルを合わせた時の背景色*/
   border: 1px solid #40210f; /*カーソルを合わせた時の線色*/
   color: #fff; /*カーソルを合わせた時の文字色*/
   transition: 0.5s; /*アニメーションの時間*/
}
/*フッターへの反映*/
#footer .tagcloud a:hover { 
background: #40210f;
border: 1px solid #40210f;
color: #fff;
transition: .5s;
}

Cocoonを使用している方で「サイドバーは成功したのにフッターだけCSSが効かないけどなんで?」とお悩みの方は試してみてください

フッターだけ背景を白くするCSSを追加(2023/02/27)

#footer .tagcloud a {
   background-color: #fff; /*フッターは背景を白くする*/
}

また変えるかもしれませんが、当ブログではフッターだけタグの枠の背景を白くしてみました。

フッターのデザイン

なんとなくサイドバーの方は背景なしのままです。なので「#footer」付き。

フッターエリアの背景を濃い色で設定している場合は文字色を白くすると読みやすいですが、この背景部分の色を白く指定して文字色を濃くする、または背景と相性の良い淡い色にするなどもアリかなと思います。

\ この記事へのコメント /

スポンサーリンク