忍者ブログ

CriCri

クリエイティブになりたいクリクリ工房

   

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

デモランキングバナー

Webstyle #01 シリーズでプラグインの左右を変える

Webstyle #01 シリーズで、プラグインの左右を入れ替えたい方用にカスタマイズの仕方をご紹介します。
簡単にできますので、気軽にカスタマイズしてみてください。

  1. まずテンプレート設定 / 編集ページで変更したいテンプレートを選び、表の右側にある修正をクリックします。
  2. そうするとテンプレート編集ページになります。左側にあるのはテンプレート編集用エディターです。
  3. ページの右下にあるCSSをスクロールして、「プラグインブロック」の見出しを見つけてください。
  4. ここの一番上の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;
}
更新前のテンプレートについては追記に入れました。更新前のテンプレートを変更されたい方は追記を開けてください。

拍手[0回]


更新前の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;
 } 
デモランキングバナー
  

COMMENT

NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 

TRACKBACK

TrackbackURL

カレンダー

05 2017/06 07
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30

AD

PR

ブログ内検索

素材サイト様

White Board様
White Board Banner
妙の宴様
妙の宴 Banner
もずねこ様
Mozneko Banner
押し花とアイコン様
押し花 バナー
petit sozai emi様
petit sozai emi
幕末維新新選組様
幕末維新新選組
The Heart of Eternity 様
thoe バナー
Crambon様
Crambon バナー
DragonArtz Design 様

プロフィール

メール de コンタクト

このブログへのリンク

Firefoxを支援しています

管理人はFirefoxの愛好者です。Internet Explorer は大嫌い。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。
Firefox ブラウザ無料ダウンロード

現在の閲覧者

Copyright ©  -- CriCri --  All Rights Reserved

Design by CriCri / material by DragonArtz Desighns / powered by NINJA TOOLS / 忍者ブログ / [PR]