http://pokebuizu.blog.fc2.com/
ブログトップへ

カスタムプラレール、鉄道、お絵かき(ポケモン・その他)の記事が主体のブログです。

拡張スペース(現在工事中です..)
7bf737e9d65f09ca69ca4d0beb24fd2f.png
ホームページの話題についてです。

今まで、CSSが理解できないということで
HTMLだけで組んできておりましたが、
この度上部のサイトバーをようやく
外部スタイルシート(CSS)依存の方式に切り替えました。

今まで何度もCSSを理解しようとして挫折してきたわけですけど、
初めて外部スタイルシートを用いたデザインが出来たほか
ようやくCSSの一部をいじれるようになりました。

まだ自分で一から…とまではいきませんけども、
以前に比べれば格段に自由度が上がったと思います。

元々ホームページはメンテナンスがしやすい設計にしていたこともあり、
上部の更新自体は比較的何の問題もなく終えることができました。

以前のHTMLだけで組んでいたものよりも簡素なものになりましたが、
jqueryを用いてより"なめらかな動き"ができるようになりました。

KC460996.jpg
マウスを載せると、色がすうっと青に変わり、
外すとすうっと元に戻ります。

加えて、Javascriptにより文字が光るようにしました。
※Chromeでの動作を確認

なお、サイト上部とリンクページのみ
リンクが光るようになっております。

KC4609970001.jpg
文字が光る方の機能については、
IEはJavascriptに対応していないので
従来通り普通のリンクになります。

京急やおたのしみが大量に表示されている状況は
ようやくなくなりましたが、代わりにほとんどの
ページが工事中の表示に切り替わり、まだまだ整備の必要があります…。

本来は上部のバーにマウスを載せると
プルダウン式の更に細かい選択が出来るように…と思って
一度実装まで行ったのですが、こちらもIEがJavascriptに
対応していないということが判明し、元に戻しました…。

一応Chromeを標準ブラウザに指定していますけど、
IEのシェアは依然として高いので、軽視するわけにもいきませんし…。

a613eadd4c396f7ae6b55b17e52a289f_20140125172135706.png
先述のホームページのCSSを設定している際に、
とあるサイトを参考にしたのですがどうにも
謎の空間が出来たり表示が崩れたりして、
原因究明のために試行錯誤をしたりしたところ、
そもそも「コピペして使ってください」となっていた
コピペ元が間違えていることが分かりました。

この原因究明のときにCSSのいじり方が多少分かったので、
今まで一切触れてなかったこのブログのCSSも多少いじれるようになり
ブログのデザインについても順次変更していきたいと思います。

元々、以前IEでの動作不良が発覚し緊急メンテナンスを行った際に
現行デザインに移行しましたが、どうも個人的に気に入らなかったので
ちょうどいい機会ですし、まとめて更新したいと思います。


とはいえ、過去の記事との互換性も考えて、
基本的にはそのままで外観だけリフォームする予定です。

既に木目調の背景になったり、記事タイトル部がマルーン色に変更
"ポケムー"や"京急2100形"が合成されているなど、変化をつけています。

また今のところは(苦情は)いただいていませんが、
一部の小さくて見づらい文字を大型化しています。

ホームページと同じく、ブログではほぼすべてのリンクが
光るように設定しました(HPと同じくIEは従来通りで非対応です)


より見栄えがよくて独自色の強いサイトに仕上げたいと思います。

【追記】背景の模様について、
苦情をいただいたため従来のデザインに戻しました。

掲載終了したデザインを踏襲しつつ、
よりよいサイトへ変更予定ですのでしばらくお待ちください。



コメントお待ちしております!

にほんブログ村 鉄道ブログ プラレールへ

ランキング参加中です。
よろしければクリックお願いします!

新しい記事lホームl古い記事
いつもブログをご覧いただきありがとうございます。
関連記事
コメント
Re: Javascriptに関して
会員制掲示板を運営する者です 様

申し訳ありません。ちょっと語弊がありました。
使用しているコードにIEが対応していない
もしくは挙動が他ブラウザと違うのではないか
という意味で書いたものです。

2015年現在、IE11では正常動作を確認しております。
結局原因は分からないままです。
2015/05/10(日) 03:15:48 | URL | purapoke #-[ 編集 ]
Javascriptに関して
"IEはJavascriptに対応していない"
とありますが、確かすべてのバージョンで対応していたと思います。
もしかすると設定でJavascriptを無効にしているだけだと思います。
2015/03/12(木) 16:53:23 | URL | 会員制掲示板を運営する者です #Wu8UEaAs[ 編集 ]
コメントの投稿
URL:
本文:
パスワード:
非公開コメント: 管理者にだけ表示を許可する
 
トラックバック URL
http://pokebuizu.blog.fc2.com/tb.php/697-2ec8edde
この記事にトラックバックする(FC2ブログユーザー)
トラックバック