FC2ブログ
2018_07
28
(Sat)08:28

WEBサイト更新(特殊技術の紹介)

当社のWEBサイトは、私が自力で作成しています。
前回のWEBサイト更新

今回はトップページに当社の特殊技術をアピールする項目を追加しました。

まず4つの特殊技術をPCとスマホで表示順を変えるため、
フレックスボックス」を設定しました。
そして画像を何種類か表示させたかったので、
CSSでスライドショー」を設定しました。

画像は最初PNG形式にしていたのですが、
拡大したりスマホで見ると画像が粗く感じます。
そこでベクトルデータを表示できる「SVG形式」にしてみると、
ファイルの容量は少し増えますが、かなりキレイです!

しかしローカール上ではうまく表示できたのですが、
サーバーにアップしたら画像が表示されません。
良くわかりませんが「.htaccess」というおまじないで解決。

その後SVG画像はChromeとIEで一部見え方が異なることが判明。
IEではイラストレーターの乗算がうまく反映されないようなので、
元データを修正して対応しました。

さらにそれぞれの画像にリンクを貼りたかったのですが、
どうしても全て最後の画像のリンクに飛んでしまいます。
JavaScriptで画像の重なり順を変える方法もあるようですが、
何とかCSSだけで対応したいです。
色々調べたところ画像の左側を100%にしておいて、
アニメーションで0%にするという方法で何とか解決できました。

今回の更新はかなり苦労してしまいましたが、
私もWEBサイトもレベルアップしました!

(追記)
苦労してそれぞれの画像に別々のリンクを設定したのですが、
やっぱり「サムネイル付スライド」のページにリンクするようにしました。
別ページはコピペで上手くできたと思いきや、IEだと表示が崩れてしまい、
修正するのに苦労しましたよ。

Chrome68より非HTTPSサイトが「保護されていません」と表示されます。
(参考)https://zenlogic.jp/aossl/basic/required-chrome68/
当社のサイトもSSLに対応しないといけないのかな?
独自SSLは結構お金がかかるようだし、
無料の共有SSLだとURLが変わってしまうし・・・。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

トラックバック