2006年09月18日
MT（Movable Type）カスタムの小技 ～スタイルシートで行間を自由に～
久々にMT（Movable Type）ブログのちょっとしたワザをご紹介します(★ゝω・)b☆
前回の記事で、<br>をいっぱい並べて、行間を作るのはダメ！というお話をしましたが・・・
↓↓↓
HTMLチェックツールを使ってみよう！
ブログ記事を書くときに、行間を大きく取りたい時がありますよね。
でもね、MTに限らず、<br>をいっぱい並べて、行間を作るのはHTMLの文法上、ダメな方法なんです。
HTMLは、デザインを指定するものではないので、スタイルシートで決めてあげましょう。
<br>を使わずに、スタイルシートで行間を決める方法をご紹介します。
MTの場合でご説明しますが、他のブログサービスでも応用できると思います。
では早速、MTにログインし、テンプレート → スタイルシート をクリック。
------------------------------------------------------------
① 行の高さを指定する方法
まず、以下のように、スタイルシートの中に追加します。
どこでもいいんですが、一番上か、一番下なら問題ないと思います。
#example1 { line-height: 200%; }
これは、おおざっぱに言うと、
example1と指定したところは、文字の大きさに対して200%の行の高さにしてね！
という意味です。
始めにスタイルシートに組み込んで、記事を書くときに、使いたいところでタグ指定します。
なので、記事を書くときに、以下のように書きます。
<p id="example1">行の高さを指定したいテキスト</p>
これも、おおざっぱに言うと、
example1の指示に従ってね！
という指定です。
すると、「行の高さを指定したいテキスト」の後が、この例の200%の場合、一行分空きます。
もっと空けたい場合などは、500%とか、様子をみながら同じパターンのものを付け足せばOK。
その場合、「example1」の所を、2、3、・・・などと変えて増やしてください。
------------------------------------------------------------
② 行の上に余白を指定する方法
①の場合と、やり方は同様です。
スタイルシートには、以下を追加。
#example2 { margin-top : 20px; }
記事を書くときに、以下のように指定。
<p id="example2">行の上に余白を空けたいテキスト</p>
こちらは、「行の上に余白を空けたいテキスト」の上に、指定した分の余白ができます。
もっと大きく余白が欲しい場合は、20pxのところを50pxとか、100pxとか、
何種類か用意しておけば、好きな行間を設定できますね。
「example1」などの部分は、変えても大丈夫。
“例”だから“example”にしてみただけなので。
他にも方法があるかとは思いますが、こんなカンジでどーっすか？？？
どちらでも、使いやすい方でお試しください（＾＾）＞
----------------------------------------------------------------
鶴姫がネットビジネスのお勉強をした、e-副業大学INNC
↓↓↓
e-副業大学INNC
入会初月は、無料で体験できます。
----------------------------------------------------------------
■ e-副業大学INNC ってなに？
過去4年近くにわたってインターネットビジネスで稼ぐ方法を
教え続けてきたJAPANPOWER.LLCが提供するネット副業専門スクールです。
アフィリエイト、ドロップシッピング、アドセンスまで、
初心者にも分かりやすい動画やテキスト、
オンラインセミナーでバッチリお教えしています。
会社のお給料だけでは不安な方や、自分のチカラで
収入を増やして将来独立を目指す方までたくさんの方々が
INNCでネットビジネスを学んでいます。
----------------------------------------------------------------
↓↓↓ 応援クリック♪宜しくお願いします（＾－＾） ↓↓↓
----------------------------------------------------------------
- Permalink
- by Lulu
- at 01:10
- in MT(Movable Type)
- Comments (28)
comments
こんにちは、あき(・e・)です☆
深夜の徘徊お疲れ様です～（笑）
って、私も同じようなものですが…(^^ゞ
鶴姫さんもすっかりＭＴマスターですね♪
スタイルシートがいじれるなんて凄いっす☆
勉強になりました(^-^)
応援ぽっちり♪
ご無沙汰してますタカツカです。
勉強になりますね～
チェックツールも勉強になります。
サイトガラリとリニューアルしました（URLも変わりました）ので是非また遊びに来てくださいね！
しかしこの二人・・・
あき(・e・)チャンも鶴姫さんもどんだけ早起きなんだか・・・ 今日は祝日じゃなかったか？？
応援ポチッ♪
おはようございます。
うん？今日は祝日なんだ（笑）。
いいなぁ。
スタイルシートは、理解できるようになりたいです。
サイトの見栄えはもちろん、コードはきれいで気持ちがいいですもんね！
応援!
おはようございます。安藤です。
コメント＆リンクありがとうございました。
リンクはこちらも完了です。
ありがとうございました。
それにしても鶴姫さんのブログ
ＭＴだったんですね。
色合いがライブドアっぽかったので
固定観念で「ライブドアブログ」になってました。
すみませんm(__)m
で、改めて目を三角にして拝見させていただきました。
勉強になります。今後ともよろしくです。
応援★★
はじめまして、せーろひです。
サイトの改造、難しいです。
スタイルシートで改造するのが、ゆくゆく楽なんですかね・・
でも、難しいですね
また、遊びに来ます
こんにちは、dannaです。
これは、さっそく利用させてもらいます。
BRを連続させて書くときがあるので、助かりそうです。
応援、ポチッ。
鶴姫さん
こんにちは、ponです。
コメント、応援を有難うございます。
スタイルシートを弄れるといいですね。
私はコワゴワです。
これ、コピペで戴きま～す♪
又来ます。応援ポチッと。
これはありがたい情報です
早速使わせて頂きますよ
又きます(^_^)vね！
それでは、応援ポチッ！
こんばんは、じゅんじです。
ご無沙汰してすみません(-o-;
スタイルシートは怖くていじれません・・。
でも分かりやすい説明だからやってみようかな？？
いやっ！私にはまだ早い！！
応援ポチリ☆
鶴姫さん、こんばんは！
まるです。
今日は、ご訪問＆コメントありがとうございました。
それに相互リンクまでしていただけて
感謝感激です！(*^_^*)
こちらもリンク完了しました！
ＣＳＳでの行間指定、とっても勉強になりました。
サイトを改造したくても
なかなか怖くて踏み込めなかったのですが
少しずつやってみようかな？
これからも宜しくお願いいたします。_(_^_)_
こんばんは natuです。
遅くにご訪問して下さって有難うございました m(__)m
スタイルシートに関しては、
知識がないので本当に勉強になります。
ご丁寧なご説明、
有難う御座いました m(__)m
こんばんは～。
なるほど！そういうスタイルシートの使い方で、
改行
の連発は防げるんですねぇ。
かなり勉強になりました(^_^)
これは使えますね！
応援ポチ！！
鶴姫さんこんばんは。
いつもありがとうございます♪
すいません･･･
今日は応援のみで失礼させていただきますm(__)m
応援★
こんばんは＾＾
スタイルシートはまだ手付かずです。
デザイン面も身に着けておきたい
スキルですね。
ＭＴカスタマイズもやりだすと面白そう
ですね。
応援クリック★
お疲れ様です
スタイルシート分かるんですね！凄いです！
にしたい箇所が、どうしてもあるのですが
それをやると点数がなぁ～って
悩んでいたので、この記事はタイムリーです。
ありがとう御座いました(^_^)v
"ヾ(ﾟ▽ﾟ*)>応援ぽち!!
いつもありがとうございます。
丁寧な解説で
鶴姫さん、尊敬しちゃう♪
こうしてアウトプットすることで確実に自分のものになりますよね。
み習わないと～!!
こんにちはっ亜桜です。
いつもコメント有難うございますv
この小技は使えますね～♪Niceです！
亜桜はその都度、その部分に
スタイルシート入れてました(苦笑)
spanってヤツ、ご存知ですか？
でもスタイルシートに入れておく方が
楽そうですね。今度やってみます。
タメになる知識を有難うございました！
応援していきます！ポチッ凸
鶴姫さん、こんばんは^^
スタイルシートもやりだしたんですか！？
こりゃ、大輔もうかうかしてらんないですわ^^;
その後、お体いかがですか？
季節も変わり目、ダブルで逝かないようにご注意を ヾ(^^
応援ぽち！
こんちは～かるびです。
いつも有難うございますm(＿＿)m
むむぅ。。凄すぎです(^^ゞ
かるびには、ちんぷんかんぷんですな(笑)
でも、非常に解りやすい説明なので
頑張ってみます(*＾＾)v
時間帯が・・・・無理をなさらずに(^^ゞ
応援して帰ります♪
こんばんは～かめちきです♪
ご無沙汰です^^;
なるほど～ そうやって行間を空けると良いんですね～
ＦＣ２で試してみます^^
参考になりました。
それでは応援ぽちっと♪
鶴姫さんこんばんは。
え～私も深夜徘徊です・・・
最近子どもたちと一緒に寝てしまって、夜中に起きてパソコンに少し向かって、また寝て・・・
を繰り返してて、リズムがグチャグチャなんです。
スタイルシートってどうも苦手でして・・・
MTの投稿画面で、勝手に行間を空けてくれる機能？みたいなのがありますよね。
これってあまり利用しない方がいいんでしょうか？
分かりづらい説明でごめんなさい・・・
応援ポチ。
こんにちは。
もう完全にＭＴマスターといった感じですね！
ＣＳＳも少しはいじれるようにならないとダメです・・
応援クリック！
こんにちは～mimiです♪
こんな小技があるとは(*´∀｀*)♪ 凄いですね！
私もずっと
を乱用してました(笑)
細かい部分ですけど、こういうのを知ってるといいですね！！
23日は、楽しみにしています～♪
↑追記
すいません、HTMLが使えるの知らなくて、改行のタグを入れたら
コメントが改行されてました(笑) 失礼m(_ _)mっっ
こんばんわ―_φ(゜▽゜*)♪
凄い！そんなソースがあるんですね。
早速、つかわせていただきます。
いつもコメントありがとうございます ヾ(・ε・。)
応援ポチ！(〃^∇^)o_彡☆
こんばんは！yoe.ka-chaデス。
鶴姫さん、スゴイです！！
忙しい毎日だろうに、いつどうやって勉強しているのでしょう？？
ま、マネができないっす（ToT）
でも、見習いたいと心底思います。
応援☆
人気ランキングから気になって遊びに来ました
アフィリエイトの勉強として応援がてら
ブログ回りしています
お勉強させていただきます＜（_"_）＞
ランキング投票して帰ります
ＩＮ ＯＵＴダブルで応援よ（人･ω･*)
応援(*・ω・*)ﾉﾉ”凸 ﾎﾟﾁｯ♪ﾎﾟﾁｯ♪
43位確認してきました！
また遊びにきますね♪
こんばんは！わかです☆
CSSをいじれるなんて、やりますね～♪
とても勉強になりました☆
また遊びに来ますね！応援