公開されてるテンプレートを、カスタマイズしてみた - 【30代】メンヘラが正社員になろうともがいている…【雇用率2.2％】

テンプレートのカスタマイズ

現在使っているテンプレート、「レスポンシブルー」と言うのですが。

今流行っている、レスポンシブウェブデザインに対応しているテンプレートで、ウィンドウの大きさでデザインが勝手に変わるって言うものなのです。

ですが、この「レスポンシブルー」と言うテンプレート…

ノーパソだと、カラム分割されないんです。

横の幅が1024pxであるがためなんですが、「レスポンシブルー」は1024pxより広くないとカラム分割されないように設定されているんですよね。

なので、少しカスタマイズしてみました。

1024px以下でカラムを分割してみる

HTML5+CSS3を使っていることを前提として話します。

CSSのソースをご覧ください。

@media (min-width: 950px) and (max-width: 1024px){
#container {
    width: 100%;
}
#container #content {
    width: 90%;
}
#main {
    width: 55%;
    float: left;
}
#box2 {
    width: 35%;
    float: right;
}
#box2-inner {
    width: 80%;
}
}
@media (max-width: 949px) {
#container {
    width: 100%;
}
#blog-title {
    margin: 0 0 30px;
    padding: 30px 0 40px;
}
#container #content {
    padding-left: 100px;
    width: 85%;
}
#main {
    width: 85%;
    float: none;
}
#box2 {
    width: 85%;
    float: none;
}
}
/* Media Queries - Smartphone */
@media (max-width: 480px) {
#container #content {
    padding: 0;
    width: 85%;
}
#main {
    width: 100%;
    float: none;
}
#box2 {
    float: none;
    width: 100%;
}
}