• このエントリーをはてなブックマークに追加

右にあるものを左に。左にあるものを右に移動させます。これはPCやテレビ、高解像度ディスプレイなどのデバイスのスタイル向けのものに限るのではありますが。

さてと、説明ですね。

パーツの説明

ナビゲーション

#mw-panelがナビゲーションです。

div#mw-panel {
font-size: inherit;
position: absolute;
top: 160px;
padding-top: 1em;
width: 10em;
left: 0;
}

左から10emで、上から160pxの位置、つまりはロゴの下に位置しなさいと指定されている。floatを使ってのレイアウトは行っていない。

メインコンテンツ

#contentと.mw-bodyの指定された<div>がメインコンテンツ。

.mw-body {
margin-left: 11em;
padding: 1.25em 1.5em 1.5em 1.5em;
}
.mw-body {
margin-left: 10em;
padding: 1em;
border: 1px solid #2b629d;
border-right-width: 0;
margin-top: -1px;
background-color: #ffffff;
color: #1e1e1e;
direction: ltr;
font-size: 100%;
}

となっている。

ナビゲーションの幅分左からマージン指定してあるので、ナビゲーションとかぶらないようにレイアウトされている。

これをうまく入れ替える。

何をしなければいけないのか

左だったものを右に、右だったものを左にする。ソースコードの変更ではなく、レイアウトの変更の考え方から説明する。

#mw-panelの

div#mw-panel {
left: 0;
}

レフトを

div#mw-panel {
right: 0;
}

に変更する。
※便宜上、ソースコードを省略しているので、消さないようにね。変更するのはright:0;のところだけね。ニッコリ

次に、mw-body(メディアウィキボディ)の左を右に変更する。

.mw-body {
margin-left: 11em;
}

.mw-body {
margin-right: 11em;
}

に変更する

div#footerも左からマージンをとっているので、右からマージンをとる用に指定します。

div#footer {
margin-left: 11em;
}

div#footer {
margin-left: 11em;
}

に変更する。

lessファイルの編集

.mw-body

実際のスタイルシートファイルを編集・上書きしまーす。

場所:/skins/Vector/screen-hd.less

次に、mw-body(メディアウィキボディ)の左を右に変更する。

.mw-body {
margin-left: 11em;
}

.mw-body {
margin: 0 11em 0 0;
}

に変更する
※他のファイルで左からマージンをとっているので、それもリセットするためにmargin-leftをmarginで指定している。

#mw-panel(その1)

場所:/skins/Vector/components/navigation.less

#mw-panelの

div#mw-panel {
left: 0;
}

レフトを削除する。

#mw-panel(その2)

場所:/skins/Vector/screen-hd.less

#mw-panelの

div#mw-panel {
left: 0;
}

div#mw-panel {
right: 0;
}

に変更する。

#p-personal

場所:/skins/Vector/screen-hd.less

#p-personalの

#p-personal{
right: 1em;
}

#p-personal{
left: 1em;
}

に変更する。

#p-personal ul

場所:/skins/Vector/components/personalMenu.less

#p-personalの

#p-personal ul{
padding-left: 10em; /* Keep from overlapping logo */
}

#p-personal ul{
padding-right: 10em; /* Keep from overlapping logo */
}

に変更する

#left-navigation

場所:/skins/Vector/components/navigation.less

#left-navigationの

#left-navigation{
margin-left: 10em;
}

#left-navigation{
margin-left: 1em;
}

に変更する

#left-navigation

場所:/skins/Vector/components/navigation.less

#left-navigationの

div#mw-head header{
padding:0 11em 0 0;
}

上記を追記。

div#footer

場所:/skins/Vector/screen-hd.less.less

div#footerも左からマージンをとっているので、右からマージンを指定するコードに変更。

div#footer {
margin-left: 11em;
}

div#footer {
margin: 0 11em 0 0;
}

に変更する。

場所: /skins/Vector/components/navigation.less

ロゴの位置を変更する。
※スタイルは簡略化しています。実際には他の記述があります。

#p-logo {
left: 0;
}

div#footer {
right: 0;
}

に変更する。

さらに、タブレットなどの中間の幅などはcommon.lessをベースに表示されるので、大きくレイアウトが変わってしまう。なので、同様に下記ファイルの街灯のレイアウトを変更する必要がある。

右にあるものを左に。左にあるものを右に移動させます。これはPCやテレビ、高解像度ディスプレイなどのデバイスのスタイル向けのものに限るのではありますが。

さてと、説明ですね。

パーツの説明

ナビゲーション

#mw-panelがナビゲーションです。

div#mw-panel {
font-size: inherit;
position: absolute;
top: 160px;
padding-top: 1em;
width: 10em;
left: 0;
}

左から10emで、上から160pxの位置、つまりはロゴの下に位置しなさいと指定されている。floatを使ってのレイアウトは行っていない。

メインコンテンツ

#contentと.mw-bodyの指定された<div>がメインコンテンツ。

.mw-body {
margin-left: 11em;
padding: 1.25em 1.5em 1.5em 1.5em;
}
.mw-body {
margin-left: 10em;
padding: 1em;
border: 1px solid #2b629d;
border-right-width: 0;
margin-top: -1px;
background-color: #ffffff;
color: #1e1e1e;
direction: ltr;
font-size: 100%;
}

となっている。

ナビゲーションの幅分左からマージン指定してあるので、ナビゲーションとかぶらないようにレイアウトされている。

これをうまく入れ替える。

何をしなければいけないのか

左だったものを右に、右だったものを左にする。ソースコードの変更ではなく、レイアウトの変更の考え方から説明する。

#mw-panelの

div#mw-panel {
left: 0;
}

レフトを

div#mw-panel {
right: 0;
}

に変更する。
※便宜上、ソースコードを省略しているので、消さないようにね。変更するのはright:0;のところだけね。ニッコリ

次に、mw-body(メディアウィキボディ)の左を右に変更する。

.mw-body {
margin-left: 11em;
}

.mw-body {
margin-right: 11em;
}

に変更する

div#footerも左からマージンをとっているので、右からマージンをとる用に指定します。

div#footer {
margin-left: 11em;
}

div#footer {
margin-left: 11em;
}

に変更する。

lessファイルの編集

.mw-body

実際のスタイルシートファイルを編集・上書きしまーす。

場所:/skins/Vector/screen-hd.less

次に、mw-body(メディアウィキボディ)の左を右に変更する。

.mw-body {
margin-left: 11em;
}

.mw-body {
margin: 0 11em 0 0;
}

に変更する
※他のファイルで左からマージンをとっているので、それもリセットするためにmargin-leftをmarginで指定している。

#mw-panel(その1)

場所:/skins/Vector/components/navigation.less

#mw-panelの

div#mw-panel {
left: 0;
}

レフトを削除する。

#mw-panel(その2)

場所:/skins/Vector/screen-hd.less

#mw-panelの

div#mw-panel {
left: 0;
}

div#mw-panel {
right: 0;
}

に変更する。

#p-personal

場所:/skins/Vector/screen-hd.less

#p-personalの

#p-personal{
right: 1em;
}

#p-personal{
left: 1em;
}

に変更する。

#p-personal ul

場所:/skins/Vector/components/personalMenu.less

#p-personalの

#p-personal ul{
padding-left: 10em; /* Keep from overlapping logo */
}

#p-personal ul{
padding-right: 10em; /* Keep from overlapping logo */
}

に変更する

#left-navigation

場所:/skins/Vector/components/navigation.less

#left-navigationの

#left-navigation{
margin-left: 10em;
}

#left-navigation{
margin-left: 1em;
}

に変更する

#left-navigation

場所:/skins/Vector/components/navigation.less

#left-navigationの

div#mw-head header{
padding:0 11em 0 0;
}

上記を追記。

div#footer

場所:/skins/Vector/screen-hd.less.less

div#footerも左からマージンをとっているので、右からマージンを指定するコードに変更。

div#footer {
margin-left: 11em;
}

div#footer {
margin: 0 11em 0 0;
}

に変更する。

#p-logo

場所: /skins/Vector/components/navigation.less

ロゴの位置を変更する。
※スタイルは簡略化しています。実際には他の記述があります。

#p-logo {
left: 0;
}

div#footer {
right: 0;
}

に変更する。

さらに、タブレットなどの中間の幅などはcommon.lessをベースに表示されるので、大きくレイアウトが変わってしまう。なので、同様に下記ファイルの街灯のレイアウトを変更する必要がある。

場所:/skins/Vector/components/navigation.less

場所:/skins/Vector/components/navigation.less