--年--月--日(--)--時

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2010年11月17日(水)13時

サイドバーをデザインする

サイドバーの小タイトルを付箋風にしてみました。


■作業
HTMLでサイドバーのタイトルに名前をつける。
CSSでそれをデザインする。


■ソースコード

HTML

~略~

<div id="side">
<!--plugin-->
<!--plugin_first-->
<div class="title"><<%plugin_first_talign>><%plugin_first_title></<%plugin_first_talign>></div>
<<%plugin_first_ialign>><%plugin_first_description></<%plugin_first_ialign>>
<<%plugin_first_align>><%plugin_first_content></<%plugin_first_align>>
<<%plugin_first_ialign>><%plugin_first_description2></<%plugin_first_ialign>>
<!--/plugin_first-->
<!--plugin_second-->
<div class="title"><<%plugin_second_talign>><%plugin_second_title></<%plugin_second_talign>></div>
<<%plugin_second_ialign>><%plugin_second_description></<%plugin_second_ialign>>
<<%plugin_second_align>><%plugin_second_content></<%plugin_second_align>>
<<%plugin_second_ialign>><%plugin_second_description2></<%plugin_second_ialign>>
<!--/plugin_second-->
<!--/plugin-->
</div>

~略~

CSS
~略~

#side
{
   width: 180px; 
   float: left;
   padding: 10px;
}
#side .title
{
   border: 1px solid #9999dd;
   border-left: 10px solid #9999dd;
   background-color: #ffffff;
   padding: 3px;
}

~略~


■結果
いい感じにはなりました。
が、全体的にゴチャゴチャした感じがしてきました。

スポンサーサイト

コメント

コメントの投稿

カテゴリ
作り方 (0)
自作 (25)
配布 (0)
ブログ (2)
全記事表示リンク

全ての記事を表示する

プロフィール

FlatCraft

Author:FlatCraft
こんにちわ

カレンダー
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
最新記事
最新コメント
最新トラックバック
月別アーカイブ
FC2アクセスランキング
ランダムブログボタン
検索フォーム
RSSリンクの表示
リンク
このブログをリンクに追加する
FC2ブックマーク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。