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

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

公開日: : 最終更新日:2014/10/14 CSS, wordpress , , ,

近年左右2カラム型のCSSテーマでは左側に広い記事エリア、右側に狭めなリンクエリアを設けるものが増えています。Stinger3もデフォルトではこのCSS配置を採用しています。実際マウスのアイポイントを考えると非常に効率的な配置だと思います。しかしインターネット普及期の頃に作成されたレイアウトはStinger3とは真逆な左にリンクエリア、右側に広い記事エリアというレイアウトが一般的でした。たとえばサイトの歴史が古く、ユーザーも馴染んでいるサイトをWORDPRESS化&テーマをStinger3を選択したいんだけど、レイアウトの左右が変わるのはちょっと違和感、、、という場合など、Stringer3のサイドバー位置を変えるカスタマイズです。

といっても今回は割と簡単で、style.cssのカスタマイズだけです。

style.cssをテキストエディタで開き、「基本構造」で検索。その直下付近のカスタマイズとなります。

11行目と15行目のfloat以下のleft rightを書き換えるだけの作業です。


/*-----------------------------
基本構造
------------------------------*/

#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
width: 986px;
margin-right: auto;
margin-left: auto;
}
#wrap #wrap-in #side {
float: left;
width: 336px;
}
#wrap #wrap-in #main {
float: right;
width: 550px;
padding-right: 39px;
padding-left: 39px;
padding-top: 20px;
border: 1px solid #ccc;
background-color: #FFF;
border-radius: 4px 4px 4px 4px;
padding-bottom: 20px;
}

まとめ

作業時間は1分程度ですが、左右入れ替えると、だいぶ印象が変わったんじゃないかなと思います。左コンテンツ、右コンテンツはサイト管理者の好みの差という意見もありますが、長年見てくださってる閲覧者のインターフェースを考慮して左右配置は慎重に決めてみてはいかがでしょうか?

stinger5のカスタマイズ

stinger5でのカスタマイズはこちらをご覧ください。

関連記事

slider

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

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

記事を読む

ec_keyboad

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

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

記事を読む

ec_motto

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

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

記事を読む

ec_stinger5

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

いまだマイナーチェンジが続くStinger5ですが、骨子となる部分は固まってきた様子なので思い切って

記事を読む

favico

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

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

記事を読む

ec_erase

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

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

記事を読む

ec_kijiiro

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

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

記事を読む

ec_motto2

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

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

記事を読む

PAGE TOP ↑