CriCri
クリエイティブになりたいクリクリ工房
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
Webstyle #01 シリーズでプラグインの左右を変える
Webstyle #01 シリーズで、プラグインの左右を入れ替えたい方用にカスタマイズの仕方をご紹介します。
簡単にできますので、気軽にカスタマイズしてみてください。
更新後は3つとも同じCSSになりました。下の部分をコピーしてください。
簡単にできますので、気軽にカスタマイズしてみてください。
- まずテンプレート設定 / 編集ページで変更したいテンプレートを選び、表の右側にある修正をクリックします。
- そうするとテンプレート編集ページになります。左側にあるのはテンプレート編集用エディターです。
- ページの右下にあるCSSをスクロールして、「プラグインブロック」の見出しを見つけてください。
- ここの一番上のPluginBlock と、もう少し下の「記事ブロック」の一番上のEntryBlock の指定を変えます。下に訂正済みCSSを載せましたので、コピーして差し替えるだけでOKです。
更新後は3つとも同じCSSになりました。下の部分をコピーしてください。
/*************************************************
プラグインブロック
*************************************************/
.PluginBlock {
float: right;
width: 220px;
margin-top:25px;
text-align: left;
overflow:hidden;
}
.PluginInnerBlock {
margin-right:10px;
padding:10px 10px 10px 0;
line-height:150%;
}
.PluginInnerBlock2 {
margin-right:10px;
padding:0 10px 10px 0;
line-height:150%;
}
/*************************************************
記事ブロック
*************************************************/
#EntryBlock {
float: left;
width:570px;
margin-top:25px;
text-align: left;
overflow:hidden;
}
更新前のテンプレートについては追記に入れました。更新前のテンプレートを変更されたい方は追記を開けてください。
更新前の3つのテンプレートはそれぞれ変更の仕方が違います。
変更したいテンプレートのところを見てください。
変更したいテンプレートのところを見てください。
「Earth」
/*************************************************
プラグインブロック
*************************************************/
.PluginBlock {
float:left;
width: 210px;
margin:25px 0 0 10px;
text-align: left;
}
・
・
・
/*************************************************
記事ブロック
*************************************************/
#EntryBlock {
float:right;
width:550px;
margin:25px 10px 0;
text-align: left;
}
色文字のところを下のように変更する
.PluginBlock {
float:right;
width: 210px;
margin:25px 15px 0 0;
text-align: left;
}
・
・
・
#EntryBlock {
float:left;
width:550px;
margin:25px 0 0 10px;
text-align: left;
}
「Mechanics」
/*************************************************
プラグインブロック
*************************************************/
.PluginBlock {
float:left;
width: 210px;
margin:25px 10px 0;
text-align: left;
}
・
・
・
/*************************************************
記事ブロック
*************************************************/
#EntryBlock {
float:right;
width:550px;
margin:25px 10px 0 0;
text-align: left;
}
色文字のところをを下のように変更する
.PluginBlock {
float:right;
width: 210px;
margin:25px 10px 0 0;
text-align: left;
}
・
・
・
#EntryBlock {
float:left;
width:550px;
margin:25px 0 0 10px;
text-align: left;
}
「Sky」
/*************************************************
プラグインブロック
*************************************************/
.PluginBlock {
float:left;
width: 210px;
margin:25px 0 0 10px;
text-align: left;
}
・
・
・
/*************************************************
記事ブロック
*************************************************/
#EntryBlock {
float:right;
width:550px;
margin:25px 10px 0;
text-align: left;
}
色文字のところを下のように変更する
.PluginBlock {
float:right;
width: 210px;
margin:25px 10px 0 0;
text-align: left;
}
・
・
・
#EntryBlock {
float:left;
width:550px;
margin:25px 0 0 10px;
text-align: left;
}
TRACKBACK
TrackbackURL


COMMENT