photo credit: Viktor Hanáček via picjumbo
こんにちわ。47才無職です。
スマホの表示を重点的にカスタマイズし、見やすくしてみました。その他にもユーザビリティの向上を目指して、いくつかカスタマイズを追加しましたので、備忘録を兼ねてアップしておきたいと思います。参考にさせていただいた皆様、この場を借りてお礼申し上げます。
（追記）Sidr関連記事を追記しました。
スポンサーリンク
スマホ関連カスタマイズ
スマホのメニューを左に寄せ、アコーディオンに
nekonotesouさんの記事を参考にして、メニューを左側に寄せて、アコーディオンも左からスッと出て来るように変更しました。こちらの記事は画像がリンク切れしていたので、少々不安でしたが、ばっちりでした！ありがとうございました！
（追記）残念ながら、記事がなくなってしまいました。
＜参考＞STINGER5のスマホ表示のメニューをカスタマイズ
スマホのフッター固定
ちゅんこさんの記事を参考にして、フッターに固定式フッターメニューを追加しました。デザイン・色も私のページに違和感がなかったので、コードをそのまま使わせていただきました。ありがとうございました！
＜参考＞【STINGER5】スクロールしてもフッターで固定するメニューを設置してみたよ！
スマホメニューを横から出す
ちゅんこさんの記事を参考にして実装したんですが、androidだと、どうも動作が不安定で実装を止めようかどうか悩んでいたところ、wordpressやアプリ開発などなど備忘録さんの記事で使えそうな対処策の記載があり、試したところ、うまく動くようになりました。お二人ともありがとうございました！
＜参考＞JQuery『Sidr』をWordPressのカスタムメニューに対応させ設置する方法
他のカスタマイズ
関連記事を横並びに変更
ブログのちからさんの記事を参考にして、関連記事を横並びに変更しました。サイドバーとの見栄えを統一するために、コードを一部書き換えさせていただきました。ありがとうございました！
＜参考＞【Stinger5カスタマイズ】関連記事を横並びに変えてみた。
記事一覧のリンク範囲を拡大
キャリコさんの記事を参考にして、記事一覧のリンク範囲を拡大してみました。ユーザビリティの向上を目指してやってみました。ただ残念だったのが、サイドバーにも適用しようとしたところ、レイアウトが崩れてしまい、紹介されているコードでは対処できませんでした。このあたりは勉強して、再チャレンジしてみたいと思います。ありがとうございました！
＜参考＞STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法
googleカスタマイズ検索を設置
webkaru.netさんの記事を参考にして、サイト内検索を設置してみました。設置するほど記事はないんですけど、今後の事も考えて設置することにしました。ありがとうございました！
＜参考＞HTMLフォームを使用したGoogleカスタム検索のデザイン変更方法
今後ためしてみたいカスタマイズ
以下、チラ裏になりますが、ざっと書いてみます。
今現在、やりたいなと思っているカスタマイズです。
- サイドバーの各カードのリンク範囲を拡大させる
- スマホのメニュー表示を大きく目立たせる
- スマホのサイドバー搭載
- サイドバーの広告をランダムに切り替える
- サイドバーの表示の優先度を下げる（記事優先に）
最後に
Stinger5関連の記事はググるとたくさんあって、自分のやりたい事もたくさん表示されますが、自分の環境でそのまま使えるかと言うと、なかなか難しいところがあります。ググるのも大切ですが、WordpressやCSSについては、自分なりに勉強していく必要がありそうです。
以上、お世話になった記事一覧でした！
（追記）下で紹介している本を購入しました！
3,701 total views, 11 views today