イラストグッズ販売中!

ホームページのデザインを変更しました

ホームページのデザインを変更しました

久しぶりにホームページのデザインを変更しました。
今回は色々と苦戦してしまいました。

上記バナーはいつもお世話になっているホームページのテンプレートを配布しているサイトさんです。
今回もこちらのテンプレートを使用させていただきました。
他のテンプレートもとても素敵なので気になる方は上記バナーから見に行ってみてください。
今回、ホームページのデザイン変更で一番苦戦したところはメニューになるのですが、全然うまくいかなくて3日間くらい苦戦してしまいました・・・。
(今日をいれると4日間になるかな・・・)
自分のホームページのコンテンツが多過ぎてスマホから見るとメニューが二段になってしまうのがどうしても気になってしまい、何か良い方法はないかと色々と調べた結果、ハンバーガー式というものを見つけました。

Googleトップ

よく上の方で三本線で表示されているものですね。
まさかこれが地獄の始まりになるとは・・・。
レスポンシブ対応のホームページのデザインはテンプレートに頼りきりでCSSなども独学状態ですし、Javaに至っては使ったこともなかったのでやり方を紹介しているサイトを見ても理解できずに、元のデザインが崩れてしまうばかり・・・。
色々な方法を試してみましたが、多分基本が理解できていないので出来るわけがないですよね。
それで他に良い方法はないかと調べてみたらスクロール式というものがありました。

上の画像は完成した自分のサイトになるのですが、画面の幅を狭めていくとメニューが横スクロールになるものです。
Appleのサイトなどでよく見かけますよね。
これならCSSの知識だけで出来るみたいだったので試してみたところ、半日もかからずに反映させることが出来ました。
しかもハンバーガー式のものよりメニューが見やすいというね!
一体、この三日間は何だったのかと思ってしまいましたよ(笑)

ただひとつ残念だったのが元のデザインを残せなかったこと。
『klee』さんのデザインがとても気に入っていたのですが、自分の知識が足りなかったです・・・。

それと今回からTOPに戻るボタンを設置しました。
前回も所々にあったのですが今回は右下に固定された状態でついてきてくれます。
これでたくさんスクロールしたとしてもメニューまで戻りやすくなったと思います。
理想としてはメニューが上部に固定された状態でついてきてほしかったんですけど、これはこれで難しそうですよね・・・。

そういえばTOPに戻るボタンの方もJavaを使用しているのですがこっちは普通に反映されているんですよね。
だからメニューの方も出来るもんだと思っていたんですけど、何故出来なかったのか謎です。
それにしても学生の頃からホームページを運営していますが、どんどん新しいものが増えていきますね。
今回のことである程度は自分でもデザインできるように改めて勉強しなおそうと思いました。




にほんブログ村 イラストブログへ
↑一日一回、クリックして頂けると嬉しいです。
【スポンサーリンク】