Simplicity2対応 3column子テーマ 作ったった

作ったと言っても適度に対応しているだけで、完璧には調べてないので何かしら問題が含まれているかも知れませんが、Simplicity1ではなくSimplicity2で利用できます。利用には色々と注意点があるので以下をよく読んで理解した上でご利用ください。

サンプル

ここに現物をはっつけてもよいのですが、横幅が狭くなるとレスポンシブの機能が動作してよくわかんないと思うので直接codepenを見てみてください。
サンプル: Simplicity 3column 子テーマ用

サイドバー追従部分がどのように見えるかも書いてありますので確認してもらえます。
サンプルではfacebookのウィジェット部分が追従はしていますが背景が何やらおかしいんですけれども、別環境では特に問題がないので何が問題かを現在調査中 広告が読み込まれていないことによる高さ無しの要素があったため色々と含めて表示がおかしかったようです。ウィジェット自体を取り除いたら正しく表示されるようになりました。

ダウンロード

2017/04/18アップデートしました。 ver 20170418

ダウンロード: Simplicity 3column.zip(GoogleDrive)

  • リンク先、右上のダウンロードボタンからzipをダウンロードできます。
  • インストール他は他のテーマと同じです。
    • 3columnはスキンや独自のテーマではなく、子テーマを予め3カラムにカスタマイズしたものです。今使われている2カラムのデフォルト子テーマをカスタマイズすれば同じことが可能です。
  • 念の為、ウィルス対策ソフトでチェックしてから展開してください
  • 古いバージョンのものは最終更新日より30日間保管されます(GoogleDriveの仕様)

アップデートでの変更点

■ver 20170418

  • 新着などのサムネイルにfloatが使われているウィジェットでのulの高さを正しく出せるようにstyle.cssを変更(::afterにてclearfix)。他に必要があれば、下記スタイルを参考にセレクターを追加して下さい。
  • responsive.cssの解除でエラーがあったのでfunctions.phpにてwp_dequeue_styleに変更

■ver 20161014.2〜20161014.3

  • 左右バーのリンクがz-indexのせいで効かなかったのを修正
  • 各バーのウィジェット(.widget::after部分)をclearfixして高さをもたせた(float要素対策)。
  • ウィジェットの最後のアイテムのmargin-bottomを0にした

利用上の注意

  • 基本的な部分しかスタイルしてません。
    • カスタマイザーの一部の設定は機能しません
  • デフォルトのスクロール追従はキャンセルして新たにそれっぽいのを入れてあります。
  • responsive.cssはfunctions.phpで取り除いてありますのでデフォルトのレスポンシブ対応ではありません。
    • 最大1200px、960px、640pxがデフォルトのブレイクポイントです。
    • 左カラムは960pxで非表示になります。
  • 3columnにすることによって、新たにウィジェットを設定する必要があります。
  • 表示領域が小さくなるためデフォルトのフォントを小さくしてあります。
  • トップのリストアイテムの間はhrで区切り線が入っています(jQuery&css)。
  • 左右カラムの背景が白のため、bodyの背景を暗くしてあります。
    • タイトルは白になります。

カスタマイザーの一部の設定は機能しません

例えばnaviを画面いっぱいに広げたい場合、カスタマイザーで設定しても外枠が伸びるだけです。見た目に関するカスタマイズはカスタマイザーを利用せず、style.cssやjavascript.jsを利用してスタイルしてください。

デフォルトのスクロール追従はキャンセルして新たにそれっぽいのを入れてあります

親テーマのスクロール追従では、サイドバーの位置を上書きしてしまったりするので、それをキャンセルして独自のスクロール追従を入れてあります。いろんなシチュエーションで試しているわけではないので何かしら問題があるかも知れません。

このスクロール追従は画面幅960px以上でしか動作しません。

3columnにすることによって、新たにウィジェットを設定する必要があります

wordpressではテーマごとに設定が保存されているため、3columnを利用した場合、新たにウィジェットを設定する必要があります。

#mainの幅は640px

#mainはwidthこそ640pxですが、paddingが設定してあるため582px程度しか表示領域がありません。
#leftbarは240px、#sidebarは320px、これに合わせて640pxで1200pxちょうどです。つまり#mainを広げると言うことはwidthをいじってはできません。

#sidebarは320pxですがpaddingが左右に10px入れてあるため、ちょうど300pxの表示領域になります。

しかしながら、これらpaddingを無くすことで#mainなら640pxまで利用することができますが、デザイン的に少しだけpaddingはあったほうが良いだろうと思います。#sidebarも同様です。

例えばのカスタマイズ

cssの最後に追記で、上記のようにすると、#leftbar|#main|#sidebarという並びから、#main|#leftbar|#sidebarと言う並びに変更できます。上記cssは一応ベンダープレフィックスが入っているので何やらややこしいですが、chromeとfirefoxだけなら、

でイケると思います。これら順番を変えれば、#sidebar|#leftbar|#mainと言う並びももちろんできますが、960pxの画面幅で#leftbarが非表示になると言うことはお忘れなく。jQueryで非表示になった#leftbarは何かしらのスイッチをクリックすることで開くサイドパネルとかにしても良いかも知れません。まぁそういうメニューがあるので、これらが正しく動作するかは要検証ですけれども。

カスタマイズ例

※ 3columnなのでPCで十分な横幅をとって見てください

レフトバー|サイドバー|メイン

フル画面
エディット画面

メイン|サイドバー|レフトバー

フル画面
エディット画面

判明している問題点

1)#mainの関連記事手前.article-like周りがおかしい
2)サイドバー追従部分で中身がはみ出す

1はサンプルではタグ内のstyle属性にて固定されたwidth値があるのがまず問題。これを取り除いて幅に追従するようにcssでスタイル可能

2は、widgetの中身にfloatが使われているのがまず問題。これらをflex等で書き直せばおそらくは問題ないはず。また環境(widgetの内容)によっては正しく動作するため、css側に問題があると思われる。

まとめ

このように、3columnは、公式で配布している3columnに微妙に手を入れて、Simplicity2で利用できるように基本的な部分しかスタイルしていないのでその他諸々を自身でスタイルできる方のみご利用ください。
また古いブラウザでは正しく動作しません。スマホ等は調査してないのでわかりませんが、まぁ新しいものだったら正しく動くんじゃなかろうかと。
モバイルブラウザはPCのブラウザにはないバグ等もありますので、全てをカバーするのは容易ではありません。修正できるものについては修正します。

何か気づいた所があればコメントいただければ対応できる所は対応します。

スポンサーリンク

シェアする

フォローする

コメント

  1. 波衛門 より:

    デベロッパーツールを使ったら上手にぐぐれるようになりました!
    ありがとうございます!!!

    ただ、スライドインメニューを入れ酔おうと思ったのですが、
    カスタマイザーにありません。

    こればっかりは仕様でどうにもならないのでしょうか?
    できれば、入れてみたいのですが、、

    • hidekichi より:

      > スライドインメニューを入れ酔おうと思ったのですが、
      > カスタマイザーにありません。

      スライドインメニューは、完全レスポンシブがONの場合は表示されなかったように思います。

      なぜかは簡単な理由で、スライドインメニューはモバイル画面を対象にしているため、モバイルであるかどうかがわからないと必要なcssとjQueryが読み込まれないからです。完全レスポンシブONはPCの画面をそのまんまモバイルでシームレスに表示するためのものです。こちらが本来のレスポンシブですが、この状態でスライドインメニューを使うためには、モバイルの判定ではなく画面サイズやユーザーエージェントで使えるようにすれば、完全レスポンシブがONであろうがOFFであろうが使えます。

      ただ、完全レスポンシブをOFFにすればカスタマイザーで選択できると思うので、特別にカスタマイズする必要もありません。もし完全レスポンシブがOFFでもカスタマイザーで表示しないなら、それは公式フォーラムで聞いて下さい。
      完全レスポンシブの状態以外でスライドインメニューが表示されない原因はまぁないとは思うんですが。

  2. 波衛門 より:

    ありがとうございます!
    たびたびのお世話のおかげで、サイドバーやメインも揃い、
    追従も実装できることができました!!

    ただ、サイドバーやメインの高さを揃えたことにより、
    それらの要素の重なり際が変なかんじになってしまいました。。

    それを解決するために、メインやサイドバーを囲む枠を直角にしようと思いました。
    しかし、ぐぐっても、公式フォームで探して小一時間も見つからず、
    解決策が見つからず。。
    大変恐縮でありますが、メインやサイドバーを囲む枠を直角にする方法はないでしょうか?

    また、サイドバーやレフトバーの背景色がデフォルトだと白なのですが、jsを使わずに、
    このブログのグローバルメニューの色に変更することは可能なのでしょうか?

    • hidekichi より:

      でいいんじゃないでしょうか?
      こういうのはキーワードがわからないとググってもどれかがわからないと思います。まずはデベロッパーツールの使い方をググって、各セレクタのプロパティがどういうものが適用されているかを調べられるようにした上で、そのプロパティがどういう意味なのかをググって下さい。
      デベロッパーツールが触れたら、チェックのオンオフでプロパティの適用・非適用が操作できます。直でcssをいじるのではなく、ブラウザ上でだけの話なのでそこで必要な値をいじり、それをcssに追記・適用します。
      新しいcssの記述(追記するもの)は、style.cssの最後に追加していけば同じセレクタならそれが優先されます。できるだけ重複しないように、コメントなどを入れて追記したものを管理しながらカスタマイズして下さい。

  3. hiro] より:

    初めまして、当方たまたま3カラムのこのテーマを見つけまして、
    現在使わせてもらっているのですが、
    この子テーマでグローバルナビを固定するプラグインを使用すると、
    グローバルメニューがサイドバーや、レフトバー、メインなどの後ろに
    いってしまい困っております。
    親テーマではへーきなんですが。。
    何かいい解決策はないでしょうか?

    • hidekichi より:

      #mainを#sidebarおよび#leftbarよりも手前に表示させるためにz-indexを5にしています。
      #naviはz-indexを指定していないのでおそらくは1(0かもしれない)にあると思うので、そのままだと背後に行くのだろうと思います。

      プラグインがどういうcssになっているのかはわかりませんが、メニューが入る親要素にz-indexを999などとして5以上の大きな値を入れれば良いのではなかろうかと思います。

      あるいは、3columnのstyle.cssの最後に、

      #mainが0では問題があるということなら、1などとすれば行けるかも知れません。

  4. 波衛門 より:

    ありがとうございます。
    おかげさまで、レフトバーとサイドバーのサイズを入れ替えることができました。

    >あと、#leftbarを残すというのは元々想定していないので、スクロール追従あたりで問題が出る可能性があります。ここらは十分に確認して下さい。
    デベロッパーツールでconsole.logなどをたまに見て確認してください。子テーマjavascript.js以外のエラーは関係ないので別件ですけどね。

    承知いたしました。しっかりと確認していきたいと思います。

    また、たびたび申し訳ないのですが、
    サイドバー、レフトバーとメインの高さを揃えることはかのうでしょうか?
    メインに対して若干サイドバー、レフトバーが低い位置にあるため、
    PC表示の時には凸形状になってしまっています。
    直せるものなら直したいと考えているのですが、やはり難しいでしょうか?

    • hidekichi より:

      前のサンプルをアップデートしました。

      スクロールバー追従でやはり問題が出たので、追従はcssでやりました。IEとedgeは対応してませんが、firefox、chrome(最新版)は動作するかと思います。
      あわせて、jQueryを大幅コメントアウトしています。

      > PC表示の時には凸形状

      これはそういうデザインです。

      結果的にこうなっていれば#mainと高さは揃います。
      元々#mainのmargin-bottomが30pxでこれによってfooterとの間にスペースができていますので、全てを揃えるとしたら今回の追記に加えて、#main、#sidebar、#leftbar共にmargin-bottom:0として、#body-inにmargin-bottom: 30pxとしてもよいです。

      機能的な部分以外のデザインはお好きにいじって下さい。

  5. 波衛門 より:

    おかげ様で961〜1200pxの時に右サイドバーを消して、左サイドバーを残すことができました。
    本当にありがとうございます!!!
    後は#leftbarは240px、#sidebarは320pxの値を入れ替えて#leftbarは320px、#sidebarは240pxにしようと考えてるのですが、どうすればよいでしょうか?

    自分でやってみようとstyle.cssを見たのですが、単純に数値を入れ替えるだけではできないような気がしました。

    お忙しいところ恐れ入りますがご教授いただければなと思います。

    • hidekichi より:

      3columnレイアウトサンプル | codepen

      まぁ入れ替えるだけですけどね。
      前のサンプルの追記部分と今回のサンプルの違いを確認してみて下さい。

      あと、#leftbarを残すというのは元々想定していないので、スクロール追従あたりで問題が出る可能性があります。ここらは十分に確認して下さい。
      デベロッパーツールでconsole.logなどをたまに見て確認してください。子テーマjavascript.js以外のエラーは関係ないので別件ですけどね。

  6. 波衛門 より:

    的確 かつ 迅速な回答に本当に感激です!!

    >>右サイドバーを消して左を残したいということですかね?
    >>それとも、左サイドバーを右に出したいということでしょうか?

    右サイドバーを消して左を残したいを考えています。
    独自実装が案外難しそうなので、ご教授いただければ幸いです。

    • hidekichi より:

      style.cssの最後に、

      こんな感じで書けば、961〜1200pxの時に右サイドバーを消して、左サイドバーを残せます。

      3columnレイアウトサンプル | codepen

      前のコメントでのorderのプロパティを書いておられましたが、orderはflexの子要素の順番を変更させるものです。なので、右サイドバーを左に出したいという場合には、#sidebar < #mainという感じにorderの値にして(例#sidebar{ order: 1;} #main { order: 2; })、#leftbarをdisplay: noneで消せば左カラムに右サイドバーが出せます。 右サイドバーはborder-radiusで左上と、左下を直角にしてあるので、ここらのスタイルを変更する必要がありますが、上記のようにメディアクエリを書いてその画面幅の時にどういうスタイルにするかを書けばokです。 ちなみに、今気が付きましたが、新着記事などのウィジェットで画像あたりにfloatが利用されているものでは、clearfixが必要です。 ウィジェットの中のulに対して、

      こんな感じです。面倒な場合は、必ずしも上手く行くかどうかは不明ですが、

      こう書いておけばよいかと。

  7. 波衛門 より:

    Simplicity2用の3カラムテーマが見当たらなかったので、
    大変嬉しいです!!ありがとうございます!! 

    しかし、いくつか質問したいことがあります。

    >カスタマイザーの一部の設定は機能しません

    機能することと機能しないことを
    知ってる範囲で教えてくださるとありがたいのです。

    >左カラムは960pxで非表示になります

    非表示なのを、右と左とで切り替えたいのですが、

    #sidebar {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    }  

    #main {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    }

    #leftbar {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
    border-radius: 0;
    }

    とすることで見た目的には可能でしょうか?

    • hidekichi より:

      > 機能することと機能しないことを
      > 知ってる範囲で教えてくださるとありがたいのです。

      デフォルトの#mainの幅に対応させてあるレイアウト関係以外の物はたいてい動作するんじゃなかろうかと。例えばアドセンスなどを記事下に入れようとしても#mainの幅が狭いため横並びレクタングルx2とかはムリです。バナーも小さいものしか入らないでしょう。
      リストも他にコメントがありましたが、タイルなどはカスタマイザーで有効になるとheadタグの中にstyleタグでcssが書き出されます。これらは基本デフォルトの#mainの幅を基準に考えられており、#mainの幅が変わればそれに合わせる必要があります。

      >> 左カラムは960pxで非表示になります
      > 非表示なのを、右と左とで切り替えたいのですが、

      右と左で切り替えたいというのは、本来960px以下になった時、左サイドバーが非表示になるのを右サイドバーを消して左を残したいということですかね?
      それとも、左サイドバーを右に出したいということでしょうか?

  8. 奈々奈々七なし より:

    ホントに便利な子テーマありがとうございます!
    ただ、2タイルにするとデザインが崩れちゃうのが残念です。。

    • hidekichi より:

      > 2タイルにするとデザインが崩れちゃう

      なぜそうなるかは、#mainの幅がデフォルトよりも狭いために2タイルにすると縦1列表示になるからです。
      そのために、無理やりflexによって、デフォルトのリストが入るようにしています。
      親テーマcss-custom.phpに設定がありますが、

      のwidthを280pxぐらいにすれば入るかと。

      またその際は、3columnのstyle.cssの「/* entry トップリスト*/」〜「.separate」セレクタまでをコメントアウトして、同javascript.jsの「/* トップリスト アイテム間のhr */」をコメントアウトします。

      このようにすれば一応使えるはずですが、ここらは各自でやってもらう必要があります。利用上の注意にも書いたように、「カスタマイザーの一部の設定は機能しません」、「#mainの幅は640px」が意味している所です。

      各々がカスタマイズしてもらえればできますが、Simplicityはオールインワンで機能が備わっているため、子テーマやスキンでは対応しきれないことがあります。そのため、基本的にはデフォルトで使用してもらって、見た目をスタイルするstyle.cssとjavascript.jsでできる範囲でやって下さいというのが真意です。
      カスタマイザーを利用すると、css-custom.phpのインラインのスタイルなどが呼び出されたり、また挿入されるセレクタも変わる場合があります。なのでそれら全部を網羅することはできないんですよ。

      そもそもの3カラムの子テーマは1系に合わせて作られていて、それを2系で使えるようにしたのとスタイルを+αしただけなので、そのあたりは踏まえて利用してもらえると助かります。

  9. hidekichi より:

    左右バーの中のウィジェット等にはposition:relativeとz-index:1;
    #mainには同様にしてz-index: 2等を入れてください。リンクが効かなくなるのを確認しました。後で直したものをアップします。

    修正しました。