子猫にも貼れる Drop-Down List [s k i n]
MONTHLY ARCHIVES 2 0 0 5 ｰ 2 0 0 8
- 2008-12 (5)
- 2008-11 (5)
- 2008-10 (5)
- 2008-09 (5)
- 2008-08 (5)
- 2008-07 (5)
- 2008-06 (5)
- 2008-05 (6)
- 2008-04 (5)
- 2008-03 (5)
- 2008-02 (5)
- 2008-01 (5)
- 2007-12 (5)
- 2007-11 (6)
- 2007-10 (6)
- 2007-09 (5)
- 2007-08 (4)
- 2007-07 (5)
- 2007-06 (5)
- 2007-05 (5)
- 2007-04 (6)
- 2007-03 (5)
- 2007-02 (4)
- 2007-01 (5)
- 2006-12 (5)
- 2006-11 (6)
- 2006-10 (5)
- 2006-09 (5)
- 2006-08 (5)
- 2006-07 (4)
- 2006-06 (5)
- 2006-05 (5)
- 2006-04 (4)
- 2006-03 (4)
- 2006-02 (4)
- 2006-01 (4)
- 2005-12 (4)
- 2005-11 (1)
<div class="sidebar" id="archive">
<h3 class="sidebar-title"><% content.title | html %></h3>
<div class="sidebar-body">
<% content.header -%>
<ul>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<li><a href="<% archives.page_url %>"><% archives.createstamp | date_format("%Y年%m月") %></a>(<% archives.count | __or__ | echo('0') %>)</li>
<% /if -%>
<% /loop -%>
</ul>
<% content.footer -%>
</div>
<div class="sidebar-end"></div>
</div>
<h3 class="sidebar-title"><% content.title | html %></h3>
<div class="sidebar-body">
<% content.header -%>
<ul>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<li><a href="<% archives.page_url %>"><% archives.createstamp | date_format("%Y年%m月") %></a>(<% archives.count | __or__ | echo('0') %>)</li>
<% /if -%>
<% /loop -%>
</ul>
<% content.footer -%>
</div>
<div class="sidebar-end"></div>
</div>
＊
2・27の大リニューアル後、「月別表示」（Monthly Archives）が縦長リストになってしまった。実はカレンダーをカスタマイズした時に「月別表示」は非表示にしていたのだが、過去カレンダーの一覧表も年度別に３分割しちゃったので、「月別表示」はあった方が便利かも、でもリスト表示は長〜いなぁ‥‥と躊躇していたら、「読んでいるブログ」のサイドバーに、いつの間にか携帯用画面で表示される「月別表示」のドロップダウン・リストが貼ってある。リンクを辿ってみると、カスタマイズの発祥地はとめさんの「アーカイブ記事 ドロップダウンリスト」だった。カスタマイズ方法は「レイアウト」→「サイドコンテンツ」→「月別表示」→「コンテンツHTML編集」を開き、JavaScriptを挿入してHTMLを書き換える。「上級者向け」と表示されていたので、今まで弄ったことはなかったけれど、コピ＆ペーストするだけで初心者にも簡単に出来ます（変更方法は、とめさんやkuuさん、チヨロギさんのページを参照して下さい）。
＊
MONTHLY ARCHIVES
<script type="text/javascript">
<!--
function jumpmenu(targ,selObj,restore) {
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<div class="sidebar" id="archive">
<h3 class="sidebar-title"><% content.title | html %></h3>
<div class="sidebar-body">
<% content.header -%>
<form id="archive" name="archive" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">choose a month</option>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<option value="/archive/<% archives.createstamp | date_format("%Y%m") %>-1"><% archives.createstamp | date_format("%Y-%m")
%> (<% archives.count | __or__ | echo('0') %>)</option>
<% /if -%>
<% /loop -%>
</select>
</form>
<% content.footer -%>
</div>
<div class="sidebar-end"></div>
</div>
<!--
function jumpmenu(targ,selObj,restore) {
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<div class="sidebar" id="archive">
<h3 class="sidebar-title"><% content.title | html %></h3>
<div class="sidebar-body">
<% content.header -%>
<form id="archive" name="archive" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">choose a month</option>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<option value="/archive/<% archives.createstamp | date_format("%Y%m") %>-1"><% archives.createstamp | date_format("%Y-%m")
%> (<% archives.count | __or__ | echo('0') %>)</option>
<% /if -%>
<% /loop -%>
</select>
</form>
<% content.footer -%>
</div>
<div class="sidebar-end"></div>
</div>
＊
丸コピしただけでは芸がないので、kuuさんの「サイドバーのドロップダウンの枠の幅と文字を小さくする」を参考にして、sknynx風のアレンジを施してみました。サイドバーは英語表記に統一しているので、「月別表示」「月を選択」「月別アーカイヴ」を「choose a month」、「2008年10月」を「2008ｰ10」に変更。テキストの行揃えを中央（center）に、横幅を黒猫Maukieちゃんと揃えて、文字色をスキン・スイッチャー（skin switcher）と連動しました。ちょっと見映えが良くなったかな？‥‥「マイ・カテゴリー」も同様にドロップダウン・リスト化出来るそうなので、これ以上サイドバーを長くしたくないというソネ風呂ブロガーは試してみる価値があるかも。この方法（JavaScriptの挿入）で、カスタマイズした「カレンダー」も自動更新するようになると楽なのですが。
<h3 class="sidebar-title2"><a href="https://sknys.blog.so-net.ne.jp/2008-10-16" name="archive">MONTHLY ARCHIVES</a> by <a href="http://stilmobel.blog.so-net.ne.jp/2008-03-02" target="_blank"><span style="text-transform:lowercase">tome</span></a></h3>
<style>
select{font-size:small; width:150px; text-align:left; background-color:#ffffff; color:#}
#archive .sidebar-body{margin-bottom:4px}
.sidebar-title{display:none}
.sidebar-title2{margin:-2px 0px 10px 0px; padding-left:5px; border-left:4px solid #; font-size:x-small; line-height:110%; color:#}
.sidebar-title2 a{text-transform:uppercase}
</style>
<style>
select{font-size:small; width:150px; text-align:left; background-color:#ffffff; color:#}
#archive .sidebar-body{margin-bottom:4px}
.sidebar-title{display:none}
.sidebar-title2{margin:-2px 0px 10px 0px; padding-left:5px; border-left:4px solid #; font-size:x-small; line-height:110%; color:#}
.sidebar-title2 a{text-transform:uppercase}
</style>
＊
MY CATEGORIES
「マイ・カテゴリー」（My Categories）をドロップダウン・リストにしてみました。変更方法は「月別表示」と同じです。サイドバーをシンプル化したい人は参考にしてね。
＊
〈猫にも出来る‥‥〉〈子猫にも貼れる‥‥〉オリジナル・スキン・シリーズは「オリジナル」と冠していながら他ブログからの引用・借用・流用が多くて赤面の至りですが、今までに紹介した中から、お勧めのカスタマイズ・ベスト３を挙げておきます。ゴロニャン。
〈猫にも出来るワイド・ヘッダ攻略改〉── 強制ヘッダに異和感を感じているソネ風呂人へ
〈子猫にも貼れるGoogle検索〉── 記事をダイレクト表示するデフォルト版が不満な方に
〈猫にも出来るスキン・スウィッチ〉── 読者がスキンを切り替えられるようになるのだ
＊
- 写真の白い雲が「ピアノを弾いている兎さん」に見えませんか？＾＾;
youtube / google / tag cloud / drop-down for kittens / sknynx / 171
2008-10-16 21:16
コメント(4)
トラックバック(0)
sknysさん、こんにちは。
月別表示が縦長になってしまってガッカリでした。
以前のカレンダーの下の表示も数が多くなると
美的に問題ありだったけどまだマシだったのに。
でも間髪いれずにびっけさんが
プルダウンにカスタマイズしているのを発見
早速飛びついた次第です＾＾
こういうワザを公開してくださると
私のようなシロートは本当に助かります。
わぁ～そう言われればウサギさんに見える！
by miyuco (2008-10-20 16:17)
miyucoさん、コメントありがとう。
「プルダウン・リスト」のカスタマイズは普及率が高いですね。
皆さん素速いなぁ‥‥まるでデパートのバーゲン会場に駆けつける
抜け目のない主婦みたい＾＾;
その割には考案者が冷遇されているようなので、敢えて記事にしました
（JavaScriptの知識がゼロなので、丸コピというところが悲ぴーけれど）。
「ピアノを弾くウサちゃん」は、もう数秒速ければ完璧だった。
雲写真は失敗しないから簡単です。
後はタイミングの問題‥‥「○○に見える！」と思った瞬間に、
躊躇なくシャッターを押しましょう。
ちょっと目を離している間に形を変えてしまうから。
by sknys (2008-10-21 00:56)
にゃあxx
こんな時間にカスタマイズ＾＾；
文字とか幅とかやっと変えられました(笑)
by こにゃ (2009-01-17 02:34)
こにゃさん、コメントありがとう。
カスタマイズし始めると、納得行くまで止められませんよね＾＾;
「ワイド・ヘッダ」のままだと、左上のNEKOちゃんと重なっちゃうのだ。
by sknys (2009-01-18 13:32)