QooQのHTML編集は、上の方でCSSのカスタマイズが容易に行えます。
本記事では【９フッター】について解説していきます！
当ブログはQooQ list版ですが、QooQ list版は記事一覧がリストになっているだけのQooQなので同様のカスタマイズが行えます。
フッターCSS
投稿日時点で当ブログが実際に使用しているCSSは以下のようになっています。
コメントアウトで説明を加えているので参考にしてみてください。
/****************************************
フッター
*****************************************/
#footer{
font-size: 1.5rem; /*タイトル文字サイズ*/
margin-top: 20px; /*フッター上余白*/
background-color:: $(other.topback); /*背景色*/
}
#footer a{
color: $(font.link); /*リンク文字色*/
}
#footer-inner{
display: flex;
}
#footer-item1,
#footer-item2,
#footer-item3{
flex-basis: 29.3333%;
margin-left: 2%;
margin-right: 2%;
}
#footer .widget{
padding-top: 10px; /*タイトル上余白*/
}
#footer .widget-content{
padding-left: 1em; /*コンテンツ左余白*/
padding-right: .8em; /*コンテンツ右余白*/
}
#footer .widget:last-child{
padding-bottom: 20px; /*フッターとコピーライト間*/
}
#copyright{
text-align: center; /*コピーライト位置*/
font-size: 70%; /*コピーライト文字サイズ*/
margin-top: .5em; /*コピーライト上余白*/
color: $(font.light); /*コピーライト文字色*/
letter-spacing: 0;
}
#copyright:before{
content:"Copyright \0a9 ";
}
#copyright:after{
content:" All Rights Reserved.";
}
#designed-by{
text-align: center; /*QooQ位置*/
font-size: 70%; /*QooQ文字サイズ*/
margin-bottom: 1em; /*QooQ下余白*/
color: $(font.light); /*QooQ文字色*/
letter-spacing: 0;
}
#designed-by:before{
content:"designed by "; /*QooQ前の文字*/
}
.Attribution{
color: $(font.light); /*Powered by Blogger.文字色*/
font-size: 70%; /*Powered by Blogger.文字サイズ*/
}
.Attribution a{
color: inherit !important; /*Powered by Blogger.リンク文字色*/
}
@media ( max-width : 768px ) {
#footer-inner{
display: block;
}
}
サイドバー同様、背景色をコンテンツの背景色$(other.back)から最背景色$(other.topback)に変更しています。
パソコンでもスマホでも一番下はあまり見られないところになるので、デザインもシンプルであっさりです。
ガジェット内のデザイン（ラベル・人気の投稿・プロフィールなど）の変更は【10個別アイテム（タグクラウド）】で設定できます。
