【WP】WordPressのテーマを「Simplisity1+3カラム」に変えました!

気に入ったらシェア!

当ブログのWordPressテーマを
Simplicity1」ベースの「レスポンシブ3カラム」なデザインに変更してみました(^^)/

ちなみに、以前のブログテーマは「Chocolat」というものを使っていました。

可愛らしいデザインだし、レスポンシブ対応しているので、ほとんど手を加えなくてもお洒落なデザインになって素敵です☆

以前使っていたブログテーマ「Chocolat」

しかし、ふと「3カラムのページにしたいな……」と思い立ち、
思い切って「Simplicity」ベースの3カラムデザインに変えてみました!

WordPressのテーマを探してみてわかったこと……「3カラム」デザインって思ったより少ない!

タイトルの通りなのですが、実際にWordPressのテーマを探してみると、
3カラムのデザインて思ったより少ないんですね(ノД`)・゜・。

見つけたと思っても、左右のカラムサイズが気に入らなかったり……

カスタマイズしようにも、他に使っている人が少ないと、日本語でカスタマイズを紹介しているページがない!

そんなとき、日本で多くの人が使っている「Simplicity」というテーマをベースにして
「レスポンシブ3カラム化」している方がいらっしゃったので、
さっそくそのやり方を真似させていただきました!

参考にさせていただいたのは、こちらのサイトです。↓

姉ーさん(実の姉ではないが、「姉ーさん」と呼んでいる人物)からの依頼で、 「私のブログをスマホでも見られるようにしなさい」 ・・・との命令がきた・・・orz 姉ーさんも元IT系プ...

実際にレスポンシブ3カラム化にする手順

まずは

Simplicity 1.9.3 安定版 と

Simplicityの1の「子テーマ(無印)」 を

ダウンロードします!

それからFTPサーバを使用して
Simplicityの親ディレクトリから「header.phpと「footer.php」を
simplicity-child ディレクトリにコピーします。

※上記ファイルは、WordPressがインストールされているパス内の

(例) ~/wp/wp-content/themes/simplicity/

にあります。

この中の「header.php」と「footer.php」を

(例) ~/wp/wp-content/themes/simplicity-child/

配下にコピーします。

そして、今コピーして来た子テーマディレクトリ内の
header.php」と「footer.php」を
↓こちらのサイト通りに編集していきます。

姉ーさん(実の姉ではないが、「姉ーさん」と呼んでいる人物)からの依頼で、 「私のブログをスマホでも見られるようにしなさい」 ・・・との命令がきた・・・orz 姉ーさんも元IT系プ...

ちょこっと修正:左右サイドバーを画面幅いっぱいにする

さらにちょっと手を加えまして、
PC(画面幅1150px以上)で全画面表示したときに

左サイドバー: 画面左端から180px
右サイドバー: 画面右端から300px
メインカラム: 左右カラムの間に可変幅で表示

となるようにしてみました。

実際に設定したスタイルシートはこちら↓

Simplicity child: スタイルシート (style.css)

@charset "UTF-8";
@import url("../simplicity/style.css");

/*
Theme Name: Simplicity child
Template:   simplicity
Version:    20150920
*/

/* Simplicity子テーマ用のスタイルを書く */
#main {
    padding: 0 !important;
    border: none;
}
#sidebar {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
}
@media screen and (min-width: 1150px) {
    #header-in, #navi-in, #body-in, #footer-in {
        margin: 0 auto;
        width: 100%;
    }
    #main {
        width: calc(100% - 340px);
    }
    #field {
        float: right;
		max-width: calc(100% - 240px);
        margin: 0;
		padding: 10px;
    }
    #sidebar {
        float: right;
        width: 300px;
    }
    #main .side-left {
        float: left;
        width: 180px;
    }
}
@media screen and (max-width: 1149px) {
    #main {
        margin-bottom: 0;
    }
    #field {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 20px 29px;
    }
    #main .side-left {
        border: none;
        float: none !important;
        width: auto;
        margin: 0 15px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media screen and (max-width: 800px) {
    #sidebar {
        border: none;
        float: none !important;
    }
    #main .side-left {
        margin-bottom: 0;
    }
}
@media screen and (max-width: 640px) {
    #field {
        padding: 10px;
        border: none;
    }
}
@media screen and (max-width: 330px) {
    #field {
        padding: 0;
    }
}

この他にも、テーマカスタマイズの「追加CSS」でいくつかデザインを変更したので
そちらは別記事でご紹介したいと思います☆(^^)/

参考になれば幸いです♪