アクセストリガー

アクセストリガー

Simplicityの3カラムver.のカスタマイズに成功した方法を公開するよ!

Simplicityの3カラムver.のカスタマイズに成功した方法を公開するよ!

おかえりなさい @okaerinasainet です。

テーマSimplicityは2カラムVersionで公開されているのが通常版ですが、メインカラムとサイドバー1列の計2列で構成されています。

それでは3カラムバージョンとはどのようなものかというと、もちろん正式に子テーマとして公開されてはいるもののその存在感は薄いです。

Simplicity3カラムバージョンを使ってみよう

3カラムバージョンは、基本的にノンサポートのようです!

Simplicity子テーマに「3カラム子テーマ」を追加

Simplicity子テーマに「3カラム」を追加しました。 3カラム子テーマ 3カラム子テーマを適用すると、表…

こちらのページでもわいひらさんがはっきり言っています。

3カラム子テーマは完全にノーサポートです。

メインのSimplicityテーマに関しては、なんでも心よく答えていただけるわいひらさんでもノーサポートなのです!

このようにも言っています!

カスタマイズなどは、各自でお願いします。

そうですよ!

カスタマイズは、各自で行う必要があるのです!

あんまり3カラムバージョンをあれこれする気はないという方向性はよく伝わります。

なので、自分で頑張れという事なのですよ!

以下にも3カラムバージョンの注意点を載せていました!

横幅は広いけどレスポンシブ表示されません。
モバイル表示もされません。
テーマカスタマイザーからの設定が正常に反映されない可能性があります。
レスポンシブ表示させたい場合は、自前でスタイルシートを編集してください。
幅変更をしたい場合も自前で行ってください。

とことん自分で頑張れる人向け子テーマです。

モバイルにも対応させないからその気で使ってくれという事なのです。

メインの親テーマが素晴らしくサポートされていて、カスタマイズされまくりの更新されまくりなので、始め私はこのテーマの見た目に興味を持ちましたがここまで突き放されているんじゃダメじゃん!って思っていました!

しかし、月日は流れSimplicityをカスタマイズしたいという願望が目覚めるころ、この放置状態の3カラムバージョンを色々いじくって見たくなってきました!

それ以来、色々いじってみましたが、子テーマであるこの3カラムバージョンは、初心者に持って来いのいじりやすさです!

なんといっても子テーマであるがゆえに、スタイルシートも子テーマの分だけ追記されているので、そこをいじるにしたってたかだかしれています。

ちょこっといじってみてダメならバックアップなりをもう一度当てはめればもとに戻せます。

いじる箇所も少ないので、見やすいというか編集も楽です!

そういったわけで、これまでちょこちょこいじってきたSimplicity3カラムバージョンのCSSとか、その他カスタマイズにオススメな方法などを紹介いたします!

Simplicity3カラムバージョンに施したカスタム(スタイルシート編)

左サイドバーの背景色に色を付ける方法

ダッシュボード➡テーマの編集➡ #leftbar{ を検索します。

そして } の上の行に次のコードを追記します➡ background-color: #FFFFFF;

たったこれだけです。一応このカラーナンバー#FFFFFF;はホワイトなので白背景になります。

FFFFFFのところを好きなカラーコードにすればその背景色になります。

左サイドバーの幅を変更する

この方法は一度に行えません。

左サイドバーの幅を変えたら必ず全体の幅を見直しましょう。

先ほどの箇所の#leftbar{ の下に width:210px; とあるところを好きな値に変更します。

width:300px; とすれば300pxの幅となります。アドセンスでいうとレクタングル中のサイズです。

そして、忘れてはいけないのがコンテンツ全体のというより、カラムのメインと、レフト、ライトのすべての幅を決める値を変更しておきます。

同じくテーマの編集(style.css)で、 #header, #header-in, #navi-in, #body-in, #footer-in { となっているところを探します。

子テーマはCSSに記載されている内容自体少ないのですぐに見つかると思います。

先ほどの、#header, #header-in, #navi-in, #body-in, #footer-in { のwidth: ●●●px; となっているところの●●●の値を変更します。

ここで変更するのは、先ほど左サイドバーの幅を広くしたのならその分のpxをもとの●●●の値に足し算します。そしてその値を入力します。

おさらいすると左サイドバーの幅を調整したら、コンテンツ全体の幅を調整するためそれを意味する #header, #header-in, #navi-in, #body-in, #footer-in { に変更を加えるのです。

そして同じようにもう一か所だけ全体の幅を決めるCSSが #header-in, #navi-in, #body-in, #footer, #footer-in{ です。

ここのwidth:●●●px;の●●●も一緒に変更しましょう。

始めは難しく思うかもしれませんが、やってみたらわかってくると思います。

右サイドバーの幅を変更する

この右サイドバーの幅を変更するには、テーマ標準のカスタマイザーから、サイドバーの幅を336pxに変更するという項目があるのでそれでいけるように感じますが、それではダメです!

カラムの全体のバランスが崩れてしまいました!

なので、直接CSSを編集します!

そしてここから少し難易度が上がります!

でも大丈夫ですうまく言った方法を解説しますので。

今回右サイドバーの幅を変更するにあたって編集するのはSimplicityの親テーマです!

なので失敗したら、元の親テーマを入れなおす必要がありますのでご注意ください。

先ほどから開いていた子テーマのテーマの編集画面から簡単に親テーマの編集も行えます。

次の箇所を選んでください。

テーマの編集 ‹ アクセストリガー — WordPress

 

ここでは、Simplicity1.6.0となっていますが、その画面に表示されているバージョンでいいです。

そして、親テーマの編集(style.css)画面になったら次の箇所を検索してください!

#sidebar {

上記を検索したら float: right; の一行下が、width: ●●● px; となっているので、●●●の箇所を任意の値に変更すればいいだけです。

そしてここでも忘れてはいけないのが、先ほどの子テーマの編集画面に戻り、すべてのコンテンツの幅決める箇所の2箇所です。

#header, #header-in, #navi-in, #body-in, #footer-in {

そしてもう1箇所が次でしたね!

#header-in, #navi-in, #body-in, #footer, #footer-in{

上記の2箇所は子テーマの編集画面い戻ってから行います。変更するのはそれぞれに width:●●●px;の●●● のところです!

なので、とにかく1つ1つの編集が終わるたびに「ファイルを更新」をして変更の保存を必ず行ってく下さいね!

メインカラムの幅を変更する

いよいよメインカラムの幅の変更の方法も行いましょう!

ここも先ほどの右サイドバーの幅を変更する方法のように親テーマの編集を行います。

最後にコンテンツ全体の幅を変更するという点でも全く同じです。

親テーマの方のテーマの編集(style.css)を開いて、検索で main を検索します。

style.cssの中に以下の箇所を見つけて下さい。

この中の●●●のところがメインカラムの幅です。

任意の値を入力して保存して下さい。

そして、コンテンツ全体の幅を決める箇所の2箇所でしたね。

子テーマの編集(style.css)に戻るのも同じです!

#header, #header-in, #navi-in, #body-in, #footer-in {

そしてもう1箇所が次でした!

#header-in, #navi-in, #body-in, #footer, #footer-in{

上記の2箇所は子テーマの編集画面(style.css)に戻ってから行います。変更するのはそれぞれに width:●●●px;の●●● のところです!

繰り返しになりますが、1つ1つの編集が終わるたびに「ファイルを更新」をして変更の保存を必ず行ってく下さい!

いかがでしょうか!!ここまでが主にスタイルシート(css)を編集ることで行えるSimplicity3カラムバージョンで行った変更事例です!!

Simplicity3カラムバージョンに施したカスタム(プラグイン編)

Any Mobile Theme SwitcherでPCとスマホを切り替える

ご存知の通り、Simplicity3カラムバージョンは非レスポンシィブデザインです。非スマホです。

でも決して「ダメじゃん」ではありません。

ちゃんとそのためにプラグインを適応しましょう!

そのためとは、スマホでもSimplicityを表示させるためです。

ただし、Simplicity3カラムバージョンではなく通常の2カラムの方をスマホに当てはめるのです!

だって、どっちにせよスマホは1カラムでひょうじさせるのですから、何カラムであっても一緒なのです。

ですから2カラムバージョンがモバイル表示対応版なので、それを適応させるだけです。

そんなことを可能にするのが、先ほどのAny Mobile Theme Switcherとうプラグインです!

このプラグインに関しては次の投稿で詳しく説明しています。

デバイスごとにテーマを完全に切り替えることが出来るAny Mobile Theme Switcher

おかえりなさい @okaerinasainet です。以前モバイルとPCのテーマの使い分けをする際に次のような方法をご紹介しました。は合計5つのデバイスごとにテーマを出し分け出来る素晴らしいプラグインですが、1つ難点…

Any Mobile Theme Switcherを使用して、PC用テーマにSimplicity3カラムバージョンを適用、スマホ用にSimplicityの標準テーマを適応する。

この指定だけでオッケイです!

最後に

ここまでで、Simplicity3カラムバージョンを使って行うカスタマイズの方法をご紹介させていただきました!

一応私の環境にて行い不具合なくカスタマイズできたという一事例であるという事はご理解下さい。

このカスタマイズに限らず言えることですが、WordPressにカスタマイズを行う場合、基本的には元のファイル及び設定ををバックアップしておくことをお勧めします。

スタイルシート(css)の編集はphpファイルなどと違い、失敗してもレイアウトが崩れたりするだけで、画面がいきなり真っ白になってしまう事がないため比較的敷居の低いカスタマイズであると思います。

しかしながら、その編集の後変更が反映されるまで、キャッシュが切れるまでのタイムラグがあるため、間違ったカスタマイズをしていたとしてもそれに気が付くまでにも時間差ができてしまいます。

なので気づかないうちにどんどん間違っていたなどという事にもなりかねません。

なのでバックアップが必要です。

その点は十分ご注意いただいた上でチェレンジしてみて下さいね!

基本的にはそんなに難しくないと思いますので☆彡

ブログを3カラムでレイアウトするメリットとデメリット

今回はテーマのカラムについてのお話ですが、ほぼ全部入り状態であると言ってもいい3カラムのテーマをお使いの方はどれくらいいるのでしょうか!?昨今はシンプルに1カラムのワイドなコンテンツで公開しているブ…

以上、「Simplicityの3カラムver.のカスタマイズに成功した方法を公開するよ!」でした!


COMMENTS & TRACKBACKS

  • Comments ( 2 )
  • Trackbacks ( 0 )
  1. 検索からきました。
    Simplicityの3カラムテーマをPC表示
    Simplicityの1カラムテーマをスマホ表示
    を、Device Switcherにて切り替えたいのですが、PC用Simplicityを有効化したときに、スマホ用のこまごました設定(SNSボタンや関連記事レイアウトなど)が無効化されませんか???どうしたらどちらも設定有効化したままできますでしょうか?

    • ななしさん。ご質問の件ですが、http://accesstrigger.okaerinasainet.net/?p=9480なども参考にされて下さい。
      Any Mobile Theme Switcherをご使用いただくと、上記の件は起こらなかったかと思います。

LEAVE A REPLY

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top