2023/06/04
ダウンロードが確実です!
※注意!!
- CSSのコードは下記から直接コピペしてください。ワードなどに一度貼ってからコピペするとうまく反映されないことがあります。
- CSSコードを貼って、更新をしてもデザインが変わらないことがあります。その際は、スーパーリロードをしてください。
スーパーリロード=ブラウザを強制的に更新すること
↓
ショートカットキー
Windowsの場合、Ctrl+F5 (CtrlとF5のボタンを同時に押す)
Macの場合、Command+R (CommandとRのボタンを同時に押す)※FirefoxはCommand + Shift + R
CSSコード
/*****************************************
PC及び全体用
******************************************/
/* カテゴリーboxの背景色 */
.min-box{
background-color: #ebebeb;
}
上記の続きに貼るCSS
↓
.main {
width: 728px;
margin–left: 30px;
float: right;
}
.main–side {
width: 1100px;
}
.header–inner {
padding–top: 0px;
padding–bottom: 0px;
margin: 0 auto;
}
.share, .comments–header {
display: none;
}
.share–buttons {
display: none;
}
.main–color–font {
color: #000000!important;
font–weight: 500!important;
}
.side .box a {
color: #000000;
}
.side–share {
display: none;
}
.side .follow–box {
display: none;
}
|
/*****************************************
タブレット(大)用
サイドバーがメインカラムの下に回ります
******************************************/
@media screen and (max-width: 1057px) {
↑
この間に貼るCSSは下記↓
↓
}
.main {
width: 100%;
margin–right: 0;
float: none;
}
.main {
margin–left: 0px;
}
.main–side {
width: 100%;
}
|
/*****************************************
タブレット(小)用
記事の並びが2列になります
******************************************/
@media screen and (max-width: 700px) {
↑
この間に貼るCSSも上記と同じです。
↓
}
/*****************************************
スマホ用
記事の並びが1列になります
******************************************/
@media screen and (max-width: 450px) {
↑
この間に貼るCSSも上記と同じです。
↓
}