CSS3+HTML5

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

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

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に書き足す↓)

プラグインを使わずにWordPressで記事内の画像のリンクを無効にする方法(Love&pointcard IT/Web系の情報と雑記)

 

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

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

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

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

ページトップへ