INFOをつける

質問の多かった、サイドバーにINFOを作るカスタマイズ。
ブログの説明やご挨拶、WEB拍手や別サイトへのリンク、あるいはプロフィールなど自分の好きに書けるフリースペースの作り方。 ▼ベースHTMLを編集する
ベースHTMLに下記を追記します。
何処に表示したいか&使用テンプレートで入れる場所は異なります。
<dl class="info">
<dt id="infoname">INFO</dt>
<dd id="infolist">★INFOの中身★</dd>
</dl>

▽blog*citronのテンプレで、ナビバーの一番上に置きたい場合
<div id="navi"><!-- start_navi -->
<div class="navimenu">
という2行の下に入れると良いでしょう。

▼CSSを編集する
blog*citronのテンプレートを使っている場合は、ベースHTMLの書換えだけでもCSSが反映されていると思うので、更にカスタマイズされたい場合のみ追加して下さい。
この色の部分は説明書きなのでコピペする時は削除して下さい。
/* INFOタイトル部分 */
#infoname {
padding:5px 5px 5px 5px; // 余白(上,右,下,左の順)
color:#CD6090; // タイトルの文字色
font-size:10px; // タイトルの文字サイズ
font-weight:bold; // 文字を太字にする
border-bottom:1px dashed #8B475D; // 点線の下線を引く
}
/* INFOの内容部分 */
#infolist {
padding:5px 5px 5px 5px; // 余白(上,右,下,左の順)
color:#555; // 文字色
font-size:10px; // 文字サイズ
line-height:1.6em; // 行間
}

ここに書いたCSSは一例なので、デザインにあわせて変更して下さい。

▼応用編
▽ブログの説明を、タイトル部分ではなくINFOに書く
<dl class="info">
<dt id="infoname">INFO</dt>
<dd id="infolist">{blog_description}</dd>
</dl>
環境設定で設定したブログの説明がINFOに表示されるようになります。

▽更にウェブ拍手をつけてみる。
<dl class="info">
<dt id="infoname">INFO</dt>
<dd id="infolist">{blog_description}<br />
<a href="拍手CGIのURL"><img src="拍手アイコンのURL" border="0" alt="CLAP!" /></a>
</dd>
</dl>

▽更に更にプロフィールを足してみる。
<dl class="info">
<dt id="infoname">INFO</dt>
<dd id="infolist">{blog_description}<br />
→<a href="プロフィールのURL">PROFILE</a><br />
<a href="拍手CGIのURL"><img src="拍手アイコンのURL" border="0" alt="CLAP!" /></a>
</dd>
</dl>

ul,liなどを使ってリスト風にしても良いし、ブログリストへのListMeボタンをつけてもよし。常に上に表示しておきたいものを絞ってコンパクトにまとめるのがおすすめ。
Related Archive