🖋タカヒサ
2022/12/17
私の「オシ」機能
以前、「私が思う、サイトの「オシ」ページ」を紹介しました。今回はその機能版です。三つ紹介します。
私の「オシ」ページはこちら・ハンバーガーメニュー
ハンバーガーメニューとは、スマホ画面など、ヘッダーの表示がサイズ的に難しい場合に、サイトの右上上部に表示されるやつです。合同記号(≡)みたいな三本線の形をしており、これを押してメニューを開くことにより、様々なページへのリンクを表示できます。通常このハンバーガーメニューは、JavaScriptで作ることが多いそうなのですが、なんとこちらのメニュー、HTMLとCSSだけで実装しています!。HTMLのチェックボックスの機能を応用したものです。
また、デザインや動きにも非常にこだわっています。一体世の中に、三本線(≡)をクリックすると、中央の線のみが飛び出して、それが二つに分裂し、閉じるための×マークを作るハンバーガーメニューがどれほどあるでしょうか。いや、まさかないでしょう。(実はこれは、CSSでハンバーガーを動かすためのコードに難点があったため、それを上手く回避しようとしたら、このようなデザインになったのですが...)私はこの独自のデザイン性をとても気に入っています。
・文字サイズ変更
文字サイズ変更機能は、私が初めてJavaScriptを用いて実装した機能です。サイズ変更に対応する文字を指定することや、ページを移動した後も文字サイズの情報を保持するのがとても大変でした。どなたでも快適にウェブサイトを楽しんでいただけるよう実装した、イチオシの機能です。
・タグ検索(ブログ)
タグ検索機能。こちらはブログページの、コンテンツ一ページ内の機能になります。タグやライターを選択すると、その条件に合致した記事のみを一括表示することが出来ます。また、選択されたタグは背景がオレンジ色になったりと、使い易さや分かり易さにも考慮した機能になっています。
ちなみにこちらは、表計算ソフトで自動でコーディングしています。詳細は以下の記事をご覧ください!!!
ブログの仕組みその1