カテゴリー別アーカイブ: html

結局使うことになるImagemap

レイアウトがこだわりすぎた要素に対して、こだわりすぎたリンクを設置するときにはどうしてもつかうことになる。

今回お世話になったサイト。

◆Imagemapを生成してくれるサイト
https://www.image-map.net/

◆ImagemapにHoverの能力をつけるプラグインの説明サイト
https://cror.net/jquery/jquery-maphilight.html
見てる最中にサイトが落ちちゃった

◆レスポンシブ対応させるプラグインの説明サイト

イメージマップのあのめんどくさい座標マッピングをやってくれる超便利なジェネレータ

iphoneでtwitter widegetのiframeが横にはみ出るバグの修正

twitterのタイムラインwidegetを使うときにレスポンシブにしたいと思いぐぐるとよく書いてあるのが

<a class="twitter-timeline" data-width="100%" 

 

 

のくだり。

幅100%だから常に親に合わせる的設定なんだけど、iphoneで見ると親を無視してとんでもない幅になっている。

jsで親要素の幅を取得して、設定してもうまく行かず悩んでいたところ以下のサイトを発見。

iPhone7でTwitterのウィジェット(iframe)がはみ出す【解決】

簡単にいうとレスポンシブで利用しようとしている最大幅より大きい値の数値を強制的にwidthで設定をしてしまえば、ブラウザ側の解釈として大きすぎるのでwidthは無視、max-widthを参照しようとなるわけ。

でかいけつしました。

このアイデアを思いつくのが素晴らしいです。ありがとうございました。

animation GIFをJSで動的に読み込む 一度消して再度読み込むと最終形で表示されてしまう

サーバー側の仕様のようで、キャッシュ?がのこってしまうため一度 empty()で空にして、再度動的に追加しても最後のフレームになってしまう。
それをさけるために読み込むときに***.gif?=日付 という感じでタイムスタンプを入れればいける。

テストサーバーでサイト構築、問題なしからのwordpressに入れたら変に崩れるときがある。CSSが無視される?

すごくレアなケースぽいけど備忘録。

おそらくWordpressを何度も制作していると自分のテンプレ的なものが出来上がっていると思う。

今回も何も気にせずにそのような作り方をして必要な場所を書き換え~~~

本番にアップ!だがちょっとだけ崩れる。
Flexboxの指定が無視されている。
上下センター合わせにして、って言ってるのにそこだけ無視されている。

CSSを見比べても問題なし。

type=text/cssとか入れても変化なし。

最終的にわかったのが

<!DOCTYPE html>
<html lang="ja">

ココをちゃんと記載せずに

<html>

で書いてしまったことが原因でした。

emmetを今さら感たっぷりだけど少しずつ使いこなしたい 連番だったり数字途中からの連番だったり。

 

 

連番おしゃれ
要素のattrは[]で挟むこのときクォーテーション等は使わないので注意
連番にしたいときはその箇所を桁数だけ$にする

(li>a>p{Item Info Title}+img[src=img_item$$.jpg])*8

数値の開始番号を途中からにしたいときは
$の後ろに@をつけて開始したい数値を入れる
$$@8

sublime text3をインストールしてみたけど、htmlのヘッダとかどうするんだろうって思っていた

どうするんだろうっておもっていたけどEmmetで勝手に書き出してくれるんですね。。。すごい。。。

やり方はすごい簡単で「!」を書いていつものEmmetのショートカットを押すだけ。

自分だとCtrl+E

どんどんDreamweaverから決別できている。
今のところドリのほうが凄い使いやすけど。

slick.jsを利用していて、初期状態をdisplay:none;にしたらレイアウト崩れる

スライドショーの定番Slick.js、とてもよく活用させていただいている。

普通に使用する中では問題にならないが、場合によりslick部分のコンテンツを初期状態で非表示にしておいて、何かしらのアクションで表示させる場合、幅の取得が上手くいかないのか1枚目の画像(コンテンツ)が上手く表示されない。

ということは、表示のタイミングでSlickをリロードさせればよいっぽいのだけど余り検索しても見つからず。

公式サイトのこれか?っていう部分をはめ込んでみたらうまく動いた。
あっているのかは分からない。

$('.your-element').slick('setPosition');

と思いきやしっかりと答えを教えてくれている方がいらっしゃいました。
http://www.codelab.jp/blog/?p=852
と思ったら今回自分のサイトでは不具合発生。スライドの複製がものすごい量作成されてしまった。ので参考サイトをちょっと改造して

var slick = $(‘#slider’).slick({初期化パラメータ});

ここは同じ
なにかしらのボタンをクリックしたら・・・

slick.slick('setPosition');

これで動いた。

SVGを使って画像や動画をマスクしたいけどclip pathはまだまだ使いづらい?

どうにもこうにもclip pathが使いづらい。
センターにどうやって置くの?かさえよくわからない。

知識が無いならば力技発動。

要は見た目がマスクならいいじゃない。
そこで考えたのが動画(画像)の上にカバーするように見えたい部分を抜きにした画像を重ねちゃう。

少しだけ頑張った?のが画像じゃなくてSVGでマスク。拡大されても大丈夫なように。

イメージはこんなかんじ。

20160222

 

で、後はVIDEOタグ等で動画を設置して、その後にdiv class=”mask”的な空要素を置く。

<video class="mask" autoplay loop >
<source src="mask.mp4">
</video>
<div id="mask"></div>

CSSは特に装飾とかをしないのであれば

#parent{
position:relative;
overflow:hidden;
}
video{
width:100%;
height:auto;
position:relative;
}
#mask{
position:absolute;
width:100%;
left:0;
top: 0;
height:100%;
background:url(mask.svg) no-repeat center center;
background-size:cover;
}

SVGを作るときに余白を考えながら書き出さないと上記サンプルの背景黒部分が表示されないので注意。

汎用性ゼロな対応・・・

contact form 7とさくらサーバーの相性がよろしくない?

WordPressの問い合わせフォームとしては良く利用するcontact form 7。

大抵使用します。特に問題も無いし。

で、初めて問題発生しました。

再現性をテストしきれていないので、なんとも言えないがさくらサーバーで取得していないドメインをさくらサーバーに割り当てた状態のWordpressサイトでコンタクトフォームの管理者宛のアドレスを以下のようにすると500 Internal Server Errorが返ってくる。

例)
サイトURL:http://hogehoge.com
問い合わせの内容が届く管理者アドレス:info@hogehoge.com

こんな風にしちゃうと500 Internal Server Error の嵐。

管理者アドレスをGmailとかに変更するとそのエラーは無くなるので原因はここであることは間違いない。

が、Google先生に聞いても皆困ったばかりで回答が見つからず。

とりあえずテスト段階だが、MW WP Formを利用すれば問題ないっぽいのでそちらを利用してみる。