]MovableTypeを使ってると、どうしてもスタイルシートをいじる機会が増えます。自分で何でもかんでも全部できるっていうプロフェッショナルな方ならいざ知らず、一般のブロガーはスタイルシートの事をよく判ってなかったりします。「これって一体どんなスタイル設定をしてるんだろう?」って時です。内部スタイルシートを使ってるんなら、IEのメニューから「ソースの表示」を選べば問題ありません。殆どのブログは外部スタイルシートを使ってスタイル設定しています。ところが標準のままだと外部スタイルシートを見る事はできません。そんな時に外部スタイルシートを見れてしまう便利ツールがこちらです。「外部ファイル一覧を表示する」をクリックすると別ウィンドゥが出て、そのブログで利用されてる外部スタイルシートなどを確認する事ができます。作ってる方からすると、あんまり見て欲しくないものですが、あくまで勉強の為であって、他には何も他意はありませんのでご容赦ください。m(_"_)mって、うちのブログのスタイルシートが一番見られたくないんですが(汗)。変テコなコメントでいっぱいなんです(笑)。]何を今更って感じなんですがBlogPeopleとMyblogListのリンクメニューをCSSインラインフレームで収縮表示させました。Me)などが隠れてしまっていました。これらをインラインフレームの外に出す事にしました。参考にしたのはこちらです。MyblogListにスクロールバーがついた!まずBlogPeopleは、以下のスタイルシート設定をCSSファイルに追加するだけです。heightは任意です。リンクリストが指定した高さ以上になると、自動的にスクロールバーが出ます。</div>となってるので、そのまま効きます。次にMyblogListは、貼り付けるコードを書き換える必要があります。Meをなし」に設定して、新たにコードを取得します。取得したコードをクラス指定した<div>タグで囲みます。(当然クラス名は任意)さらにMyblogListへのリンクを自作し、直下に追加します。BlogPeopleと見た目を同じくする為に<br>も追加します。スタイル指定で行きたい方はご自由に。MyblogList</a><br>次にMyblogListのコード生成から「JavaScriptを使用したListMe!!」のコードを取得します。要するにListMeだけ別口でブラウザ処理させるって事ですね。先ほどの<br>の下に追加します。<br>javascriptのListMe!!コードを貼り付け!最後に以下のスタイルシート設定をCSSファイルに追加して完了です。}追記:mybloglistのサービスがDrecomRSSへ以降して、リストコードも張り替えないとと思ってると、なんか訳わからん事になってます。張り替えて表示させてみたけど、Listに追加させるリンクがありません(悲)もう鬱陶しいので削除これからはBlogPeopleだけを表示させます。]実用例はどこかというと、このサイトの場合一番わかりやすい例は、個別ページのタイトルです。ペン型の画像を個別タイトルのリストマークに使ってます。色んな所に利用できるのでやり方を紹介しておきます。≫うちのサイトではSEO的な観点から個別エントリーのタイトルは<h1>~</h1>で囲んであります。その<h1>に対して、背景画像の設定をするだけです。設定例はこんな感じです。2px;}背景画像(イメージ)の設定は、background-image、background-repeat、background-positionの3つです。指定パスに画像アップするのを忘れずに!▽background-imageでは背景画像として読み込む画像のパスを設定。▽background-repeatでは背景画像を繰り返さないように設定。▽background-positionでは左上を基準として、左右、上下の位置を指定。後は<h1>~</h1>に挿入する文字列をpaddingを使って調節します。単純だけど、これって結構応用範囲が広いんですよね。画像を変えたい時もスタイルシートをちょちょっと変更すれば良いだけです。うちのサイトでは個別タイトルの<h1>だけじゃなくて、サイドメニューの<div>や<a>タグ、またコメントや、トラックバックを表示させる<div>タグで使いまくりです。]ちょっとサイドメニューが多くなってきたので、スタイルシートを使ってインラインフレームを作成、その中に適当なメニューを納めてすっきりさせました。Japanなどのお気に入りリンク更新サービスである、「リンクリスト」、「MyblogList」です。※勿論それ以外のものでも納められます。こちらのサービスは各ブラウザにjavascriptを出力するタイプのものなので、通常のインラインフレームにするのが厄介です。できるかもしれないけど、スタイルシートで簡単にできるので以下のように設定しました。両サイト指定のコードを以下のように<div>で囲んで、クラス名を新たに追加します。language="javascript">指定されたコード</script></div>スタイルシートの設定例は以下の通りです。」を使うことで出来上がりは同じようになります。気をつけたいのは、borderとpadding属性です。これらの属性のサイズ指定はブラウザによってはwidth属性に加算されるので、予めそれを見越してwidthを設定しておく必要があります。ちなみにスクロールバーの色を変える場合は、以下の設定を追加します。]MovableTypeではスタイルシートを変更する事がよくあります。標準の編集画面でそれを行うのは手間が掛かりすぎます。