くぅたん日誌はこうして作られました。 くぅたん日誌のカスタマイズ全タグ紹介!
移転します!
リンクしてくださっている方には申し訳ありませんが、 本ブログは、 こちら に移転します。徐々に引っ越されていきます。
しばらくは、質問はこちらでOKですが、移転された項目については、移転先で質問してください。
(。-_-)ノ☆・゜::゜ヨロシク♪

(注1)初心者ヤプログ・ユーザのみ対応です。初めてカスタマイズする方は「1.」から順に読んでください。
(注2)素人なので難しい質問には答えられません。
(注3)あくまでもくぅたん日誌のカスタマイズ方法であって、これが全てではありません。
応用がんばってくださいね!
免責!!カスタマイズは自己責任です。いかなる場合でも当方では責任は負いかねますのでご了承の上、カスタマイズしてください。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告|
  3. トラックバック(-)|
  4. コメント(-)

27.アーカイブをリスト化しよう!

さぁて、だんだんと細かい部分を
カスタマイズしていきましょうか。。。

アーカイブってあるですよね。
これって、現在は、
月別、日別、カテゴリ別
の3種類あるのですが、おそらくは日別アーカイブは毎日何件も投稿してる人しか設置してないと思いますので、ここでは、月別とカテゴリ別について、説明しますです。

カテゴリは自分で増やさないと増えないからたいしたことないかもしれないですけど、月別アーカイブは、月が替わるごとに1個ずつ増えていくので、1年続けると12行にもなってしまいます。

「25.」で対応してもよいのですが、ここでは、
ドロップダウンリスト
にしてみましょうか。。。

( ̄△ ̄;)エッ・・?
前置き長い??
(ToT)ゞ スンマセン

ではでは、



今後のことを視野に入れて書きます。

まずは、サイドバーの機能追加・編集で
1つ必ず空きを作ってください。

そこに、タイトルを「JAVA」とでも命名して
新規作成してください。

この「JAVA」は、機能選択・並び替えで必ず右下に設置するようにしてください。

この「JAVA」は、以降説明予定の
・コメント等のツリー化
・折りたたみ機能
でも編集していきますので、必ず、右下に設置してください。
ちなみに、「14.」もここに入れてしまえば、項目(10個?が限界)の節約になりますよん。


それでは、今作った「JAVA」に、次の文を追加してください。

<!-- リスト化スクリプト:始 -->
<script type="text/Javascript">
<!--
function popJump(selOBJ)
{
n = selOBJ.selectedIndex;
location.href = selOBJ.options[n].value;
}
// -->
</script>
<!-- リスト化スクリプト:終 -->

んで、また別のサイドバーを新規追加して、
次の文を追加してください。

20050425隙間スタイル追加

<!-- アーカイブ:始 -->
<form style="margin-bottom:0px;margin-top:0px;">
<div class="side" style="margin-bottom:10px;">
<div class="side_title">アーカイブ</div>
<div class="side_text">
<div style="text-align:center;">
<select onChange="popJump(this)">
<option value="#">-- カテゴリー別 --
<BlogArchiveList archive_type="category">
<option value="{$BlogArchiveLink$}">{$BlogArchiveTitle$} ({$BlogArchiveCount$})
</BlogArchiveList>
</select>
</div>
<div style="text-align:center;">
<select onChange="popJump(this)">
<option value="#">--  月  別  --
<BlogArchiveList archive_type="monthly">
<option value="{$BlogArchiveLink$}">{$BlogArchiveTitle$} ({$BlogArchiveCount$})
</BlogArchiveList>
</select>
</div>
</div></div></form>
<!-- アーカイブ:終 -->

桃字部分は、すきな言葉いれてくださいませ。。


んで、スキンのスタイルシートを選択してください。
そして、次の文を追加してくださいませ。

select
{
font-size: 12px; /* 文字のサイズ */
color: #369;  /* 文字の色 */
background-color: #ffffcc; /* リスト欄の背景色 */
width: 140px; /* リスト欄の幅 */
}

緑字部分は、すきに変更してください。
なお、width: 140px; については、
別に削除でよいと思います。
自動調整がやっぱり美しいかなぁ。

ちなみに、この機能は、
ここ
を参考にしました。

どうでしょうか??
かなりすっきりしたのでは??
ヽ(=´▽`=)ノ
スポンサーサイト
  1. 2005/04/17(日) 11:09:19|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:0
<<26.音楽を流そう! | ホーム | 28.カレンダーを自作しよう!>>

コメント

コメントの投稿

管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://10166.blog8.fc2.com/tb.php/28-bdca4f23
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。