gosign
GosignトップCSSWORDPRESSweb素材音楽素材NEWSGAMEお問合わせデザインホームページ

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

公開日: : CSS, wordpress ,

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

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

カスタマイズ

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

st5_lr01

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

st5_lr02

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

再調整

st5_lr03

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

Stinger3でのカスタマイズは?

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

まとめ

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

関連記事

ec_motto

Stinger3カスタマイズ「続きを見る」「もっと見る」の背景色を変更

スティンガー3を使い始めて、真っ先に思ったのは「続きを見る」の背景色が目立たなくて、デザインに埋もれ

記事を読む

ec_erase

Stinger3カスタマイズ「サイドバーの記事タイトル下の出だし」を消去する方法

正式名称はなんて言うのかはよくわからないですが、Stinger3のサイドバーの「NEW ENTRY」

記事を読む

ec_motto2

ワードプレス「続きを見る」を押しても続きが読めない現象の対処法

筆者がまだワードプレスを初めて1週間の頃。何気に自分のサイトの「続きを読む」を押してみたところ、いく

記事を読む

ec_stinger3

Stinger3カスタマイズ・サイドバーの左右位置を変える

近年左右2カラム型のCSSテーマでは左側に広い記事エリア、右側に狭めなリンクエリアを設けるものが増え

記事を読む

slider

Stinger3カスタマイズ「JQueryスライドショーbxSlider」を入れてみよう。

トップページに動的コンテンツを入れると画面が華やいでみえますよね。今回は「Java Script」の

記事を読む

ec_kijiiro

Stinger3カスタマイズ・記事タイトル色を変更して目立たせよう!

Stinger3は、そのまま使っても十分優秀なテーマなんですが、使っているとやっぱり、黒文字だらけだ

記事を読む

ec_keyboad

同じディレクトリ内に「index.php」と「index.html」を置いたときに.htmlファイルが優先されて表示するのを変更する方法

wordpress導入で「index.php」と「index.html」を同じディレクトリに置く必要

記事を読む

favico

Stinger3カスタマイズ「favicon.ico」を置き換えてブックマークを華やかに

URLの先頭に出てくるアイコンは通称「favicon.ico」と呼ばれています。読み方はファヴィコン

記事を読む

PAGE TOP ↑