ぽっとの陽だまり研究室 : 小見出しの装飾

<< ■投稿とスキン編集が便利になち... ■mozillaで画面が崩れて... >>

小見出しの装飾

リンクなどの小見出しの装飾に、上のようなスタイルを採用しました。
この装飾でポイントとなるのが、「BORDER-LEFT」です。

「BORDER-LEFT」で左側のボーダの色を変えて、10pxほど太くしただけです。
でも、これだけでイメージが変わるので面白いですね。

CSSの定義

h3.komidasi {

WIDTH : 400PX;
PADDING-TOP: 5px;
PADDING-BOTTOM: 2px;
PADDING-RIGHT: 2px;
PADDING-LEFT: 10px;
BORDER-TOP: 0px solid #cccccc ;
BORDER-BOTTOM: 1px solid #cccccc ;
BORDER-RIGHT: px solid #cccccc;
BORDER-LEFT: 10px solid #DAEDFE;
MARGIN: 1px 10px 10px;
FONT: bold 1em 'Arial';
COLOR: #666666;
TEXT-INDENT: 0px;

}

いらない部分もあるかもしれません＾＾；
いろいろ試した結果です＾＾

利用方法

利用するときはこんな感じです
<h3 class="komidasi">小見出し</h3>

みんと♪

# by minto7mimi | 2004-07-03 17:29 | スキン編集

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。

by potto37 | 2004-07-13 10:31 | │├投稿欄 | Trackback(2) | Comments(8)

<< ■投稿とスキン編集が便利になち... | ■mozillaで画面が崩れて... >>

トラックバックURL : http://potto.exblog.jp/tb/648112
トラックバックする(会員専用) [ヘルプ]

※このブログはトラックバック承認制を適用しています。ブログの持ち主が承認するまでトラックバックは表示されません。

Tracked from 「ス」的な日常生活 at 2005-09-14 11:52

タイトル : 投稿欄に小見出しをつける。
スキン編集でいつも勉強させていただいてる「ぽっとの陽だまり研究室」さんで小見出しの装飾の仕方があったのやってみましたー。　コレです。　　　↓ 小見出しの装飾やり方はまずＣＳＳ編集に下記を入れて・・・。 h3.komidasi { WIDTH : 430PX; PADDING-TOP: 5px; PADDING-BOTTOM: 2px; PADDING-RIGHT: 2px; PADDING-LEFT: 10px; BORDER-TOP:......more

Tracked from usk_h.blog at 2005-10-11 22:31

タイトル : 投稿タイトル部分の編集。
投稿タイトル部分と本文の枠を編集してみました。やり方はいつもご教授願っている『ぽっと陽だまり研究室』さんで紹介されていた『小見出しの装飾』のテクニックを投稿タイトル部分に使わせて頂きました。セルの背景色を変える、画像を貼る…etc、いろいろ考えたんですけど、うまくいかなくて…。ボクにとってまさに目からウロコでした。しかし、これで少しは見やすくなるかなぁ、と思ったんですけど、かえって見づらくなってしまったかも。。。...more

Commented by aspswim at 2004-07-24 11:23 x

はじめまして
まだブログを作って間もありません。
この付箋をつける方法を試したいと思いますが,
元のスキンにはそのバックに画像があります
そういう場合は無理でしょうか

Commented by potto37

at 2004-07-24 11:29

aspswim さん、はじめまして。

画像があっても大丈夫ですよ＾＾
投稿欄に書き込むので、画像の上にかかれます。
あと、付箋の進化版を記事としてアップしますので
お楽しみに。

Commented by akira-405

at 2005-09-14 11:57

こんにちわー。
いつもお世話になってます！
また記事を参考にさせていただいたので
トラバさせていただきましたー！

Commented by potto37

at 2005-09-14 21:45

akira-405さん、こんにちは。
コードを転記しないで、紹介して頂いてありがとうございます。
とっても嬉しいです＾＾
また、遊びに来て下さいね。

Commented by usk_h

at 2005-10-11 22:36

こんにちは。
いつもお世話になってます。
『小見出し』ではないですが、投稿タイトル部分に使わせてもらいました。
助かりました！

Commented by potto37

at 2005-10-12 22:25

usk_hさん、こんにちは。
いつも遊びに来ていただいて、ありがとうございます。
お役に立てたようでうれしいです＾＾

Commented by kuronuko-yamato

at 2006-07-04 01:21

はじめまして。ブログカスタムサイトを探していたら辿りつきました。
事後報告で申し訳ありませんが早速、小見出しを使わせていただきました。
各種カスタム方法を見やすくキレイにまとめてらっしゃるので、こちらとしては
とても助かりました。
他にもたくさん利用できそうなのがあるみたいですので
使わせていただきたいと思います（　´∀｀）

無断で利用させていただくのは気が引けたので、ご迷惑とは思いましたが
ご報告差し上げました。

Commented by potto37

at 2006-07-04 20:41

kuronuko-yamatoさん、はじめまして。
ご挨拶ありがとうございます。
私のサイトは、自分ではあまり宣伝していないので
見つけて頂いてうれしいです＾＾

いろいろと楽しんだり、自分で工夫してカスタマイズして下さいね。

<< ■投稿とスキン編集が便利になち... ■mozillaで画面が崩れて... >>

名前 :
URL :

非公開コメント
※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。
削除用パスワード