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

スポンサーサイト

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

2010年11月16日(火)20時

サイドバーを付ける

サイドバーがないとブログっぽく無いので、まずサイドバーを付けました。
CSSが使えると、ちゃんと記事の横に表示できます。


■作業
HTMLにサイドバーを書く。
CSSでサイドに表示する。


■ソースファイル

HTML

<!DOCTYPE ~略~>
<html ~略~>

<head>
~略~
</head>

<body>
<div id="contents">

<div id="header">
~略~
</div>

<div id="main">
~略~
</div>

<div id="side">
<!--plugin-->
<!--plugin_first-->
<<%plugin_first_talign>><%plugin_first_title></<%plugin_first_talign>>
<<%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-->
<<%plugin_second_talign>><%plugin_second_title></<%plugin_second_talign>>
<<%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>


<div id="footer"> 
~略~
</div>

</div>
</body>

</html>


CSS
~略~
#side
{
   width: 200px;
   float: left;
}


■結果
これで一応ブログっぽくなりました。

スポンサーサイト

コメント

コメントの投稿

カテゴリ
作り方 (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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。