Bloggerに今風のボタンを付ける方法

業務外

今回は、井戸掘りブログに貼り付けるボタンの話です。備忘録として、残しておきます。

ブログは記事の投稿がメインです。記事と記事間を移動する場合は、サムネイルや記事タイトルでリンクするので、ボタンは必要ありません。
でも、ボタンを使いたい場合もあります。例えば右肩の「トップページ」への移動ボタンです。

私の利用しているブログサービス（Blogger）はタイトルページを作る機能がありません。以前は未来日の記事をトップページにして、ブログアクセス時に最初に参照できるようにしてました。しかし、参加しているブログアグリゲーションサイト（日本ブログ村）では、未来記事を禁止しています。どうやら、RSSの読み込みに失敗するらしい。

ダラダラと長いブログなので、ブログ全体のコンセプトを理解してもらうには、トップページを先ずは読んでもらいたい。そのため、訪問ユーザをトップページに誘導するのに、ボタンを使いたいのです。
ではでは、ボタンの付け方です。

---

最初はtableタグでボタンを作っていました。

トップページ

角ばってかっこ悪い。

---

次にボタンのイメージを作ってみました。Photoshopとか、お絵描きソフトは持っていないので、Excelで図形を描いて画像ファイルを作りました。しかし、画像化の段階で色が滲んでしまいます。PCのペイントソフトで何とか補正して出来たのかこれです。


それらしくできましたが、ペイントの補正が面倒い。書体とか変更したいけど、最初からやり直しです。他のボタンを作るのも、同じく手間が掛かります。

---

今時、ボタンを画像ファイルで配置するのって古くない？
今風のボタンって、どうやってんだろ？

Bloggerのモバイル版にボタンがあったので、引っぺがしてみました。
どうやら、Bloggerにはボタン用のCSSがあるようです。公開はしていないのですが、試してみましょう。

トップページ

テキストだけで、角が丸いボタンイメージができました。

ソースコードはこんな感じ。読み辛いので改行を入れてます。

<div class="mobile-link-button" id="blog-pager-home-link" 
style="background-color: dodgerblue; border-radius: 2px; font-family: Arial; font-size: 12px; height: 15px; margin-right: 5px; padding: 3px 6px; width: 90px;">
<a class="home-link" href="https://nsfarmer.blogspot.com/p/toppage.html" 
style="background-color: transparent; color: white; display: block; height: 20px; line-height: 15px; padding: 0px; text-align: center; text-decoration: none; width: 90px;">
<b>トップページ</b></a></div>

ナビゲーションボタンも作れるようです。井戸掘りダイジェストのフッターに配置してみました。カッチョイイ。
↓

25～30メートル

35メートル～

‹

›

トップページ

---

感想と構想

CSSでスタイルを設定すれば、何でもできるみたいです。画像とか使わなくても、コードだけで装飾ができます。
画像だって、SVG(Scalable Vector Graphics)で表現できるらしい。今度はSVGを勉強して、前回話題にしたジャンプマークを作ってみようかな？

井戸掘りブログももう少し、見栄えがするようにしたいです。

---

記事を投稿した後で、スマホで閲覧していて気が付きました。Bloggerのスマホ画面は左右にスワイプすると、前後の記事に移動できます。しかしこの記事は、何故か井戸掘りダイジェストに移動してしまいます。？？？
井戸掘りダイジェストに配置したナビゲーションボタンを、サンプルで貼り付けていますが、これがこのページの本来のナビゲーションを書き換えてしまっています。

こういう副作用があるのね。知らんかった。
スマホで閲覧中に前後の記事に移動するには、記事の下にあるボタンをタップしてください。


【後記：2016/7/12】
なんかおかしいと思ったら、フリック操作が通常のページと逆になっています。この記事だけでなく、井戸掘りダイジェストが全滅です。なんだこれ？

もう前の記事なので、頭を捻っていたら判りました。井戸掘りダイジェストのボタン配置の問題です。そもそもは、ブログに配置されるボタンの違和感が根本でした。

外国製のブログって、進むと戻るが逆なんですよね。日本だと、「▶ボタン：進む」、「◀ボタン：戻る」だと思います。カセットテープ（古っ！！）もこれです。
ですが、Bloggerだと、「▶ボタン：過去記事」、「◀ボタン：将来記事」になっていて、時間の流れと逆転しています。まー、新しい記事がブログの先頭に並ぶので、読み進める＝過去に戻るだから、これが正しいのかもしれませんが、違和感があります。

このため、井戸掘りダイジェストは、「▶ボタン：深くなる＝時間が進む」、「◀ボタン：浅くなる＝時間が戻る」とボタン配置しました。ボタンのアンカータグはそのように定義しましたが、ボタンのクラスに紐付いているフリック動作は元のままです。右フリックで時間を進めたいのに、「◀ボタン」が動作して過去の記事に遷移していました。直さないとダメだわ。