MovableType スタイルシート攻略

**精子王** · 04/09/21 12:10:42

さぁ、語れ！

**Trackback(774)** · 04/09/23 02:06:39

期待あげ

**Trackback(774)** · 04/09/23 16:47:55

関連ｽｯﾄﾞﾚ
Movable Type
http://pc5.2ch.net/test/read.cgi/blog/1092187529/

MOVABLETYPE3.xむけTipsと、雛形テンプレートセット提供サイト
HINAGATA
http://hinagata.biz/

**Trackback(774)** · 04/09/23 16:49:18

■Movabletype　デフォルトテンプレート（3.0用）
http://www.movabletype.org/default_styles.shtml

■ARTIFACT -人工事実-　新聞社サイト風テンプレート
http://artifact-jp.com/mt/archives/200307/newstemplate.html

■2xUP
http://2xup.boo.jp/css/

■すちゃらかCSS素材集
http://www.sucharaka.jp/blog/

■風のまにまに号　macromedia風テンプレート
http://wandering-wind.jp/archives/2004/0515225938.html

**Trackback(774)** · 04/09/23 18:07:32

デザイン(構造も)がかっこいいblog
http://pc5.2ch.net/test/read.cgi/blog/1094775564/

Template Generator
http://www.erisfree.com/d2/apart.php

**Trackback(774)** · 04/09/23 20:13:02

他力本願の糞スレだなｗ

**Trackback(774)** · 04/09/24 16:44:15

本買ったら？

**Trackback(774)** · 04/09/24 19:51:42

検索が出来る人はネットでいくらでもcss学べる。
検索が出来ない人は本を買えば良い。

**Trackback(774)** · 04/09/29 22:17:21

ポータル、プロバイダ別blogデザインカスタマイズ事典
http://www.amazon.co.jp/exec/obidos/ASIN/4839915717/
という本が出ている

**Trackback(774)** · 04/09/30 09:41:25

blogはHTMLの知識がないとできないよ。
CSSはHTMLがわかってないとスパムだよ。

**Trackback(774)** · 04/10/01 02:27:48

　　終　了　棚

**Trackback(774)** · 04/10/01 08:52:18

　　大　陸　棚

**Trackback(774)** · 04/10/01 11:18:50

ティナ・ターナー

**Trackback(774)** · 04/10/01 13:39:11

　　播　磨　灘

**Trackback(774)** · 04/10/04 09:52:17

　　カ　ナ　ダ

**Trackback(774)** · 04/10/11 01:27:15

期待age

**電脳プリオン** · 04/10/29 23:31:25

失望sage

**Trackback(774)** · 04/11/12 03:57:03

IEにあわせて作ると、大変な目にあう。

**Trackback(774)** · 04/11/12 06:59:53

>>23
コーディングする側になって初めてIEのクソっぷりはわかるよね。
かといってオペラモジラサファリ基準で作ってもIEで表示出来ないと閲覧者が激減。

**Trackback(774)** · 04/11/12 19:11:39

>>24
禿同
結局ほとんどHTML側で書いてCSSは書体関連ぐらいにしか使ってない
IE逝ってよし

**Trackback(774)** · 04/11/14 06:45:00

firefox使ってるけど、たまにニュース動画を見ようとすると弾かれたりするのでIEを嫌々使ったりすることがある。

**Trackback(774)** · 04/11/14 07:33:08

Firefoxで綺麗にレイアウトできたーと思ってIEで見るとメタメタで落ち込むことが良くあります
OperaでもSafariでも構造は崩れないのにIEだけ何故・・・

**Trackback(774)** · 04/11/14 13:30:07

2xupって、どっかに移転した？

**Trackback(774)** · 04/11/14 17:37:17

>>28
ttp://2xup.org/
じゃね？

**Trackback(774)** · 04/11/15 07:01:24

3columnの添付れ、なくなっちゃったのか。＿|￣|○

**Trackback(774)** · 04/11/30 16:57:51

あの、MT3.11-jaで
カレンダーの今日をハイライトしたいんですけど
ttp://www.mylog.jp/blogs/q-box/archives/000370.html
ここを参考にしても、
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center"><span class="calendar">

この記述がみつからなくて、追加する物だけ追加したんですが
うまくできません。
どなたか教えて下さい。

その質問箱に質問したかったんですが、何回やっても、コメントができなくって。
お願いします。

**Trackback(774)** · 04/12/01 15:26:24

>31
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center"<MTCalendarIfToday>bgcolor="#FFB6C1"</MTCalendarIfToday>><span class="calendar">

**Trackback(774)** · 04/12/01 15:46:41

>31
というか、エディタにコピペして検索すればすぐだろ。

**Trackback(774)** · 04/12/01 18:06:33

ごく普通の２カラム構成で左側にカレンダー＋その他諸々、右側に本文ってって場合
CSSのどこをどういじればいいの？
おしえて！えろい人

**Trackback(774)** · 04/12/01 18:39:39

ちぬこをうずまきを描く感じでいじれば良い

**Trackback(774)** · 04/12/02 00:36:45

左を固めて本文を流し込めばいい。ＣＳＳ自体はお助け本でも読め。

**Trackback(774)** · 04/12/02 02:47:45

>>34
インデックスページのソース見て考えれ

**Trackback(774)** · 04/12/02 19:36:28

FireFoxで表示がおかしくなります。

<div id="contener">
<div id="banner">バナー</div>
<div id="left">
<div id="content">コンテンツA</div>
<div id="content">コンテンツB</div>
</div>
<div id="right">メニュー</div>
</div>

という構造にして、

#contener {
background-image:url(backimage.jpg);
background
}

とcssを記述して#contener部分の背景にイメージを表示させているんですが、
FireFoxで表示すると、バナー部分を過ぎたところで背景のイメージが表示されなくなります。
#contener部分のborder枠も同じところで消えてしまってます。

IEやOperaでは正常に表示されています。

どなたかよろしくお願いします。

**Trackback(774)** · 04/12/02 22:46:53

#contener {
background-image:url(backimage.jpg);
background ← 意味不明
}

**Trackback(774)** · 04/12/02 23:17:59

>>39
切れてました。。

#container {
width:750px;
background-image: url(bg.jpg);
background-repeat: repeat;
}

#containerのスペルも間違ってた…＿|￣|○

**Trackback(774)** · 04/12/03 14:59:25

>>38
つか、contentってIDが２個あるけど、IDは文書内で一意のもの。

**Trackback(774)** · 04/12/03 21:45:46

IDとclassの関係は初心者の陥りがちな罠だね
理解してからでもどうして分かれてる必要があるのか時々悩むが。

**Trackback(774)** · 04/12/04 00:05:25

同じIDの人が何人もいたら混乱するじゃん普通
同じクラスの人はたくさんいるじゃん普通

**Trackback(774)** · 04/12/04 00:52:58

おお
それは面白い例えだ

クラスで十分なのにIDまでつける意味はわからんが

**Trackback(774)** · 04/12/04 10:47:08

全然伝わらなかった＿|￣|○

**Trackback(774)** · 04/12/04 10:48:21

意味はわかってるよ
しかし機能としてどうなのよと

全部class扱いだとどういう不都合があるのかわからんの。俺は。

**Trackback(774)** · 04/12/04 10:51:25

速攻レスがあってびびった・・・

まぁ全部classで済ますことも不可能じゃないだろけど（デザインに限れば）
まとめて指定と個別に指定と両方あった方が便利やん。
それで伝わらなかったらもういいよ(´･ω･`)

**Trackback(774)** · 04/12/04 11:00:04

あ、本当だ速攻でつけてたんだな俺
>>44書いてから>>46書くまでずっとドラクエやってたんだけどなｗ

>>47
うん、だから論理的な意味はわかるのよ。
でも「区別されてなきゃ出来ない事」ってのがなにも無い気がするんだけどどうなのよと。

**Trackback(774)** · 04/12/05 05:41:59

何に拘ってるのかよくわからんけど、
ないよりあった方が断然便利。
なぜ便利かわからない人は一生classだけ使ってればよし。

**Trackback(774)** · 04/12/05 12:06:32

idはそのドキュメントに一つしかないからアンカーにつかえるよ。

**Trackback(774)** · 04/12/06 12:54:23

>>38
フロート要素の仕様｡IEの表示はバグ｡
#containerの閉じタグ直前(#rightを閉じた直後)で
<br clear="all">するか、#rightの下に
新しいブロック要素(#footerとか)を作って
#footer{clear:both;}
としてやるかしてみ｡

**Trackback(774)** · 04/12/06 14:19:34

>>51
>>41

**Trackback(774)** · 04/12/06 14:49:39

>>52
Σ(ﾟДﾟ)

**Trackback(774)** · 04/12/06 17:29:20

classとIDは苗字と名前に例えられたりするよね。
苗字（class）だけで指定できる場合と、特定の個人だけを指定したければ名前（ID）で指定する。

**Trackback(774)** · 04/12/06 17:55:59

classもつかいようによっては厨房あつかいされるので注意でつ

**Trackback(774)** · 04/12/07 10:42:49

今までテーブル厨でＣＳＳとかあんまり使ったことなかったんだけど、
いざ使い始めるとほんとにＩＥが憎くなるねｗ
なんであんなにレンダリング汚いの？

**Trackback(774)** · 04/12/07 13:13:14

HTMLで幾らサイトを構築できても、ｽﾀｲﾙｼｰﾄが
全然分からない状態でMTに手を出したら駄目だね。
色々検索してみてるけど、結局タイトルバナーの
下に文を表示する手段すらも分からない始末。

**Trackback(774)** · 04/12/07 15:58:19

それはHTMLの範疇だと思うがどうか

**Trackback(774)** · 04/12/08 01:20:55

>>56
Mozillaがすべて正しい訳じゃないよ

**Trackback(774)** · 04/12/08 02:48:38

>>59
間違った記述でも勝手に解釈してテキトーに描画するIEより遥かにマシ

**Trackback(774)** · 04/12/08 05:17:33

>>60
馬鹿が書いたクソhtmlを補って表示してくれてるんじゃねーか
有り難いと思えよ

悪いのはウンコみたいなhtml書いてる奴でIEのせいじゃねーだろ
アタマワルイの？

**Trackback(774)** · 04/12/09 18:57:38

なんか辛いことでもあったのか。

**Trackback(774)** · 04/12/11 02:45:55

正しいものなどなにもない
信じられるのは自分と金だけ

**Trackback(774)** · 04/12/11 09:55:02

よほど追い詰められているんだな

**Trackback(774)** · 04/12/11 14:36:08

>63
。。。。

**Trackback(774)** · 04/12/17 13:37:49

スタイルシートで背景を黒、文字を白にしているんですが
引用した後の文字が黒いままです。どういった定義が必要になるんでしょうか？

今は

=========
引用文 ←スタイルシートで定義した形式
=========
ということですが。　　←黒背景に黒字

となってしまっています。

**Trackback(774)** · 04/12/17 14:13:26

>>66
p {color:#fff}

**Trackback(774)** · 04/12/17 14:38:24

>>66
ソースをまんまコピペした方がいいと思う。
たぶん単純ミス・・・

**Trackback(774)** · 04/12/17 15:18:02

流石ですね
”攻略”のヒントが満載ですね

**Trackback(774)** · 04/12/17 17:14:43

>>67
ありがとうございます。加えてみましたが同じでした。
>>68
まんまとなると、かなり長くなるんですけど、それでもいいのでしょうか？
抜粋するとこうです

div.entry-body blockquote {
border: 1px solid #fff;
border-width:2px;
MARGIN: 5px 5px 5px 20px;
PADDING: 5px 5px 5px 20px;
BORDER-STYLE:dashed;　
background-color: #333333;
font-size: 95%;
color: #fff;
}

div.entry-body blockquote blockquote {
font-size: 100%;
}

div.entry-body blockquote ul {
list-style-position: inside;
list-style-type: square;
}

div.entry-body pre {
font-size: 95%;
border: 1px solid #fff;
background-color: #E5E5E5;
color: #000;

**Trackback(774)** · 04/12/17 17:31:10

>>70
なんか中途半端な抜粋で判断のしようが・・・
アドレス晒せないの？

**Trackback(774)** · 04/12/17 17:37:28

>>70
div.entry-body blockquote ul, div.entry-body blockquote p { color: #fff; }

**Trackback(774)** · 04/12/17 17:39:44

>>70

それと元のスタイルシートにあれこれ追加するのはいいけど、無駄のないようにな。

div.entry-body blockquote {
border: 2px dashed #fff;
margin: 5px 5px 5px 20px;
padding: 5px 5px 5px 20px;
background-color: #333;
font-size: 95%;
}

**Trackback(774)** · 04/12/17 17:45:06

>>71
恥ずかしくてごめんなさい。

>>72-73
今から加えてみます！

新しいスタイルシートを発見したので楽しくなって探したスタイルをいろいろと
追加してしまっています。これから力量に合わせようと思います。

66 · 04/12/17 18:13:03

できた！

ありがとうございます。
今まで、追記や画像、リストの後の文字にはイチイチ<font color="#ffffff">を
使っていたので本当に助かりました。m( __ __ )m

**Trackback(774)** · 04/12/17 20:24:05

>>72-73
>>75
な、なんでこれで直るんだー！！

<body>
<div class="entry-body">
<blockquote>ここに引用文（黒背景に白字）</blockquote>
<p>ここに本文（白字にしたい）</p>
</div>
</body>

スタイルシートはbody { background-color:#000; color:#fff; }だよね、多分。

確かに提示されたスタイルシート自体にはおかしいところがあるけど、
entry-body p　に関しての記述ががないから影響がなく白文字で表示されると思うんだけど。

66 · 04/12/17 20:56:14

正直に書きます。。。
一度目はちゃんと表示されたので成功の書き込みをしたんですけど
もう一度更新したら、、、黒い文字のままでした。。。。orz
でもいまさらダメだったって書き込みにくくなっていました。

66 · 04/12/17 20:59:17

>>76
こうなっています

body {
font: normal normal normal 100%/1.5 verdana;
color:#fff;
background-color: #000;
}

**Trackback(774)** · 04/12/17 21:20:08

>>78
たぶんどっかでタグ閉じてないな。
ＨＰアドレス教えてくれたらすぐに分かるんだけど…

**Trackback(774)** · 04/12/17 23:47:17

>>79
なるほど
そうやって晒させるのですね。

**Trackback(774)** · 04/12/18 00:11:18

>>80
晒す以前にこの情報だけで回答できたらエスパーだぜよ
アップローダーでもどこでもいいからトップページとそのCSSを用意すれば
解決できるんだろうが

**Trackback(774)** · 04/12/18 00:17:04

適切に抜粋できる腕があったら最初からトラブってないと思われ

**Trackback(774)** · 04/12/18 02:08:18

>>79
俺もそれに５円。

**Trackback(774)** · 04/12/18 17:11:39

これのどこが「MovableType スタイルシート攻略」なんだろう
初心者板の方に誘導した方がいいんでねぇの

**Trackback(774)** · 04/12/18 18:06:37

そもそもMT特有のスタイルシート攻略法など存在しない

**Trackback(774)** · 04/12/19 10:56:58

そもそもgoo blog のほうが便利。

**Trackback(774)** · 04/12/19 11:17:37

簡単と便利は違う

**Trackback(774)** · 05/01/08 17:22:15

エントリー投稿時にリンク作るのがあるけど、あれ最初の状態から
target="_blank"　にしておくことって出来ないかなぁ・・・
そうするとかなり便利になるんだけどなぁ

**Trackback(774)** · 05/01/08 18:17:08

>>88
ブログ質問箱に解決策あり。があ、ＣＳＳとは関係ないべ。

**Trackback(774)** · 05/01/12 18:46:07

>>88
基本的に新規ウインドウで開かせたいならテンプレで
<base target=_blank>にしといて、同一ウインドウで開きたい
リンクのみその都度_selfにしとけばいいんじゃないのか。

**Trackback(774)** · 05/01/12 23:33:27

っていうか別窓で開くのやめようぜたのむウザイから

**Trackback(774)** · 05/01/13 01:52:02

>>91
「戻る」よりウィンドウ閉じる方が速いから微妙だけどな。
Operaなら戻るの速いんだけどなぁ・・・

**Trackback(774)** · 05/01/13 11:12:20

>>92
＞「戻る」よりウィンドウ閉じる方が速い

同感。マウスでいちいち「×」をクリックしてるならともかく
「Ctrl（Macではコマンド）+W」覚えてしまうとね…。

**Trackback(774)** · 05/01/14 16:22:43

タブブラウザ+マウスジェスチャーでやってるぶんにはどっちも大して変わらん。

**Trackback(774)** · 05/01/15 09:27:19

やたら重いサイトは戻るのにも時間かかるから
_blankの方がありがたいなぁ。
確かに>92の言うように戻るの速さはOperaを
見習って欲すぃ

**Trackback(774)** · 05/01/19 11:11:31

エントリータイトル部分の背景色を変えたいのですが、ブラウザによっては上手く反映されません。
テンプレートのスタイルシートを以下の様に書き換えました。
content h3の部分にbackground-colorを付け加えただけです。

■ 変更前
.content h3 {
color: #333;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: small text-align: left;
font-weight: bold;
margin-bottom: 10px;
}

■ 変更後
.content h3 {
color: #333;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: small text-align: left;
font-weight: bold;
margin-bottom: 10px;
background-color: DC143C　← 付け加えた箇所
}

MacOSXのSafariで見ると思った通りにタイトル部分の背景に色が付いたのですが、MacOSXのIEやFireFox、WindowsのIEで見ると何も変わっていません。
基本的な事で申し訳ありませんが、アドバイス頂けないでしょうか。
ご面倒お掛けしますがよろしくお願いします。

**Trackback(774)** · 05/01/19 11:18:12

すいません。解決しました。

background-color: DC143C
　↓
background-color: #DC143C

#を付けたらキチンと反映されました。
SAFARIをメインにしていたので気づかなかったのですが、SAFARIって#が無くても大丈夫だったのですね。
お騒がせしてすいませんでした。

**Trackback(774)** · NG

>>96
background-color: DC143C　← 付け加えた箇所
↓
background-color: #DC143C;　← 付け加えた箇所

05/01/19 14:32:33

レベル低いなｗ

**Trackback(774)** · 05/01/19 17:17:38

ｳ､ｳﾝ(´･ω･`)

**Trackback(774)** · 05/01/20 14:08:13

そ、そうだねコーウェンくん

**Trackback(774)** · 05/01/24 20:40:47

別スレで質問したのですが、スレ違いだった為にこちらに移動してきました。

スクロールバーの色を変更したいのですが、
スタイルシートに書き込んだところ、反映してくれません。
以下の記述です。
どのようにすれば良いのかご教授願います。

body {
  overflow-x: hidden;
  scrollbar-face-color: #FFFFFF;
  scrollbar-highlight-color: #000000;
  scrollbar-shadow-color: #000000;
  scrollbar-3dlight-color: #FFFFFF;
  scrollbar-arrow-color: #FFFFFF;
  scrollbar-track-color: #FFFFFF;
  scrollbar-darkshadow-color: #FFFFFF;
    margin: 0px 0px 20px 0px;
        background-color: #000000;
    }

**Trackback(774)** · 05/01/24 21:01:09

>>102
MT じゃなくて手書きの HTML でローカルで試したところ、ちゃんと反映したが。
まさか「 IE 以外で反映しません ! 」なんて言うんじゃないよね ?
つか、 overflow-x って……

**Trackback(774)** · 05/01/24 21:04:28

>>103
横は消したかったんです。
同じくＭＴ以外の動作を確認してます。
でもＭＴだとどういうわけか上手くいかなくて…。

**Trackback(774)** · 05/01/24 21:08:47

overflow-x ってそもそも IE 専用のプロパティだし、
hidden にするってことは、横スクロールバーが出るであろう場合に出ないようにしてしまうってことだ。
はっきり言って不便以外の何者でもない糞デザイン（設計という意味で）なので、
やめた方がいいと思う。

で、 MT で反映しないってことは、
単にスタイルシートのテンプレートの再構築ができてないとかそんなミスな気がしてきた。

**Trackback(774)** · 05/01/24 21:11:22

>>105
そうですか…。ではそこの部分、消しておきます。
再構築はちゃんとしました。
それでも反映してくれない(´Д⊂ｸﾞｽﾝ

**Trackback(774)** · 05/01/24 21:56:07

>>102
ドキュメントスイッチ消してみ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
一番上のやつ