人気の無料wordpressテーマ、simplicityを3カラムにする

人気の無料wordpressテーマ、simplicityを3カラムにする

この記事を読むのに必要な時間は約 3 分です。

WordPressのテーマで
根強い人気があるのがsimplicityですが
これ2カラムのテーマなんですよね。

 

子テーマとして
3カラム子テーマが公式に公開されていますが
レスポンシブじゃない上に
ノンサポート。

 

どうも、さっとです。

 

3カラムが好きなんじゃー

多くの方が
3カラム版simplicityを渇望しているのですが
一番簡単な方法では

Any Mobile Theme Switcher

というWPプラグインを導入して

  • PC表示時=3カラム子テーマ
  • タブレット・スマホ=親テーマ

といった感じで
レスポンシブを実現して使用しているのが現状です。

 

しかしPCでも低解像度だと
レイアウトが崩れてしまう等
完全なレスポンシブとは言い切れません。

 

そもそもsimplicity3カラム横幅広いしね。

 

私も元Webデザイナなので
やろうと思えば出来ますが

「正直、めんどくさい」

それが本音ですね。

 

Any Mobile Theme Switcherプラス
ソース調整すればそれほど困らないしね。

 

恐らくは
今までsimplicityの3カラム化に関して
有益なものがあまり出回らなかった理由としては
皆さん同じような感じだと思います。

 

正直、めんどくさいしね。
Any Mobile Theme Switcherは
WindowsPhoneにも対応してるしね。

 

simplicityのメジャーバージョンが
2になった事もあり
久々にこのブログでも採用してみました。

 

しかし

「やっぱり3カラムでレスポンシブがいいな」

という事で探してみたら

Thought is freeというブログで
シンプルかつ綺麗な3カラム化方法が解説されていました。

 

これでも出来ないという人は
無理に頑張らない方が無難ですね。

 

でも、そうじゃないんだ

この方法で実現できる3カラムは
左からサイドバー・メインカラム・サイドバーといった
真ん中にメインカラムを持ってくるレイアウトとなります。

 

でも個人的には
左にメインカラム
右に2つのサイドバー
といったレイアウトが良いなと思っている訳ですよ、ええ。

 

style.css を以下のように変更

@media screen and (min-width: 1230px) {
    #header-in, #navi-in, #body-in, #footer-in {
        margin: 0 auto;
        width: 1210px;
    }
    #main {
        width: 870px;
    }
    #field {
        float: left;
        max-width: 580px;
        margin: 0;
    }
    #sidebar {
        float: right;
        width: 300px;
    }
    #main .side-left {
        float: right;
        width: 250px;
    }
}

それぞれの太字部分の
floatを変更しているだけですね。

 

WordPress管理画面の
外観>カスタマイズ>レイアウト(全体・リスト)

サイドバーを左側に表示

のチェックが外れている事を確認しておいてくださいね。

 

すると当ブログのようなレイアウトとなります。

 

…しかし誰がこのレイアウト使うんだ?

 

Wordpressカテゴリの最新記事