とりあえず以下を参考に２つのプラグインをインストール
- All In One WP Security & Firewall
- Edit Author Slug
https://keiei.co/all-in-one-wp-security-firewall/
こちらでAll In One WP Security & Firewallの利用方法を丁寧に説明してくれています。
すごく助かりました。
IE11でtransitionがうまくいかないときは該当要素にflexを指定してる可能性があり？
Chrome、Firefox、Edgeでは問題なくtransitionアニメーションをしているのにIE11だとアニメーションが発動しなかった。
原因は該当要素にflexを指定しているせいでアニメーションがうまくいかなかった。cssでallにしてるせいかもしれないけど。
疑う箇所として記憶しておこう。
たまに発生するError: File to import not found or unreadable: ＊＊＊ の対応方法
いろいろなサイトをみて、ファイルのパスをなおしたり ファイルの権限を変えてみたりしてもうまくいかず。
最終的にはgulp-waitでsassのコンパイルを遅らせることで無事解決。
gulp.task('sass',function(){
gulp.src(['sass/**/*.scss'])
.pipe(wait(500))
こんな感じで最初に遅らせる。
var wait = require(“gulp-wait”); も忘れずに。
参考サイト
https://github.com/olefredrik/FoundationPress/issues/731
iphoneでtwitter widegetのiframeが横にはみ出るバグの修正
twitterのタイムラインwidegetを使うときにレスポンシブにしたいと思いぐぐるとよく書いてあるのが
<a class="twitter-timeline" data-width="100%"
のくだり。
幅100%だから常に親に合わせる的設定なんだけど、iphoneで見ると親を無視してとんでもない幅になっている。
jsで親要素の幅を取得して、設定してもうまく行かず悩んでいたところ以下のサイトを発見。
iPhone7でTwitterのウィジェット（iframe）がはみ出す【解決】
簡単にいうとレスポンシブで利用しようとしている最大幅より大きい値の数値を強制的にwidthで設定をしてしまえば、ブラウザ側の解釈として大きすぎるのでwidthは無視、max-widthを参照しようとなるわけ。
でかいけつしました。
このアイデアを思いつくのが素晴らしいです。ありがとうございました。
ここ最近頻繁にWindows10がフリーズする原因はWindowsUpdateのKB4054517が原因かもしれない
12月にはいって作業中に急にフリーズ→カーソルは動くけどクリックしてもなにも反応しない→強制終了
を1日何回もやらされることに。
もともとESETと相性悪いみたいで安定していなかったからそのせいかと思ったけどTwitterで「Windows フリーズ」と検索するとみなさんも同じようなタイミングで発症中
そんな中以下のような記事を発見。
https://qiita.com/Kaguya_2324/items/81563dc0b5da377d9386
ほほう、とおもいWindowsUpdateをチェックしてみると上記更新を何度もインストール⇔失敗を繰り返していた。
ので参考サイトを手本に手動でいれてみることに。
参考サイトで情報が足りなくて困ったのは
Windows Update カタログ にアクセスし、KB4054517で検索を掛ける。一覧からPCに適したファイルをダウンロードする。
http://www.catalog.update.microsoft.com/Home.aspx
でいっぱい表示されてどれがどれだか分からない。
そんなときは先ほどDLしたwushowhide.diagcabを再起動してHideした更新プログラムを表示ってやれば詳細が分かります。
あとは参考サイトにそって作業すれば問題なくインストールできると思われます。
さてフリーズはおさまるか。
position:fixed;にした要素の子にoverflow-scrolling: touch;を設定するとフリーズすることがある
ナビの固定などでヘッダーを固定、その子要素のナビがクリックで階層表示されるみたいなことをやっているとfixedした要素が画面の高さを超えることが多々ある。
そういうときにナビに対してoverflow-y:scroll;をしてスクロールできるようにするのだけどデフォルトのままだとカクカク
そのため
overflow-scrolling: touch;
を設定してスムーズになるようにするのだが画面の高さ以上にスクロールしようとすると画面が数秒フリーズする。
原因調べていたら以下のようなサイトの情報が。
http://webdev.jp.net/ios-safari-fixed-overflow-scrolling-bug/
諦めるしか無いのか・・・
と思っていたけど試しに親要素自体に
overflow-scrolling: touch;
を設定してみたらバグなくなった。
たしかfixedとoverflow-scrolling: touch;は一緒にかけるな。的発言があったような気もしつつ。
まぁいいか。
slick.jsでテキストを選択できるようにしたいとき
.slick-slide要素に対してuser-select:none;が指定されているのでそれをautoに上書き。
iphoneなどのスマホで横スクロールメニューを作るけど横幅設定がめんどうくさい
今まではJSなどで親要素の幅を取得してそれを設定して～～
とやっていたが、とても参考になるサイトを発見。
https://moriawase.net/horizontal-scroll
上記のサイトだとinline-blockを利用しているがflexで出来たら良いね？って思ったら出来た。
inline-blockの要素間の隙間調整がめんどくさいなと思ったけど解決。
.parent-parent{
overflow-x: auto;
}
.parent{
display: flex;
white-space: nowrap;
}
.child{
お好きなように
}
多分これでいける。
参考サイト様 ありがとうございました。
animation GIFをJSで動的に読み込む 一度消して再度読み込むと最終形で表示されてしまう
サーバー側の仕様のようで、キャッシュ？がのこってしまうため一度 empty()で空にして、再度動的に追加しても最後のフレームになってしまう。
それをさけるために読み込むときに***.gif?=日付 という感じでタイムスタンプを入れればいける。
svgをbackground-sizeで変形しようとしても無視されるとき
jpgやpngだと当然のようにcover containが反応するのにsvgを背景にしたとき縦横比を変えることができませんでした。
Sketchなどで書き出せばその辺元々クリアなのかもしれないが、イラレで書き出してダメでした。
設定しだいではイケるのかもですが。
そんなときはsvgを何かしらのエディタで開いて
preserveAspectRatio=”none”
を追記すると変形してくれるようです、