テーマに ├ とか└ とか付けちゃう

旧ベーシックでは難しかった・・・　

参考：JavaScript　テーマ・・・

旧べーシックでは最初から ├ とか└ とかをテーマにつけて記事には├ とか└ とかを表示しないようにしました

新しいＣＳＳ編集用デザインでは簡単に出来てしまいます

なぜなら・・・

テーマごとにclass名が付いているからなんです　((((((ﾉﾟ⊿ﾟ)ﾉ

なので・・ＣＳＳだけでこんなことが出来ちゃうんですね・・・

実はテーマごとにclass名が付いているので・・・

しかも記事部分にもそのテーマのclassが使われているんですよ

だから・・テーマ別に

記事枠を変えたり・・・

記事枠内の背景画像を変えたり・・・

記事の文字色を変えたり・・・

なんて簡単に出来てしまうんです

使いこなすのは大変ですがその気になったらカスタムのしがいがあるデザインなんです

これについては記事枠とかの説明のときにでもやります

で・・・

チョット面倒なのが

テーマ別のclass名を調べる方法なんです

もちろんみなさまひとりひとり違ってきますので自分で調べてくださいな

調べ方です・・

テーマ一覧で調べたいテーマをクリックしてブラウザーに表示します

ブラウザーのＵＲＬの中の赤字部分がそのテーマのclassになります

あるいは・・・

自分のブログを表示してから画面の上で右クリック→ソース

または表示→ソース（右クリック禁止されていてもこれは可能です）

ソースを表示したら・・・
↓その中からテーマの部分（サイドバーのテーマ一覧）を探します

<div class="listLink">
<a href="http://ameblo.jp/newcss/themeentrylist-10040320816.html" >一覧を見る</a>
</div>

</div>

</div>
</div>

青字のテーマに対応するのが赤字部分のclassになります

.themeNumber10040320816　が ★ラーメン
.themeNumber10040507926　がとんこつ
.themeNumber10040525970　がしょうゆ
.themeNumber10040624948　がみ　そ
.themeNumber10040669980　がし　お

※ class ですから　themeNumber10040320816 の前に . （ドット）が入ります

これでテーマ別に対応しているclass（セレクタ名）がわかりました

ＣＳＳの最後に貼り付けます

/*テーマリスト*/
li.themeNumber10040320816{/*★ラーメン*/
max-width:4.5em;/*表示する文字数*/
overflow:hidden;
white-space: nowrap;
border:none;
}
li.themeNumber10040507926:before{/*とんこつ*/
content:"├ ";
}
li.themeNumber10040525970:before{/*しょうゆ*/
content:"├ ";
}
li.themeNumber10040624948:before{/*みそ*/
content:"├ ";
}
li.themeNumber10040669980:before{/*しお*/
content:"└ ";
}

max-width:4.5em;/*表示する文字数*/

この部分で表示する文字数を決めます

分類部分なので　★ラーメン( 0 )の( 0 )を表示したくないわけです

★ラーメン　は5文字(5em)なんですが・・

それだと　★ラーメン( と(が余分に表示されてしまいます

見ながら数字を小さくしていって（が消えたところにします

実際は4.9emで（は消えますが・・・　

ブラウザーによってはごみみたいに見える場合がありますから念のため4.5emにしています

★ラーメンのンが消えなければいいです

また・・・このＣＳＳで使っている　:before　は

Internet Explorer 8 以上が対応しています
なので・・
Internet Explorer 7　で見ると

├ とか└ とかは付きません・・・

また・・間の点線を消すには・・・・

.themeMenu .skinSubList li{
margin-bottom:0;
padding-bottom:0;
border:none;
}

あるいは・・・・テーマごとにアイコン画像を変えても・・

/*テーマリスト*/
li.themeNumber10040320816{
max-width:4.8em;
overflow:hidden;
white-space: nowrap;
border:none;
}
li.themeNumber10040507926{
background-image:url(アイコン画像のＵＲＬ);
background-repeat:no-repeat;
background-position:left top;
padding-left:20px;

}
li.themeNumber10040525970{
background-image:url(アイコン画像のＵＲＬ);
background-repeat:no-repeat;
background-position:left top;
padding-left:20px;

}
li.themeNumber10040624948{
background-image:url(アイコン画像のＵＲＬ);
background-repeat:no-repeat;
background-position:left top;
padding-left:20px;

}
li.themeNumber10040669980{
background-image:url(アイコン画像のＵＲＬ);
background-repeat:no-repeat;
background-position:left top;
padding-left:20px;
}
.themeMenu .skinSubList li{
height:18px;/*画像の縦*/
border:none;
}

いろいろ工夫できそうですね・・・

新・アメブロ向上企画書　アメブロの「CSS編集用デザイン」のカスタマイズ

アメブロの新スキン（CSS編集用デザイン）のカスタマイズ
アメーバブログをＣＳＳでカスタマイズして自分だけのオリジナルなデザインでアメブロを楽しんでください

テーマに ├ とか└ とか付けちゃう