Seesaaブログの過去ログの選択方法を変更

ブログのデザインを変更する記事です。当ブログはseesaaブログにて書いております。

ブログを見てくれた人がこのブログの過去の記事を読んでみようと思ったときに使うメニューのお話です。

他にもいくつか小さな部分の変更をまとめて書いてしまいます。

過去ログのメニューを変更


初期状態であれば何年何月といった月別でアーカイブページへのリンクがただ羅列表示されていました。このブログではその後一時期羅列されたリストを、ある程度の高さを指定し残りはスクロールする形で見えるようにするoverscroll-yを利用して、過去ログのリストが長くなりすぎないよう表示していました。

現在のメニュー

それも少ししてやめて、seesaaブログのカスタマイズで定番？（調べるといくつものブログで見ました）のプルダウンで選択するメニューをこのブログでも取り入れました。使わないときは小さくまとまって表示領域を多く使わないし、開きたいときは選択するだけでいい。何年かそれを使ってきましたが変えることにしました。

すごく不満があるわけではないですが、もう飽きてきたし何か変えようと思い立ち変更することにしました。小さな不満はあって、プルダウンメニューのUIはブラウザの標準スタイルによって表示され、使うブラウザによって変わってしまうのとデザインが事務的にも見えたりする。

ちなみにこれはFirefoxで見たとき。
archivemenu2016_01.png

開くと
archivemenu2016_02.png

選択するとそのページに移動します。


見た目以外にも不満はあって、選択したら移動するよりも、リンクを置いておいて自分でそのまま移動するか新しいタブで開くかを選べる方がいいんじゃないかと思った。私がそうなのだけど、幾つかのリンクを一気に何個もタブで開いてザーッと見ていくのが好きで、一個一個ページを移動していくのは性に合わない。今のメニューではそれを許さない形になっているから、ページの読み込みをいちいち待たなくてはいけない。だから以前のようにリンクを並べておいておき、好きに開けるようにしたい。

ただしリンクを並べる機能性は、今の選択メニューのシンプルさも残しつつ実現したい。という条件をつけた上で変更を始める。

現在のメニューの詳細

過去ログをプルダウン表示 - ありふれた生活
http://blog.travelstar.jp/article/6098468.html
2005年の記事！

ぜろだまBlog: Seesaaブログで過去ログ（月別ログ）部分をプルダウンにする
http://zerodama.seesaa.net/article/40343096.html


これらのブログで見たんだと思う。他にもたくさんあるのでいろいろ見ながら。といってもそこまで難しくはない。

<div class="side">
<script language="javascript" type="text/javascript">
<!--
function ChangeArchive (sel) {
  if (sel.options[sel.selectedIndex].value != "") {
    location.href = sel.options[sel.selectedIndex].value;
  }
}
-->
</script>
<form method="get" action="">
<select name="archive" onChange="ChangeArchive(this)" class="archiveselect">
<option value="">--------</option>
<% content.header -%>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<option value="/archives/<% archives.createstamp | date_format("%Y%m") %>-1.html"><% archives.createstamp | date_format("%Y/%m ") %></a>(<% archives.count | __or__ |  echo('0') %>)</option>
<% /if -%>
<% /loop -%>
</select>
</form>
</div>


選択前のメニュー部分に「過去記事を選択」等の文言を編集して入れたり、幅をCSSで指定したくらい。

javascriptを使っているのと、移動するページへaタグを使っていないというのもやめたいなと考えた理由の一つ。そこまで重要ではないのかもしれないけど…。

本当は

過去の記事を月別にまとめたのを年でまとめてネストしたい。他のブログサービス（はてなブログとか）ではできてるけど、seesaaはできない模様。これも条件、制約として大きい。


新しい過去ログ選択メニューを作る



開いたり閉じたりするメニューを作ろうと思って、探した。タイトルバーとかに置いて上にかぶさってくるドロップダウンのメニューもありかなと思ったが、今回はオーバーレイはさせず大きさが変わるアコーディオン型のメニューとする。

CSSだけでメニューが開いたり閉じたりするアコーディオンを作る！javascript不要 | 9ineBB
http://9-bb.com/css%e3%81%a0%e3%81%91%e3%81%a7%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%8c%e9%96%8b%e3%81%84%e3%81%9f%e3%82%8a%e9%96%89%e3%81%98%e3%81%9f%e3%82%8a%e3%81%99%e3%82%8b%e3%82%a2%e3%82%b3%e3%83%bc/

jqueryを使わないcssだけで実装するアコーディオンメニュー – 飲食店のホームページ制作研究所「とっつぁんブログ」
http://vegl.biz/2015/12/16/jquery%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84css%e3%81%a0%e3%81%91%e3%81%a7%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%83%a1%e3%83%8b/


これらを参考に作っていこうと思う。

まずはほぼコピペし、このブログに当てはめたのがこちら。

過去ログコンテンツのHTMLを編集し、

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>

<div class="menu">
<label for="Panel1">過去記事</label>
<input type="checkbox" id="Panel1" class="on-off" />
<ul>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<li><a href="/archives/<% archives.createstamp | date_format("%Y%m") %>-1.html"><% archives.createstamp | date_format("%Y年%m月") %></a> (<% archives.count | __or__ |  echo('0') %>)</li>
<% /if -%>
<% /loop -%>
</ul>
</div>
<% content.footer -%>
</div>



このような形で決めました。content.footerとかはあってもなくてもいいです、好きにしてください。私は必要ないですが残しておきました。（seesaaブログの挿入文の変数です）


CSSはこのように。

label {
    background: green;
    color: #fff;
    padding: 10px;
    display: block;
    margin: 0;
    border: none;
}

input[type="checkbox"].on-off{
    display: none;
}

.menu ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li {
    padding: 4px;
}

input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
    height: 400px;
    overflow-y: scroll;
}


ほぼそのままですが、高さやoverscrollを指定しました。labelのborderも消した。

クラス名やid名もそのままですがいずれ変えると思います。そのままでも既存のclassやidに被りはなかったのでとりあえずは変更せず。

導入してみたのが以下の画像で。

閉じているときと
archivemenu2016_03.png

開いているとき。
archivemenu2016_04.png

開閉時はアニメーションしながら変化する。それが気持ちいい。モダンな感じがする。

ただデザイン的にかなり改善の余地がある。本当にそのまま追加しただけなので、これからトライ＆エラーで納得行く形を作っていこうと思う。邪魔しないシンプルなデザインでモダンな印象を形にしたい。

ここでアップデートを書いていく。




ほか小さな変更


archivemenu2016_05.png

各記事のposted欄にeditボタンを追加してるが、使わないから消す。

ブログの記事編集ページを直接開けるカスタマイズだけど、私は置いてみたけど一度も使わないので外すことに。これもseesaaブログのカスタマイズとしていろいろな記事で紹介されていたのを試してみたもの。

記事コンテンツのHTMLから該当部分を削除。

| <a href="https://blog.seesaa.jp/cms/home/switch?blog_id=<% blog.id %>&goto=/cms/article/edit/input?id=<% article.id %>" target="_blank">edit</a>



今日の変更前のスクリーンショット


記憶を補助するために記事ページ全体のスクリーンショットを載せておく。画像はリンク先で。

今見えているのが変更後の状態。形が決まったらスクリーンショットを撮ろう。

このブログのデザインの変遷


割とちょくちょくブログはいじってるから、派手ではないかもしれないけど地味に変わり続けています。対してスマホ版はほぼ変えれないので変化はありませんが。


だいたいの変更履歴はメモしながら実際のサイトのデザインを変更しています。壊れて戻せなくなるのを防止するために。ときどきその中から変更手順をブログに記事として書き出しています。自分が振り返れるためでもあるし、公開して同じくseesaaブログを使っている人に参考になればなと思って。

私の変更も他のseesaaブログユーザーの記事を参考にして可能になったものも多いです。特に2006年とか2007年とかずっと昔に既に試みられて定番の手法になっていたりする情報があり、それが今の自分のブログに活かせるというのは大変おもしろく、時を超えてつながっているのがうれしく感じられる不思議な感覚になります。今でも見れるブログもありますが、見れなくなってしまうブログもあります。リンクを辿っていくと見れなかったり、またいつか見ようと思ってブックマークしたseesaaブログが閉鎖されていたりすると、メモを取っておけばなどと思います。

そんな中にあって自分のブログでもちょっとした情報を書き残しておきたいと思っていて（常々）、こうして記事として書き残しています（たまに）。


seesaaブログも着実に進化していて、かなりの機能追加が年月をかけて実現してきており（調べているとよく分かる）、少し前には新デザインシステムも開始していて記事リストにサムネイルを表示できるようにもなっています。このブログは旧版で、新システムでしか使えない機能もありますが、旧システムのノウハウは新システムにも利用できるものと思っています。私も新システムを試してみたいとは思いつつ、移行機能はまだ出てないのでそれ待ちですね。


これからも作り込んでは、捨てるを繰り返して行くことになるかと思います。今回も新しいことを入れ込みながら、いらないものを捨てました。作っているばかりではどんどんごちゃごちゃしたものになっていってしまうので、シンプルなデザインを心がけています。もっと色を減らしてもいいとは思っているのですがなかなかできません。機能も見た目もずっとあれこれ変えていますが、ずっと答えはないです。でもそれが楽しいんです。


私のブログの変更に関する記事はタグ「ブログデザイン」で見れるようにしてあります。

この記事へのコメント

コメントを書く