QooQのHTML編集は、上の方でCSSのカスタマイズが容易に行えます。
本記事では【２全体設定】について解説していきます！
当ブログはQooQ list版ですが、QooQ list版は記事一覧がリストになっているだけのQooQなので同様のカスタマイズが行えます。
全体設定CSS
投稿日時点で当ブログが実際に使用しているCSSは以下のようになっています。
コメントアウトで説明を加えているので参考にしてみてください。
/****************************************
全体設定
*****************************************/
body{
font-family: "Segoe UI","メイリオ","Helvetica","ヒラギノ角ゴ ProN W3",sans-serif; /*フォント*/
background: $(other.topback); /*背景色*/
color: $(font.color); /*文字色*/
}
/* 2カラム設定 */
#main-inner{
display: flex;
}
#main-content{
margin-right: 50px; /*メインとサブの隙間*/
width: calc(100% - 346px); /*メイン幅*/
flex-shrink: 0;
}
#sub-content{
margin-top: 30px; /*ヘッダーとサブの隙間*/
width: 316px; /*サブ幅*/
flex-shrink: 0;
}
@media ( max-width : 768px ) {
#main-inner{
display: block;
}
#main-content{
margin-right: 0;
width: 100%; /*モバイル時メイン幅*/
}
#sub-content{
width: 100%; /* モバイル時サブ幅*/
}
}
全体設定
*****************************************/
body{
font-family: "Segoe UI","メイリオ","Helvetica","ヒラギノ角ゴ ProN W3",sans-serif; /*フォント*/
background: $(other.topback); /*背景色*/
color: $(font.color); /*文字色*/
}
/* 2カラム設定 */
#main-inner{
display: flex;
}
#main-content{
margin-right: 50px; /*メインとサブの隙間*/
width: calc(100% - 346px); /*メイン幅*/
flex-shrink: 0;
}
#sub-content{
margin-top: 30px; /*ヘッダーとサブの隙間*/
width: 316px; /*サブ幅*/
flex-shrink: 0;
}
@media ( max-width : 768px ) {
#main-inner{
display: block;
}
#main-content{
margin-right: 0;
width: 100%; /*モバイル時メイン幅*/
}
#sub-content{
width: 100%; /* モバイル時サブ幅*/
}
}
フォントについて詳細は日本語向きフォントに変更する方法で解説しているので、良ければそちらも閲覧下さい。
