QooQのHTML編集は、上の方でCSSのカスタマイズが容易に行えます。
本記事では【10個別アイテム（タグクラウド）】について解説していきます！
当ブログはQooQ list版ですが、QooQ list版は記事一覧がリストになっているだけのQooQなので同様のカスタマイズが行えます。
個別アイテム（タグクラウド）CSS
投稿日時点で当ブログが実際に使用しているCSSは以下のようになっています。
コメントアウトで説明を加えているので参考にしてみてください。
レイアウトで使用するガジェット関係のCSSになります。
カスタマイズからCSSの追加を行うと、このタグクラウドの後に挿入されます。
特に変更している部分については以下で補足しておきます。
ラベルのボタン全体をリンク化
初期状態だと文字にしかリンクがつかないため、ボタン全体をリンクにするために以下の変更を行っています。
- .label-size{のpadding:を.label-size a{に移動
- .label-size a{にdisplay:inline-block; を追加
これで、ラベルのボタン全体をリンク化することができます。
参考ブログ様
【 QooQ カスタマイズ 】 ラベル・人気の投稿・次（ 前 ）の投稿ボタン リンク範囲変更
ガジェット全体の太字処理
サイドバーやフッターのガジェットは、初期設定では全部が太字になっています。
それを打ち消すために
.widget .widget-content{
font-weight: none; /*サイドバー・フッターの太字なし*/
}
で太字をなくしています。
ただラベルと人気の投稿は太字にしたかったため、.label-size{と.popular-posts{にfont-weight: bold;を加えています。
検索の入力欄
サイドバーに対して検索の入力欄が短いのが気になったので、table.gsc-search-box{でmax-width: 20em;の指定をしています。
元の長さは16emなので、お好みで長さを変更してください。
プロフィール画像の形状
プロフィールの画像を円形に変更するのに以下を追加しています。
border-radius: 50%; /*プロフィール画像円形*/
}
0%で正方形になるので、角を丸くしたいなら0～50%の間で調整してください。
QooQのCSSカスタマイズリンク集
本記事は【10個別アイテム（タグクラウド）】のCSSカスタマイズです。
他の項目のCSSカスタマイズは以下のリンクからご確認ください。
２全体設定／３ナビゲーション／４ヘッダー／５パンくずリスト／６記事一覧／７個別記事／８サイドバー／９フッター
