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