QooQのHTML編集は、上の方でCSSのカスタマイズが容易に行えます。
本記事では【４ヘッダー】について解説していきます！
当ブログはQooQ list版ですが、QooQ list版は記事一覧がリストになっているだけのQooQなので同様のカスタマイズが行えます。
ヘッダーCSS
投稿日時点で当ブログが実際に使用しているCSSは以下のようになっています。
コメントアウトで説明を加えているので参考にしてみてください。
/****************************************
ヘッダー
*****************************************/
#header{
background: $(brand.color); /*背景色*/
color: $(brand.font); /*文字色*/
}
#header a{
color: inherit; /*リンク文字色*/
}
#header-inner{
padding: 1.5em 0 1.5em 0;
}
#header-img-wrapper{
text-align: center;
}
#header-img{
}
#header-title{
font-size: 190%; /*ブログ名文字サイズ*/
font-weight: bold; /*ブログ名太字*/
margin-top: -0.5em; /*ブログ名上位置調整*/
text-align: center; /*ブログ名中央寄せ*/
}
#header-text{
font-size: 95%; /*ブログ説明文字サイズ*/
font-weight: bold; /*ブログ説明太字*/
margin-top: 1em; /*ブログ説明上位置調整*/
text-align: center; /*ブログ説明中央寄せ*/
}
ブログ名・ブログ説明文ともに中央寄せにしていて、それに伴い若干の位置調整を行っています。
左寄せの場合はleft、右寄せの場合はrightに変更してください。
QooQのCSSカスタマイズリンク集
本記事は【４ヘッダー】のCSSカスタマイズです。
他の項目のCSSカスタマイズは以下のリンクからご確認ください。
２全体設定／３ナビゲーション／５パンくずリスト／６記事一覧／７個別記事／８サイドバー／９フッター／10個別アイテム（タグクラウド）
