ޡȥեѤɽǸ

Խ

ɥС˲

ΥɥСˡʤˤ󤿤ǥˤΰʳˤˡǤɥСκϤޤǤϡ֤󤿤ǥפǺ뤳Ȥˤޤ֤󤿤ǥפǤʤơޤǺɥС̵ϡ­򸫤Ƥ

ɥСɽƤޤˡʤˤ¾ΤΤˤϡشġ > ǥ > ܺ٥ǥ٤βإڡΥեåȤޤ

<div class="sidebar">

</div>

δ֤äƤΤΥɥСɽȤߤǤʤ줬ܡˡʸ񤤤ƤߤСΤޤɽޤ

Τ⥸塼ξ

ϤƤʥ꡼Υإ - ϤƤʥ⥸塼ˤƼ⥸塼ϡΥ񤯤Ǥ

Ǥ¾Υ⥸塼Υ񤫤ƤȻפޤ¾Υ⥸塼Ʊ͡template="hatena-module"פƤƱɤˤʤޤ

<hatena name="antenna" template="hatena-module">

Τ褦ˤɤǤ礦ʤantenna⥸塼Ǥˡ٤ϥإפϤƤʥ⥸塼äƤʤˡ䡢ɤ⥸塼⥸塼

template="hatena-module"פŬѤʤ⥸塼ˤĤƤϡ

<div class="hatena-module">
 <div class="hatena-moduletitle">ȥ</div>
 <div class="hatena-modulebody">
  <hatena name="sectioncategory"> <!--ɽ⥸塼Υ-->
 </div>
</div>

Τ褦ˤȡ֤󤿤ǥפϤΤƱ褦ʸɤˤʤǤ礦

ǽ񤤤Τ

ԡ֥إå˥ƥ꡼ΥꥹȤäƤߤ롣ƥ꡼Υץ˥塼äƤߤפʤɤHTML񤤤Τξ硣

⤫󤿤ǥ򸫱ɤ碌ޤ

<div class="hatena-module">
 <div class="hatena-moduletitle">ȥ</div>
 <div class="hatena-modulebody">
 
 </div>
</div>

Ȥˤȡ¾⥸塼Ʊɤˤʤޤ㤨

<div class="hatena-module">
 <div class="hatena-moduletitle">Υƥ꡼</div>
 <div class="hatena-modulebody">
  <ul>
   <li>[<a href="http://d.hatena.ne.jp/ʬID/searchdiary?word=%2a%5bweb%5d">web</a>]</li>
   <li>[<a href="http://d.hatena.ne.jp/ʬID/searchdiary?word=%2a%5bhatena%5d">hatena</a>]</li>
   <li>[<a href="http://d.hatena.ne.jp/ʬID/searchdiary?word=%2a%5b%a5%c9%a5%e9%a5%de%5d">ɥ</a>]</li>
  </ul>
 </div>
</div>

Τ褦ˤޤΤ褦Ƥ<div class="sidebar"></div>δ֤ƤߤƤ

ʸϤ

⤫󤿤ǥ򸫱ɤ碌ޤ

<div class="hatena-module">
 <div class="hatena-moduletitle">ʾҲ</div>
 <div class="hatena-modulebody">
  <p>ˤϡ</p>
  <p>ϤƤʥ꡼˰ñۤƤޤ</p>
  <img src="http://Υɥ쥹" alt="вʸ">
 </div>
</div>

Τ褦ˤСޤɽ󤸤ʤȻפޤΤ褦Ƥ<div class="sidebar"></div>δ֤ƤߤƤ

طʤˤȤäŪʤΤϥ륷ȤȤΤǤǤϾάޤ

­֤󤿤ǥбǤʤơޤξ

ɥСȤǤ⤦ɬפʤǤ礦ޤեå˽񤤤ƤƤСԡƥѥ¸ƤƤȤäƤơޤ̾ФƤƤ

ƴʰΡ֤󤿤ǥפǡʤɤ򤷡ơޤŬǡɥСޤ⤷եåθƤ񤭤ƾäƤ顢<div class="sidebar"></div>β¦ʤɤ˸Ƥ򥳥ԡľƤ

ˡܺǥơޤ򸵤ᤷޤ֥ɥСбΡץơޤʤ顢ǥɥСǤȻפޤǤ

֥ɥСбפΥơޤǤϡβ˥ɥСƤɽƤޤȻפޤϡȥɥСȤɤɽ뤫ɤȤ󤬡ΥơޤCSSեʥ륷ȡˤ˴ޤޤƤʤǤ

ʤΤǤξܺΡ֥륷ȡɲäޤ٤ƤΥơޤǻȤʤ⤷ޤ󤬡ʲƤ򥳥ԡڡȤƤ

div.main {
	margin-left: 18%;
}

div.sidebar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 15%;
	margin-left: 5%;
}

ǤȤꤢ¦˥ɥСФȻפޤǽФʤȡƻΤϤ⤦äȸǤξ֤ǡƤϤƤʥ꡼פ򾧤뤫᤹ġġ

sidebarפ򻲹ͤ˥륷Ȥ񤱤ФΤǤˡǤǤʤơޤٹ⤤ġġʤߤ˥ɡsidebarפϥɥС򱦤ɽꡢɽȤäˡҲ𤷤Ƥޤ

­⥸塼template="hatena-module"ѤƤʤ

⥸塼Υtemplate°λ꤬ʤHTMLι¤㤦ΤǡͿˡ˹碌Ƥ줤ɽ뤿εˡѤäƤޤ

֥ƥ꡼פΥꥹȤϰʲΤ褦ʷǡ

 <p class="recentitem">Υƥ꡼</p>
 <div class="recentsubtitles">
  <ul>
   <li>[<a href="http://d.hatena.ne.jp/ʬID/searchdiary?word=%2a%5bweb%5d">web</a>]</li>
   <li>[<a href="http://d.hatena.ne.jp/ʬID/searchdiary?word=%2a%5bhatena%5d">hatena</a>]</li>
   <li>[<a href="http://d.hatena.ne.jp/ʬID/searchdiary?word=%2a%5b%a5%c9%a5%e9%a5%de%5d">ɥ</a>]</li>
  </ul>
 </div>

ʸϤϰʲΤ褦ʷǡ

<p class="recentitem">Υƥ꡼</p>
<div class="recentsubtitles">
 <p>ˤϡ</p>
 <p>ϤƤʥ꡼˰ñۤƤޤ</p>
 <img src="http://Υɥ쥹" alt="вʸ">
</div>

Τ褦Ƥ<div class="sidebar"></div>δ֤ƤߤƤ


إåեå˲뢫 | եꥨȡץ˻ä˿ʤ