QooQのHTML編集は、上の方でCSSのカスタマイズが容易に行えます。
本記事では【８サイドバー】について解説していきます！
当ブログはQooQ list版ですが、QooQ list版は記事一覧がリストになっているだけのQooQなので同様のカスタマイズが行えます。
サイドバーCSS
投稿日時点で当ブログが実際に使用しているCSSは以下のようになっています。
コメントアウトで説明を加えているので参考にしてみてください。
/****************************************
サイドバー
*****************************************/
#sub-content{
font-size: 1.5rem; /*文字サイズ*/
margin-top: 20px; /*上余白*/
}
#sub-content a{
color: $(font.link); /*リンク文字色*/
}
#sub-content .widget{
background: $(other.topback); /*背景色*/
border-radius: 2px; /*角丸*/
}
#sub-content .widget-content,
#sub-content .contact-form-widget{
padding: 1em; /*コンテンツ余白*/
}
#sub-content .widget h2{
font-size: 1.6rem; /*タイトル文字サイズ*/
padding: .5em; /*タイトル余白*/
background: $(brand.color); /*タイトル背景色*/
border-bottom: dotted 5px $(brand.font); /*タイトル下線種類・太さ・色*/
color: $(brand.font); /*タイトル文字色*/
}
サイドバーは背景色をコンテンツの背景色$(other.back)から最背景色$(other.topback)に変更しています。
更にサイドバーのコンテンツタイトル下に点線を加えています。
線の種類は、
実線：solid／点線：dotted／破線：dashed／二重線：double
となります。
記事本文を下線や枠線で装飾する方法を参考に下線や枠線をデザインしてみてください。
ガジェット内のデザイン（ラベル・人気の投稿・プロフィールなど）の変更は【10個別アイテム（タグクラウド）】で設定できます。
該当の記事はコチラ ➡ QooQのHTMLカスタマイズ～個別アイテム（タグクラウド）CSS～
QooQのCSSカスタマイズリンク集
本記事は【８サイドバー】のCSSカスタマイズです。
他の項目のCSSカスタマイズは以下のリンクからご確認ください。
２全体設定／３ナビゲーション／４ヘッダー／５パンくずリスト／６記事一覧／７個別記事／９フッター／10個別アイテム（タグクラウド）
