CSS3+HTML5

別の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

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

Firefoxを使って投稿編集してると電話番号にSkypeリンクがつく怪奇。

2014年3月18日 火曜日

いまどきWebの標準表示だとFirefoxをメインブラウザでWeb制作してるひとってもう少ないでしょうか?
アドオンいろいろ入れちゃうと、何分たっても開かなくてすごい迷惑だけど、
便利なアドオンは多いし、ソースとCSSの関連を発見するのに、Firefoxの「Web開発ツール」は他のブラウザのものより使い勝手がいい。

そんなわけでやっぱりFirefoxでブラウザ確認しながら制作することはまだ多いのだけれど、
最近、あちこちWebサイトを見ていたら、電話番号のテキスト表記にSkypeのリンクが付くようになったかと思ったら、WordPressの投稿記事を管理画面のフォームで編集したら、Skypeのリンクやアイコンを表示するソースがつくようになってしまった。

現象としては、テキストモードで電話番号を書いて、ビジュアルモードに切り替えたりすると、どんっと
Skypeのアイコン付きのリンクに変じる。
テキストモードに戻せば、びっしりSkypeのソースが書き足されている。
保存すれば、もう誰がどこで何のブラウザで見ようがSkypeリンク付きになる。
・・・怪奇すぎる。

 

原因はFirefoxのアドオン Skype click to call が有効になっていると起こる。
インストールした憶えはないのだか、Skypeがアップデートした時か何かに、勝手にあるいは拍子にインストールしてしまったのだろう。

有効になっているアドオンの一覧でSkype click to callを無効化すれば問題は解消する。
以前はこのアドオンはアンインストールされなかったようだが、いまは無効化すればなくなるみたい。

このSkypeの電話リンクが便利で使っている方には不都合になっちゃうかも・・・ですが。

jQuery Mobileテーマでアップした画像やPDFのリンクがundefindになってしまう

2013年7月12日 金曜日

現在、弊社契約のお客様については随時スマホ閲覧用にjQuery Mobileを活用したテーマ使用への切り替えをすすめているのですが、

jQuery MobileとWordPressの組み合わせから起こる問題で、
投稿フォームからアップされた画像に拡大サイズの画像が自動リンクされている場合、
投稿フォームからアップしたpdfファイルとテキストをリンクされている場合、
jQuery Mobileは「undefine」のプログラムエラーになってしまいます。

この回避策ですが、

投稿フォームからアップされた画像に拡大サイズの画像が自動リンクされている場合は
そもそもスマホではページ上にある画像がスマホの横幅に満たないときはダブルタップするか、ピンチすることでズームできる機能があるので、画像にかかっている拡大サイズ画像へのリンクを無効にするのがよいと判断しました。

具体的にはスマホ用テーマのfunction.phpでaタグで拡大画像のリンクをimgタグから外してしまうという、というソースを書きました。

(↓スマホ用のテーマ側のfunction.phpに書き足す↓)

 

投稿フォームからアップしたpdfファイルとテキストをリンクされている場合は、
そもそもjQuery Mobileを使用しているときは画像やpdfなど、HTMLでは無いファイルへリンクするときはaタグに rel=”external” が無ければ「undefine」になるので、

スマホ用テーマのfunction.phpでpdfファイルにリンクするaタグにだけrel=”external”を追加するソースを書くことにしました。

具体的にはaタグのなかの「.pdf”」を「.pdf” rel=”external”」に置換するというものです。

(↓スマホ用のテーマ側のfunction.phpに書き足す↓)

Anothor HTML-lint gatewayについて

2013年4月16日 火曜日

SEOを専門にしている方はHTMLはAnothor HTML-lint gatewayで検証して、
高得点がとれなきゃいけないと、あちこちでお話されているようです。

ウェブサイト制作者のみなさん、最近意識してますか?

Anothor HTML-lint gatewayのこれまでのサイトは閉鎖しましたが、

別のところが継承して違うURLになっていたりしますし、
そこではHTML5は検証できないとうたっていますが、
HTML5を検証できるAnothor HTML-lint gatewayも他所にあります。

Anothor HTML-lint gatewayはHTMLのコーディングの質を採点するネット上の無料サービスで、
W3Cのバリデータより更に辛いというか、
いわゆるユーザビリティとして「こうしたほうがいい」という基準を
すべて「しなさい」で判定しているところもあって、
クライアントさまがSEOをかじられて、Anothor HTML-lint gatewayで満点でないと困るとか
言い出されちゃうと弱ったことになります。

正直、制作でユーザビリティとか完璧にしてたら、
予定する工数で納品できなくなることもあるでしょうし、
そういう知識はおおかた専門学校でも書籍でもほとんど学べないことなので、
スタッフ教育みたいなところから始めないといけない、みたいなことにもなりかねません。

たいていのクライアントさまはGoogle検索で上位になることを望んでおっしゃっていて、
ユーザビリティをほんとにそこまで望んでおられるのか、
そうならばそれで改めてお見積も必要でしょうし、

制作の慣習的なものも含めて、SEOだけに特化した業者さんは
そこまで知ったこっちゃないというスタンスのかたも少なくないので、
自社でAnothor HTML-lint gateway検証についての見解をまとめておかれるほうがよいでしょう。

(余談)
Googleが推奨している代表URLの宣言、link rel=canonicalが
Anothor HTML-lint gatewayではアウトになって、30点近くの大幅減点になるし・・・

ただ、Anothor HTML-lint gatewayで検証してみると減点になっているのは
意外や普通のコーディングレベルのミスであったり、
よく理解しないで習慣やクセでやってることが大きく足をひっぱっている場合がままあります。

そういうのは直さなくちゃいけませんよ。

ページトップへ