2016/12/05

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


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


私のブログの変更に関する記事はタグ「ブログデザイン」で見れるようにしてあります。
posted by the ruler | Comment(0) | 日記 | #

2016/12/02

dカードプリペイドが届いたから利用登録とチャージをしてみた

dcardprepaid_01.jpg

dカードプリペイドを申し込んでいて、それが今日届いたので早速利用登録をしてみた。

dカードプリペイドとは


簡単に言うとdポイントカードにプリペイド型のクレジットカード機能がついたものだ。クレジットカードとして使う場合にチャージが必要になるが、このカードはチャージに現金に加えてdポイントを使うこともできる。

dカードプリペイドに申し込んだ理由

なんかおもしろそうだと思って。

細かく書けば、いつかdポイントカードを作ろうと思っていた、dポイントの使いみちになんかいいのないかなと思っていた、今使っているクレジットカードをどこかに変えようかなーと漠然とだが考えていてクレジットカード周りに興味が出ているタイミングだった、無料で作れるなど。

まあそんな感じで作ってみるかと軽い気持ちで作ってみた。使わないなら使わないでいいからね。

申込みから到着まで


ドコモがdカードプリペイドやりますってニュースは見ていた。申し込み開始が11/21で、申し込んだのが確か24日。

ドコモの「dカードプリペイド」、11月21日に申込開始 - ITmedia Mobile
http://www.itmedia.co.jp/mobile/articles/1611/17/news118.html


初日に飛びつくわけではなかったけど、興味があったし、カードデザインどっちがいいかだったら通常版よりポインコデザインがよくて、いずれ申し込むなら今申し込もうと思って。個人的にポインコ結構好き。

それで届いたのが12/2の今日。今日以前に届いたっていう情報はなさそうだったから、初日申し込みではないけど最速到着組なのかも。

開封

プリペイドは初めてだが、ちゃっちい。カード番号はすべて印刷で、いわゆるクレジットカードの数字がボコボコしているアレではない。印刷が擦れて消えないか少し心配。名前は表面に入らないのね。申込時にアルファベット入れたか記憶ないけど。

あとクレジットカードの暗証番号は送付されたカードの台紙などには入っていないので、申込時に入力したのを覚えているのが前提です。


利用登録をする


続いて利用登録(カードをdアカウントと紐付け)します。これをしないとたまったdポイントをチャージに利用できません。飛ばしてもクレジットカードとしては使えると思います(チャージをローソンでするなら)。

そもそもdカードプリペイドの申込みはdアカウントからやったんだから、事前に紐付けプロセスもしといてくれよと思った。

まあ文句は置いておいて、従順に登録手続きをしていこう。

登録は http://dpoint.jp/touroku/ を開くとリダイレクトされてdポイントクラブの「dポイントカード/dカード登録」という以下のようなページが開く。(最後のスラッシュまで入れよう。入れないと404が出て表示されない。)

dcardprepaid_02.png

カードを選ぶ。今回はdカードプリペイドだ。

dcardprepaid_03.png
dアカウントでログインしよう。


すると次のようなページに。
dcardprepaid_04.png

まず入力するのはdポイントカード番号とセキュリティコードだ。クレジットカードの番号ではないので注意。カード裏面右下に書いてあるものを入れよう。

店舗コードはdカードプリペイドにはないので0000を入力。(dポイントカード用のページと同じページを表示しているようだ。前のページでdカード プリペイドを選ばせているのだから、専用のページにしとけよと思ったり)


次は利用者情報の登録。ここに入れる自分の個人情報を売ることでポイントを得るわけだ。手入力しなくても自分の契約情報で埋められる。職業や配偶者は必須となっているが「回答なし」も選べる。ダイレクトメールは好きなように。

続いて注意事項の確認だ。

「お客様情報の取り扱いに関する注意事項 」

○ 当社は、利用者の情報、dポイントクラブ会員の契約情報、利用者やdポイントクラブ会員の行動履歴等を、当社、連結子会社、持分法適用会社、dポイント加盟店及び当社の業務提携先のマーケティングやプロモーション等を目的として利用します。
○ 行動履歴には、インターネットの利用に関する情報や購買履歴情報、位置情報、ご利用のアプリに関する情報を含みます。これらの行動履歴について詳しくは、コチラ
○ dカード(DCMX)、dカードminiによる購買歴情報も上記目的のために利用いたします。
○ 当社は、利用者の情報、利用者やdポイントクラブ会員の行動履歴を、連結子会社、持分法適用会社及び dポイント加盟店に対し、提供先でのマーケティングやプロモーション等を目的として提供する場合があります。提供する情報には「氏名」「電話番号」「メールアドレス」「生年月日の『日』」といったお客様を特定されやすい情報は含まれません。また、dポイント加盟店には行動履歴情報をそのまま提供することはなく、提供する場合はグラフや表等にするなど、統計化して提供します。また、提供先は、これらの情報を他の第三者に提供することがあります。
なお、これらの情報の提供を希望されない場合は、オプトアウト(情報提供の停止)をドコモショップ、ドコモオンライン手続き、dポイントカスタマーセンター(0120-208-360)にてお申込みできます。
[第三者提供先]
dポイントクラブ特約内、「dポイントカードにおけるお客様情報の取扱いについて」にてご確認ください。
○ 当社は、これらの情報を、当社プライバシーポリシー及びdポイントクラブ特約の規定に従って取り扱います。


ドコモは情報の取得をいろいろ(ネットの行動履歴や位置情報、アプリ利用状況。購買履歴も利用できる場合はそれも。)します。その情報は個人を特定されない形でマーケティング等で利用しますと。

第三者へも提供します、その場合も個人を特定できない形で提供します。ですがそれが嫌ならストップできます。と。

dポイントクラブ特約はポイントの扱いについての話。


これらを同意にチェックつけたら次へ行けます。内容確認があり、手続きが完了。

dcardprepaid_05.png

これでアカウントと紐付いた。

ここまでがdアカウントの紐付け。次はカードにチャージをしてみる。

dカードプリペイドにチャージ


チャージはdカード プリペイドのページから。

dカード | dカード プリペイド
http://d-card.jp/prepaid/


dcardprepaid_06.jpg

マイページに入る。三井住友カードのページが開き、初回だけ生年月日の追加認証があり、
dcardprepaid_07.png

生年月日を入力する必要がある。

以下マイページの中をいくつかスクリーンショットで。


トップページはこう、
dcardprepaid_08.png


チャージ
dcardprepaid_09.png
携帯合算はdカード支払いか口座振替になっていないとチャージできない


利用明細照会
dcardprepaid_10.png


カード残高照会
dcardprepaid_11.png

dcardprepaid_12.png
当然まだゼロ



各種変更
dcardprepaid_13.png
暗証番号変更には暗証番号が必要。忘れた人はがんばれ



さてチャージだ。

マイページでは500円から50000円の範囲でチャージができ、ポイントからは10000が上限。
dcardprepaid_14.png


試しに500円分チャージするか。
dcardprepaid_15.png


dcardprepaid_16.png
残高不足で無理だった。残念。dポイントが500なかったが、ドコモポイントがあったのでチャージできるかと思ったが、ドコモポイントはチャージには使えないらしい。不便だ。

ということでチャージはまたいつか。




今は5000円以上チャージすると抽選でポイントかぬいぐるみが当たるキャンペーンをやってますね。ローソンでのチャージも来年9月末までは手数料が無料になっています。

dカードプリペイドはクレジットカードとして使わなくても、dポイント加盟店なら見せるだけでポイントカードとして貯められる。ただ使うには必ずチャージをしないといけないのか、dポイントカードのようにdポイントとしてならそのまますぐ使えるのかはよくわからない。dポイント加盟店以外ではもちろんチャージが必要だが、それができるのはこのカードのメリットだろう。
タグ:DoCoMo
posted by the ruler | Comment(0) | 日記 | #

2016/11/30

Windows10のEdgeなどでGoogle日本語入力が使えなかった問題が解決

Windows10にアップグレード後、Google日本語入力を使おうとしたときにいろいろ不具合があったのは以前記事に書いたとおり。その中で設定等をしても治らなかった問題で、タスクバーの検索ボックスやEdge、ストアアプリでGoogleを使うと日本語を入力できないという致命的な不具合があった。日本語を入力したくてもアルファベットの直接入力にしかならないから、しょうがなくその時だけMSの標準IMEに切り替えて使っていた。それがついに解消!

手順は以下のサイトで詳しく。

Windows 7 から Windows 10 へアップデート後、Edge やコルタナなどで、Google 日本語入力が利用できない場合の対応方法 - Google プロダクト フォーラム
https://productforums.google.com/forum/#!topic/ime-ja/xBJLDHyJVw0

Windows10でGoogle日本語入力が使えない時使えるようにする方法 | WordPressデビュー津々浦々
http://izu.wpblog.jp/post-3810/


簡単な説明をすると、Google日本語入力が入ったフォルダのパーミッションを編集するとうまく動くというもの。フォーラムの公式ではGoogleフォルダを、下のサイトではGoogle Japanese Inputフォルダだけを編集するとしている。私はGoogle Japanese Inputフォルダの方にした。

結果、うまく動くようになった。ただ普通に動くようになっただけだが、長いこと使えなかったせいですごく良くなったかのように感じた。

タスクバーの検索ボックスや、Edge、ストアやストアからダウンロードしたアプリでうまく動く。少し変換候補のUIが違うのが気になるが、多分当初からうまく動いている人はこうなのだろうからこれで正しいのだろうと思っている。


今まで何度とアンインストールしたり、開発版入れてみたり、フォルダ削除してみたり、フォーラムを時折情報を探しに行ったりと試行錯誤していたが今回のように解決できたことはなかった。ただ正しく動くようになっただけではあるのだが、うれしい。今までは日本語入力で手間がかかるからなんとなく避けていたが、今後はストアアプリをより気軽に使えるかなと思う。(最近instagramがアプリ出してたり)

よかった。
タグ:windows10 google
posted by the ruler | Comment(0) | 日記 | #