CSS3+HTML5

別のhtmlページから遷移してきたアンカーリンクのポイントがズレる (その2)

2019年6月6日 木曜日

まもなくサポートも無くなるとはいえ、IE11での閲覧に対応しないといけないうえに、別のhtmlページのアンカーリンクするという案件がございまして、
構築手法にも少し無理はあったのでしょうが、他のブラウザは何ら問題はないのに、IE11での閲覧ではレンダリングがやたら遅くて、だんだんCSSが効いてきてページができあがるような挙動で結果、アンカーポイントがずれるという事態になりました。

 

以前にご紹介させていただいたコードを書いても、状況が好転せず、いろいろ探しましたら、InstantClick というjavascript を使うことで問題が解消しました。

nstantClick.io はリンクされたテキストや画像にマウスを載せると、pjaxという仕組みで、リンク先のサイト内ページを先行してロードを開始し、クリックして遷移したときはロードされたページに移動するというもので、当然アンカーポイントへの正確に移動します。

 

 

もちろんIE11のケースに限りませんし、前回ご紹介したようなスライダーの整形の時間差でアンカーポイントがズレるようなケースもこれで対応できますね。

 

とくにアンカーリンクの場合でなくてももちろん使用可能で、ページ遷移のスピードが早くなっているのを体感できると思います。
そのことから高速化に有効として紹介されますが、あくまで遷移のスピードUpなので、GoogleのPageSpeed Insightのスコアが上がることにはなりません。
ユーザビリティ的には有効でしょうね。

 

ただ、マウスが触れば先行でページのロードが始まるので、サーバーにはそれなりに負荷はかかると思いますし、Google Analyticsの計測が狂うという話もあるようです。
先読みさせないリンクの書き方や、Google Analyticsの対策もあるようなので、対応が必要な方は調べてみてください。

【改訂】画像ファイル圧縮ソフト Voralent Antelope の取得先

2019年5月23日 木曜日

画像ファイル圧縮ソフト Voralent Antelope をダウンロード取得しようと voralent.com のアドレスにアクセスするとBoldright(ボールドライト株式会社)のホームページにリダイレクトされますが、そのページの下方でソフトのダウンロードを可能にしていただけました。

 

Boldright社の前身Voralent社のソフトウェア開発は終了し、Antelopeは2015年に開発を打ち切っておられるので、Windowsでの動作保証はいたしかねるとのことです。

 

Vectorのサイトからもダウンロードできます。
https://www.vector.co.jp/soft/dl/winnt/art/se506994.html

JPEGをFireworksで開けてみたらボケボケや色がおかしいとき

2018年1月31日 水曜日

いまさらのFireworksですが、外注のデザイナーが書き出ししたJPEGをちょっと修正しようと思ってFireworksで開けてみると、なんだかボケボケで色合いもおかしい。

 

JPEGをブラウザで表示させたりしても何もおかしくはない。
何が起きたのだろうとよくよく調べてみると、そもそも紙専門の外注のデザイナーがカラーモードCMYKで書き出したJPEGであることがわかった。
この場合Photoshopで開くと正しい色と鮮明さで作業ができる。
Fireworksだけではなく、CMYKに対応していないソフトでは同様のことが起こりうると思われる。

 

とはいえ、今回の場合はデザイナーがブラウザ表示でどういう色調を意図してデザインしていたかはもう見当がつかないので、そのまま作業をすすめるしかなかったが、そもそもはデザイナーがカラーモードRGBでデザインを起こしてくれていなかったことに問題がある。

説明をきいても普段はカラーモードの違いを実感していないかたもいらっしゃるかもしれないが、
いまさら当たり前ですが、ウェブサイトのデザインをするときにはカラーモードRGBで。

別のhtmlページから遷移してきたアンカーリンクのポイントがズレる

2017年8月29日 火曜日

現在のhtmlページの中でアンカーリンクで移動させるぶんには問題ないのですが、
とくにAjaxの画像スライダーを設置していたりすると、
他のhtmlページから遷移して別のhtmlページのアンカーポイントとはズレたところに着地することがあります。

理由はそもそも遷移は正しく実行されているのですが、JavascriptやCSSが読み込まれる前に着地してしまうので、
スライドする画像がまだ並列にあって、それからひとところにまとまるので、そのような現象が起こってしまうのです。

これを回避するには、下記のようなスクリプトを書いて、
先にロードしてJavascriptやCSSを読み込ませた後にアンカーリンクが着地するようにする必要があります。

アンカーポイントから、ええ塩梅に100px上にマージンをもたせています。

楽天市場に出店するサイトでjQueryやJavascriptが動かないとき

2017年6月29日 木曜日

楽天市場(Gold)にクライアントのお店サイトを構築中。
htmlファイルをアップロードした時点で、どうやら楽天側で独自のJavaScriptを自動で書き足して成形までするようで、別ファイルのjQueryなどがコンフリクトするみたいで機能しません。

document.writeで別ファイルのjsを読み込みしたい順に書いた import.js(命名は何でもよい)をfooterに記述すると機能しました。

footerに記述

import.js

楽天市場サイトの構築については情報が少ないですね。
これで全ての方の問題を解決するか保証はありませんが、同様の悩みのある方は試してみてください。
(注) コードは例ですので、使われる方はご自身の環境にあわせてディレクトリなど、パスなど修正してくださいね。

ページトップへ