サイトをリニューアル!

投稿日:2017/06/06

前のサイト
クリックで拡大表示されます。

大改造いたしました!

どうもお久しぶりです!
これまで日記を書いていなかったのは、実は、サイトのリニューアルをしていたからなのです(∩´∀`)∩
右の画像は 以前のサイトです。(※7月に削除します。
いやぁ~青いですね!!
しかし、今回のサイトは、背景はやや明るいグレーと白に統一いたしました。ところどころ赤が出現いたしますが、個人的に好きな色なのでご勘弁を・・・(;´・ω・)
いや、だってね、赤って危機感の赤やん?Webデザイナーでも有名な話らしいですが、あまり赤を基調としたサイトより、むしろ青を基調としたサイトの方が安心感があるらしいですね?まぁ・・・・・置いといて!( ゚Д゚)

では、どんなところが変わったのでしょうか!?

どんなところに変化が!?

①サイトデザインを大幅変更!
背景色を明るいグレーと白に、左サイドバーだったのを右サイドバーに、Homeに日記一覧を設置したり・・・。
更に、テーマを増やしました!その名も「 SEDNS」!
ん?なんだそれ?(´・ω・`)
まぁまぁ、詳しくは 本編(SEDNSページ)へ・・・(´-ω-`)オイ

なにより、個人的に力作なパーツなのが、 ヘッダーです!ナビゲーションメニューが消えていますよね!
これは、ヘッダーの裏に隠れるようにナビゲーションメニューを設置しました!
えぇ、遊び心です!w

②CSSアニメーションを活用!
まず1つ目は、CSSアニメーションの活用です!
・・・もうお気づきかと思いますが、Homeの 更新情報の部分や、記事一覧、SEDNSページの記事一覧、そして今ご覧になっている日記・記事の中にも、赤いボーダーが出現する・伸びるアニメーションがあります。
これがそうです!
ちょっとしたアニメーションですが、読んでいる場所やマウスカーソルの位置が分かりやすくなるように作成してみました。

なお、スマホからでも、タップしたらアニメーションしますよ!('ω')ノ

③サーバーの移転!
3つ目は何と言っても、サーバーを SiteMixに変えました!
なぜ変えたのか?
・fc2レンタルサーバーでは、jQueryによるload操作が使えない。
・今後サーバサイドスクリプトのPerlやCGIを扱う可能性を考えて・・・。

・・・ということなんです。無料のもので良いものはなかなかありませんねぇ・・・。
webcrowに一度移転していましたが、CGIを使おうとすると有料版にしないといけなかったりでしたから。
今後も、もしかしたら扱うサーバサイドスクリプトを増やしたり何かをやろうとするたびにサーバーを移転するかもしれません。
ご了承ください(; ・`д・´)

④javascriptを絡めるようになりました
javascriptをいよいよサイトに絡めるようにしてきました!・・・といっても、結構失敗作が続出して、まだ実現していないorゴリ押しでやった、という部分が多いんですがね・・・:;(∩´﹏`∩);:
現時点におけるjavascriptは以下の部分で動いています。
・HTMLファイルをパーツ化してjQueryのloadによってインクルード。
・Homeの日記一覧やSEDNSの記事一覧のスライダー。これもjQueryであり、 bxSliderを採用しています。
・日記や記事内の画像のポップアップ機能。これだけ現段階では自作・・・!うぐぅ"(-""-)"

まぁ・・・こんな感じですが・・・も失敗作を含め、javascriptによる作業の最適化(効率化)を進めていきたいなと思います。

課題もやはり多く・・・

①javascriptの保留しているもの
色々ありますw
最適化を考えている間に思いついたことをjavascriptで書いてみましたが、うまくいかずに保留しています。
今後一つずつ解決していきます。

②bxsliderのpagerが数字で表示されてしまう
これはちょっと解決策が分からず、結局のところ手動でpagerを作成してしまいました。
余裕ができたら詳しく見ていこうかと思います。

③booksページのデザイン変更
時間的余裕がなくシンプルなデザインにしてしまいましたが、当初の予定していたデザインに、余裕があったら変更します。

④メールフォーム
サーバサイドスクリプトにまだ触れないでいるので、完成には程遠いです・・・。

⑤リスポンシブ対応の未実装
まだスマホ版に対応していません。少々読みにくいとは思いますが、ご了承ください。
順序的に最後になりますが、実現したいと思います。

⑥リンクを外部タブで開くと・・・
aタグでリンクを指定するものがありますが、その際に、

<a href="#" onclick="window.open('URL')">テキスト</a>

としているのですが、リンクをクリックして新しいタブが開かれると、クリックしたページが、上方まで戻ってしまう、という問題があります。
どうやってクリックしたページのその位置固定して、新しいページを開けるようにするのでしょうか・・・。

*******2017/08/18更新*******
問題として抱えていた⑥ですが、解決しました。

<a href="URL" target="_blank" rel="noopener noreferrer">テキスト</a>

これでできたんですね。
全記事のURLすべて修正しました。

今後の方針

①サーバサイドスクリプトの学習
やはり一番はこれですね。メールフォームもこれから構築されるので。
Perl、CGI、JSP、Node.js、Rubyなどがありますが、どれがいいのか、が分からず、とりあえずやってみます!(フラグ)
まずはajaxですかね(そこ)

②Webサイト構築作業の最適化
javascriptで失敗して保留にしてしまっている部分ですね。

③Booksページのデザイン変更
余裕ができたときにやります!

④タグ機能・検索機能
これの仕組みはまだ構築把握できていないためまだ時間がかかります・・・
サーバサイドスクリプトを使うのかな・・・?

⑤レスポンシブ対応
サイト全体が完成したときに行いたいと思います。

タグ:

Comment

コメントはありません。
There's no comment.