So-net無料ブログ作成

子猫にも貼れる Drop-Down List [s k i n]


 MONTHLY ARCHIVES 2 0 0 5 ー 2 0 0 8


<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>

                    *

2・27の大リニューアル後、「月別表示」(Monthly Archives)が縦長リストになってしまった。実はカレンダーをカスタマイズした時に「月別表示」は非表示にしていたのだが、過去カレンダーの一覧表も年度別に3分割しちゃったので、「月別表示」はあった方が便利かも、でもリスト表示は長〜いなぁ‥‥と躊躇していたら、「読んでいるブログ」のサイドバーに、いつの間にか携帯用画面で表示される「月別表示」のドロップダウン・リストが貼ってある。リンクを辿ってみると、カスタマイズの発祥地はとめさんの「アーカイブ記事 ドロップダウンリスト」だった。カスタマイズ方法は「レイアウト」→「サイドコンテンツ」→「月別表示」→「コンテンツ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>

                     *

丸コピしただけでは芸がないので、kuuさんの「サイドバーのドロップダウンの枠の幅と文字を小さくする」を参考にして、sknynx風のアレンジを施してみました。サイドバーは英語表記に統一しているので、「月別表示」「月を選択」「月別アーカイヴ」を「choose a month」、「2008年10月」を「2008ー10」に変更。テキストの行揃えを中央(center)に、横幅を黒猫Maukieちゃんと揃えて、文字色をスキン・スイッチャー(skin switcher)と連動しました。ちょっと見映えが良くなったかな?‥‥「マイ・カテゴリー」も同様にドロップダウン・リスト化出来るそうなので、これ以上サイドバーを長くしたくないというソネ風呂ブロガーは試してみる価値があるかも。この方法(JavaScriptの挿入)で、カスタマイズした「カレンダー」も自動更新するようになると楽なのですが。

<h3 class="sidebar-title2"><a href="http://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>

                    *

MY CATEGORIES


「マイ・カテゴリー」(My Categories)をドロップダウン・リストにしてみました。変更方法は「月別表示」と同じです。サイドバーをシンプル化したい人は参考にしてね。

                    *

〈猫にも出来る‥‥〉〈子猫にも貼れる‥‥〉オリジナル・スキン・シリーズは「オリジナル」と冠していながら他ブログからの引用・借用・流用が多くて赤面の至りですが、今までに紹介した中から、お勧めのカスタマイズ・ベスト3を挙げておきます。ゴロニャン。

〈猫にも出来るワイド・ヘッダ攻略改〉── 強制ヘッダに異和感を感じているソネ風呂人へ

〈子猫にも貼れるGoogle検索〉── 記事をダイレクト表示するデフォルト版が不満な方に

〈猫にも出来るスキン・スウィッチ〉── 読者がスキンを切り替えられるようになるのだ

                    *
  • 写真の白い雲が「ピアノを弾いている兎さん」に見えませんか?^^;
                    *


コメント(4)  トラックバック(0) 

コメント 4

miyuco

sknysさん、こんにちは。
月別表示が縦長になってしまってガッカリでした。
以前のカレンダーの下の表示も数が多くなると
美的に問題ありだったけどまだマシだったのに。
でも間髪いれずにびっけさんが
プルダウンにカスタマイズしているのを発見
早速飛びついた次第です^^
こういうワザを公開してくださると
私のようなシロートは本当に助かります。

わぁ~そう言われればウサギさんに見える!

by miyuco (2008-10-20 16:17) 

sknys

miyucoさん、コメントありがとう。
「プルダウン・リスト」のカスタマイズは普及率が高いですね。
皆さん素速いなぁ‥‥まるでデパートのバーゲン会場に駆けつける
抜け目のない主婦みたい^^;
その割には考案者が冷遇されているようなので、敢えて記事にしました
(JavaScriptの知識がゼロなので、丸コピというところが悲ぴーけれど)。

「ピアノを弾くウサちゃん」は、もう数秒速ければ完璧だった。
雲写真は失敗しないから簡単です。
後はタイミングの問題‥‥「○○に見える!」と思った瞬間に、
躊躇なくシャッターを押しましょう。
ちょっと目を離している間に形を変えてしまうから。
by sknys (2008-10-21 00:56) 

こにゃ

にゃあxx
こんな時間にカスタマイズ^^;
文字とか幅とかやっと変えられました(笑)
by こにゃ (2009-01-17 02:34) 

sknys

こにゃさん、コメントありがとう。
カスタマイズし始めると、納得行くまで止められませんよね^^;
「ワイド・ヘッダ」のままだと、左上のNEKOちゃんと重なっちゃうのだ。
by sknys (2009-01-18 13:32) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0