Stinger5カスタマイズ・サイドバーの左右を位置を変更する

いまだマイナーチェンジが続くStinger5ですが、骨子となる部分は固まってきた様子なので思い切ってStinger3からStinger5へアップデートを図ってみました。。。が、多くの方が通った道なのでしょうか魔改造を施したPC用のサイトはStinger3→Stinger5のテーマ変更でことごとくレイアウトが崩壊。まずはStinger5を理解して、ひとつずつ絡まった紐を解きほぐす作業ですね。

という事で今回はStinger3で一番簡単だったカスタマイズ「サイドバーの左右位置を変更する」から挑戦してみたいと思います。

カスタマイズ

Stinger3同様、style.cssのカスタマイズです。Stinger3はstyle.cssをエディターで開いたのちに”基本構造”で検索すると当該のコメント付近にたどり着いたのですがStinger5で試してみたところ、このコメントが検索にひっかかからない。仕方ないので“float”で検索したところ、複数検索がヒットしましたが、後ろの方にそれらしきソースがありました。

とりあえずStringer3の時よりも少しCSSに手が加わっているので単純にはいかないと思いますが、まずは試しでStinger3の時の正解だった”leftとright”を入れ替えてアップロード。

左右の移動には成功しましたが、右側のカラムが左に寄ってしまったようです。できた段差は20px程度ですので、CSSの320、300、0の組み合わせの調整でできそうです。

再調整

まずはmargin-leftの値を+20すると左カラムと右カラムの間にスペースが生まれました。しかし右の段差はそのまま。とりあえずmargin-leftの値はいいでしょう。今度はmargin-rightの値を+20して340に設定してみる。すると今度は段差がより広がりました。これはNG。ではmargin-rightの値を320に戻した上で今度は返す刀で-20の300に設定してみると、概ねいい感じに収まりました。

Stinger3でのカスタマイズは？

Stinger3でのサイドバーの左右変更のカスタマイズはとっても簡単です。こちらからどうぞ。

まとめ

Stinger3→Stinger5へのテーマ変更の第１歩でしたが、だいぶCSSの変更が伺えました。サイトのいきなりの更新はリスクがあるので、まずはひとつづつ覚えながらですね。