日々サイト制作をしていると、色々な「怪現象」に遭遇します。今回はそんな「怪現象」をいくつか集めてみました。
■fireworksステートが独立していない怪
fireworksという画像を扱うソフトがあります。
web制作では非常に便利なソフトですが、現在開発元では提供が終了している残念な状態だったりします。
で、このfireworksの機能として「ステート」と「レイヤー」があります。
レイヤーは多くのお絵かきソフトで採用されているので、なじみのある方も多いと思います。
昔のアニメのセルのように複数のレイヤーを重ねて1枚の画像を作ります。
ではステートとは？
これは多くのレイヤーから作られた一つの画像を「ひとまとめにしたもの」と思っていただければ良いかと。
どんな時に使うのかといいますと、例えば見出しを画像で作るときに使ったりします。
背景として画像を置き、装飾の画像をいくつか重ね、最後に文字を入れる。
そして文字だけ違う見出しが何個もあるので、その分ステートを作る。
といった感じになります。
レイヤーだけでも文字部分の表示／非表示の切り替えで実現可能ですが、よりスマートに行えます。
なお、他にもアニメGIFを作るのにもこの機能が使えます。
あるとき、見出し画像を作るため、ステートを複製して、出来たステート２の文字を書き換えると、なんと、ステート１の文字まで変わっているではありませんか。
ステート２の文字を書き換えただけなのに、触ってもいないステート１の文字まで変わるとは、是如何に。
すべてのステートには同じレイヤーが存在します。
「ステート１」に「レイヤー１」「レイヤー２」があれば、
「ステート２」にも「レイヤー１」「レイヤー２」があります。
通常は各々のレイヤーは独立しているので、
「ステート１」にある「レイヤー１」を変更
しても
「ステート２」にある「レイヤー１」
は変わりません。
ですので、文字だけとか、色味だけを書き換えたステートを作ることで、同じデザインの同じ大きさの画像を作ることができます。
さて、以下はあるfireworksの設定のメニューです。
レイヤーを選択して出る設定メニューになります。
「レイヤーを複数ステートで共有」という項目があります。
これが今回のお題。
曲者な機能です。
この機能がonになっていると、そのレイヤーは他のステートにあるそのレイヤーと「同一」のものになります。
例として「ステート１」は「レイヤー１」に文字、「レイヤー２」に背景というつくりだとします。
ここで、ステートを複製して同じ内容の「ステート２」を作ります。
そして「ステート２」の「レイヤー１」の文字を書き換えます。
通常はこれで文字だけ違う２つの画像が作られます。
もし、ここで「レイヤー１」が「レイヤーを複数ステートで共有」になっていると、どうなるでしょう。
「ステート２」の「レイヤー１」の文字を書き換えると、「ステート１」の「レイヤー１」の文字まで同じ内容になってしまい、ステートを分けた意味はありません。
通常はこの「レイヤーを複数ステートで共有」は指定されていないものですが、複数の人で共同で作業している場合など、知らないうちに指定されていることがあります。
そうするとソフトが予想外の動きをする事態に遭遇して「ぎゃあ、元データが消えた！」と慌てる事になるわけです。
■空の子テーマを作っただけで動作が変わる怪
wordpressでサイトを制作する場合、デザインやそのほかの機能の実装のために、市販されていたりフリーで提供されているテーマを利用することが一般的です。
その場合、通常は子テーマを使って行います。
テーマは時々アップデートされたりしますので、テーマ自体を書き換えると、アップデートができないorアップデートすると変更した部分が消える。という事態になりますから。
さて、あるテーマ（activelloと言います）で作成していた時のこと。
まずは単に何も変更しない空の子テーマを作成しました。
そして制作中のサイトを表示してみると、スマホ用メニューがおかしな挙動をするではありませんか。
元々おかしかったのかというと、そうではありません。
子テーマを指定せず、直接元のテーマを指定すると、正常に動作しています。
何も変更していないのに、動作がおかしくなるとは、是如何に。
実はそのテーマ、bootstrapを利用しているのですが、bootstrap のスタイルより先に親テーマのstyle.cssが読み込まれるため動作が変わってしまったのです。
元のテーマで動かしたときは、bootstrapのスタイルの後にテーマのstyle.cssが読み込まれるため、順番が逆となり、上書きされるスタイルの部分で問題が発生したのです。
子テーマなし
bootstrapのスタイル
テーマのstyle.css
子テーマあり
親テーマのstyle.css
bootstrapのスタイル
子テーマのstyle.css
この問題は子テーマの function.php の theme_enqueue_styles() に
wp_enqueue_style( ‘activello-bootstrap’, get_template_directory_uri() . ‘/assets/css/bootstrap.min.css’ );
のような内容を追加して、先に bootstrap のスタイルが読まれるようにすると解決します。
つまり
子テーマあり（対策後）
bootstrapのスタイル
親テーマのstyle.css
子テーマのstyle.css
とするわけです。
■ウインドウの幅を縮めただけで画像が離れる怪
縦に３枚の画像を置いている時のお話。
普段は３枚の画像の上下に隙間はありません。
そこではスタイルで画像の最大幅を100%にしているので、ブラウザ幅を狭くしていくと、画像は縮小されていくのですが、ある程度以上狭くすると２枚の画像の間に隙間が現れるという怪現象が。
隙間を開けていないのに、勝手に隙間が開くとは、是如何に。
実はよく見ると３枚全てではなく、狭い画像の上にだけ隙間が現れます。
（vertical-align:bottom;が入っているため、下には現れません。なお、もっと幅を縮めると、「一番下の画像の『上』」にも隙間が出るので、一見上下に隙間があるように見えます。）
実は解決策の一つは画像を囲む要素（この時はdiv）にline-height:0;を指定する。というものです。
どうやらこの現象、縮小された結果、画像の高さがline-heightの指定を下回ると発生する様です。
（他にも解決策はあります。ポピュラーなものとしては、画像をblock要素にするというものがありますね。）
■コピー先にフォルダが存在しないのに「上書き確認」が出る怪
windows7（の標準機能）でCDの書き込みをしようとしたところ、フォルダの上書き確認が出ました。
しかし、コピー先は空のＣＤ。
何も無い所にコピーするのに上書き確認とは、是如何に。
実はそのフォルダの中身は空でした。
空のフォルダをＣＤにコピーしようとすると、この画面が出るのです。
そのため、中に何かファイルを入れると、出なくなります。
■一度httpsでアクセスすると、httpでアクセスしてもhttpsに勝手に変わる怪
httpsをサポートするサイトが増えてきましたが、httpで開いたにもかかわらず、httpsに変わってしまうことがあります。
httpでアクセスしているのに勝手にhttpsになるとは、是如何に。
これには「最初から」そうなるケースと「過去にhttpsでアクセスしたサイトの場合」そうなるケースがあるようです。
前者はサイト側でそういう設定をしているのですが、後者はそうではありません。
この現象、単純なサイトなら問題にはなりませんが、外部スクリプト等を使っている場合、httpのアクセスが止められて動作障害の原因になったりします。
これは別のスタッフが遭遇した事案の為、詳しくはかけませんが、対処法は、
・別のブラウザでアクセス
・プライベートブラウズの機能を使ってアクセス
などがあります。
あと、ブラウザが持っているそのサイトに関する情報を消すと元に戻るようです。
（キャッシュの削除では戻らないようです。キャッシュとは他の情報の模様）
■フォームに値を入れて送信すると、入れた項目により正常だったり404エラーになったりする怪
wordpressを使っているサイトを作成しているときのことです。
日付を入れるフォームを作成しました。
年・月・日を別々の数値入力にしているフォームです。
月に値を入れたときは正常なのですが、年や日に値を入れると、
なんと
「お探しのページが見つかりません。」
に。
urlが勝手に書き変わっている訳ではないので、アドレスバーを選択してEnterを押すとちゃんとフォームの送信先ページが表示されます。
（もちろん、フォームからの送信では無くなるため、受け取る値は何もない状態ですが）
ページがあるのに無いなどというとは、是如何に。
実はwordpressにはフォーム項目として使ってはいけないものがあります。
それが原因でこの不可思議現象が起きたのでした。
この事例では year, day が該当します。
month は該当しないため、問題が起きなかったわけです。
解決策は簡単ですね。名前を変えればいいだけです。
その時は yearは byear 、day は bday にしました。