azul’s Home

作ってみたいなーと思っていたハンバーガーボタンができました。
自分で一から作れなかったので、購入した書籍の著者が公開しているサンプルサイトに行って、目を皿のように一行一行を凝視しつつ、カスタマイズできるところを探して４色のボタンを作りました。もうこれで出来上がりだ、そう思って夜眠ると次の朝には、あそこは変えたほうがいいかなぁという気持ちがむくむく湧いてきて、なかなか終わりませんでした。

ハンバーガーボタンには馴染みがあるようなないような？
通販サイトには大抵ありますね。クリックやタップすると、びろーんとメニューが出てくるやつですね。ボタンを作って終わりじゃなく、そのメニュー画面もカスタマイズできるので背景色をグラデーションにしてみました。

ところでハンバーガーボタンの歴史は意外と古いものだったようです。知らなかったです。
その上批判もあるとか。あれを見ても何かが起こるとか思えず、わかりにくいだろうとのこと。
確かに三本線だけ置いてみても何となくしっくりこず、せめてMENUという文字だけは入れたいなと思い、やり直しました。各トップページに合わせて色を変えて置いてみたら、3本線だけよりはいい感じになりました。

動くWEBデザイン　アイデア帳
こちらのサイトです。懇切丁寧です。

パンくずリストも作ってみました。サンプルサイトのコピペですが、これがあるのと、ないのとではGoogleさんのウケを左右する、というか閲覧者ファーストになるんですね。
パンくずリストはそう難しくないのですぐ実装できると思われます。
X SERVERの解説に倣ってやってみました。

X SERVER 初心者のための会社ホームページ作り方講座
わかりやすく解説されています。

モバイルユーザビリティ、レスポンシブWebデザイン、それがSEO対策というもの？これ無くしては昔のように検索からホームページに来てくれる人を増やすことは出来ない…。いや、自己満足でいいんですけどね。やれば出来るということがわかって良かったです。
しかし、きっつー。

Google サーチコンソールに行って、指示に従いつつ、見た目の雰囲気は度外視して作り直しました。テキストや画像アップよりもこの土台作りが難しかったです。 あとは中身の問題。それが一番難儀でしょうね。 ところでこのブログもiPadを縦にしたら現れるのですが、開かないことがちょくちょくあります。 SafariとGoogle Chromeでは開くけど、Googleでは開けない問題、そこを何とかしたいので、まだまだ画面と睨めっこは続きそうです。

とても助かったサイトも書いておきます。

リンク切れチェックサイト
TRICKSTERリンクチェッカーLink Checker
めっちゃ高速で有能でした。

サイトマップ作成サイト
Sitemap Details
ここも高速で有能でした。

他にも便利なサイトはリンクのコーナーに並べております。
自力では無理でした。本当にありがたいことです。