MY CSS DESIGN

最新記事のRSS

FC2ブログのテンプレート配布・作成日誌。

≪ PREV | PAGE-SELECT | NEXT ≫

≫ EDIT

2008.11.04 Tue

バトン機能で出力されるタグ見栄え

FC2ブログにバトン機能が付いたらしいのですが、その出力されるタグがなんと定義タグ（dl dt dd）。うちのテンプレートは基本的にCSSでのタグの制御は抑えて作ってあります。よって定義タグを利用すればdd部分は字下げされて表示されます。でもあまり読みやすいとはいえませんよね。

そこでどのようにすれば見栄えを変えられるのかを書いておきます。参考にでもしてください。基本的には下記の5つのセレクタを弄る事が可能です。

.blog_baton {
}

/* 質問タイトル */
.baton_q {
}

/* 答え */
.baton_a {
}

/* 質問タイトル Q番号までの部分 */
.q_number {
}

/* 答え A番号までの部分 */
.a_number {
}

例えば、質問タイトルを太字にしたいのなら.baton_q { に font-weight: bold; でも加えれば太くなるし、質問の背景に色（background-color: #好きな色;）をつけてしまうなども有りでしょう。質問ごとに区切り線を入れたければ.baton_a { に border-bottom: 1px dashed #CCCCCC; でも入れれば区切る事も可能です。

スポンサード リンク


Q1　あいうえお
A1　かきくけこ
Q2　あいうえお
A2　かきくけこ

上記見栄えのCSSはこんな感じ

.blog_baton {
}

/* 質問タイトル */
.baton_q {
	font-weight: bold;
}

/* 答え */
.baton_a {
	margin: 0px 0px 5px 0px;
	border-bottom: 1px dashed #CCCCCC;
}

公式テンプレートや共有テンプレートで定義タグの見栄えまで考えて作られている物はあまり存在しないと思うので自分のテンプレートにあった定義リスト見栄えを試行錯誤してみてください。そしてこの記事が参考になれば幸いです。

■ 関連リンク

| FC2ブログカスタマイズ | Permalink | comments:5 | trackbacks:1 | TOP↑

COMMENT

★ ゆいちゃ
今回はしっかりセレクタが振ってあったから大丈夫。長さの調節はwidth指定すると答えの文章の横幅がそのwidthに依存しちゃうから微妙だな。どうしてもと言う時は背景画像でライン入れればいいかも。バトン機能は書くことが無い人には嬉しい機能ですね。俺とか俺とかあいつとか・・・

某巨大掲示板の情報の速さは凄いよね。とりあえずなんかあったら見とけみたいなｗ

★ ＪＩＲＯさん　はじめまして
テンプレートご利用ありがとう。あ！歌詞の表示良いですね。
俺はそのときの気分や気持ちなんかで差し替えたりしてますが、ＪＩＲＯさんはどうなんでしょう？まあとりあえずトップの画像をころころ変えるために作ったようなテンプレートなので遊んでみてください。そして楽しみながら（←これ重要ｗ）覚えていってください。

| ひよこ＠管理人 | 2008/11/07 00:30 | URL | ≫ EDIT

なるほど　バトンはそのまま挿入されるから
いじりようがないのかと思ってた

CSSにプラスしたらいいんだね
試しに入れてみたら　少し読みやすくなった
dashで区切るラインの長さ調節は
width: ○○px;って感じでいいのかな

でも　このバトン機能　１回試したらいいかなぁ(笑)
次　もしかしてバトンする時用にメモしときます♪


今日　夕方　またブログが見れなくなってた
前の助言を思い出して　某掲示板ですぐに確認したよ
落ちてる落ちてるって納得できてよかったーｗ

| ユイ | 2008/11/06 22:27 | URL |

ヒヨこさん、はじめまして！

テンプレート使わせてもらってます、
JIROと申します。

そして何気にヒヨコさんのブログの更新を
楽しみにしております。

またちょくちょく変わるトップ画像には
いつも驚き、笑わせてもらっています。

ここで楽しみながらHTMLやCSSの勉強をさせて
もらっています、ありがとうございます♪ｘ

| ＪＩＲＯ | 2008/11/06 22:23 | URL |

★ はるさん　はじめまして
テンプレートご利用ありがとう。
差し替える画像の横幅は530pxなので画像処理ソフトなどで大きくしてみてはどうでしょう？ただ大きくしてしまうと画像が劣化してしまうのでそれが気になるようなら別の画像にするしかないですね～。

| ひよこ＠管理人 | 2008/11/05 19:42 | URL | ≫ EDIT

はじめまして。
素敵なテンプレートを使わせて頂いております。
・・・なにぶん、初心者なのでトップ画像を５００×３００で入れましたが、ウマくイケてない感じです。
どのようになおしたら良いかをどうか教えて下さいまし。

| はる | 2008/11/04 14:46 | URL |












TRACKBACK URL

言及リンクの無いトラックバックは受け付けておりません。

http://hiyokokun.blog2.fc2.com/tb.php/598-b441e2a7

TRACKBACK

「バトン」を使ってレイアウトが崩れた！

ひよこさんによれば、新しく搭載されたバトン機能で出力されるタグが定義タグ（dl dt dd）になっているとのこと（ヒヨコ君増殖中：バトン機能で...

| FC2ブログの歩き方ブログ | 2008/11/18 21:37 |

≪ PREV | PAGE-SELECT | NEXT ≫