QooQのHTML編集は、上の方でCSSのカスタマイズが容易に行えます。
本記事では【10個別アイテム（タグクラウド）】について解説していきます！
レイアウトで使用するガジェット関係のCSSがこの項目になります。
当ブログはQooQ list版ですが、QooQ list版は記事一覧がリストになっているだけのQooQなので同様のカスタマイズが行えます。
個別アイテム（タグクラウド）CSS
投稿日時点で当ブログが実際に使用しているCSSは以下のようになっています。
コメントアウトで説明を加えているので参考にしてみてください。
/****************************************
個別アイテム
*****************************************/
/* タグクラウド */
.label-size{
border-radius: 3px; /*ラベル角丸*/
margin-top: .5em; /*ラベル上の隙間*/
margin-left: .3em; /*ラベル間*/
background: $(brand.subcolor); /*ラベル背景色*/
color: $(brand.subfont); /*ラベル文字色*/
font-weight: bold; /*ラベル太字*/
}
.label-size a{
color: inherit !important; /*ラベルリンク文字色*/
padding: .5em .8em; /*ラベル余白（.label-size{から移動）*/
display:inline-block; /*ボタン全体にリンク*/
}
.widget h2{
font-size: 110%;
}
.widget h2,
.widget .widget-content{
font-weight: none; /*サイドバー・フッターの太字なし*/
}
.popular-posts{
font-weight: bold; /*人気の投稿太字*/
}
.popular-posts a{
color: $(font.link) !important; /*人気の投稿リンク文字色*/
}
.post-summary h3 a{
color: $(font.color) !important; /*記事の抜粋文字色*/
}
table.gsc-search-box{
border: solid 2px $(brand.subcolor); /*検索欄枠線の種類・太さ・色*/
max-width: 20em; /*検索欄幅*/
border-radius: 5px; /*検索欄角丸*/
}
input.gsc-search-button{
background: $(brand.subcolor); /*検索ボタン背景色*/
color: $(font.color); /*検索ボタン文字色*/
}
input.gsc-search-button:hover{
opacity: .8; /*検索ボタンホバー半透明*/
transition: all .2s ease-in-out; /*検索ボタンホバー時間*/
}
input.gsc-input{
color: $(brand.subcolor); /*検索入力文字色*/
}
.profile-img{
border-radius: 50%; /*プロフィール画像円形*/
}
レイアウトで使用するガジェット関係のCSSになります。
カスタマイズからCSSの追加を行うと、このタグクラウドの後に挿入されます。
特に変更している部分については以下で補足しておきます。
ラベルのボタン全体をリンク化
初期状態だと文字にしかリンクがつかないため、ボタン全体をリンクにするために以下の変更を行っています。
- .label-size{のpadding:を.label-size a{に移動
- .label-size a{にdisplay:inline-block; を追加
これで、ラベルのボタン全体をリンク化することができます。
参考ブログ様
【 QooQ カスタマイズ 】 ラベル・人気の投稿・次（ 前 ）の投稿ボタン リンク範囲変更
ガジェット全体の太字処理
サイドバーやフッターのガジェットは、初期設定では全部が太字になっています。
それを打ち消すために
.widget h2,
.widget .widget-content{
font-weight: none; /*サイドバー・フッターの太字なし*/
}
で太字をなくしています。
ただラベルと人気の投稿は太字にしたかったため、.label-size{と.popular-posts{にfont-weight: bold;を加えています。
ブログ検索ガジェット
サイドバーに対して検索の入力欄が短いのが気になったので、table.gsc-search-box{でmax-width: 20em;の指定をしています。
元の長さは16emなので、お好みで長さを変更してください。
更にborder-radius: 5px;を加えて円から四角寄りに変更し、枠線も変更しています。
↓↓↓
検索ボタンにマウスをのせるホバー動作で色が明るくなるように
input.gsc-search-button:hover{
opacity: .8; /*ホバー半透明*/
transition: all .2s ease-in-out; /*ホバー時間*/
}
も追加しています。
プロフィール画像の形状
プロフィールの画像を円形に変更するのに以下を追加しています。
.profile-img{
border-radius: 50%; /*プロフィール画像円形*/
}
0%で正方形になるので、角を丸くしたいなら0～50%の間で調整してください。
↓↓↓
QooQのCSSカスタマイズリンク集
本記事は【10個別アイテム（タグクラウド）】のCSSカスタマイズです。
他の項目のCSSカスタマイズは以下のリンクからご確認ください。
２全体設定／３ナビゲーション／４ヘッダー／５パンくずリスト／６記事一覧／７個別記事／８サイドバー／９フッター
