CSSでグロー効果っぽいやつ
イラスト制作でよく使うフィルター効果を、CSS3 filterでも実現できないかなと思ってやってみました。イメージとちょっと違ったけどこんな感じに。わかりやすくするためにアニメーションさせています。 cssはこんな感じ。 コントラスト上げて、少しぼかして、透明度下げて、ブレンドモード覆い焼き。元の絵もグロー効果付けてる...
カテゴリアーカイブ
技術・小ネタ
-
-
初回訪問時のみダイアログ表示
GDPR対策とかなんとかで、初回訪問時のみダイアログを表示する機会も増えてるようなのでまとめてみます。 HTML CSS jQuery ページ読み込み完了時にcookie（[onceDialogAccessFlg]でcookie名指定）があるか判定して、なかったら表示します。閉じるボタンを押すと該当のcookieが保存...
-
WordPressのテーマメニューをレスポンシブでハンバーガーメニューにする
自作テーマでタイトルのような設計をしたい場面がよくある気がするんですが、検索するとプラグインを使った実装以外まとまった情報がなかったのでざっくりまとめてみます。テーマメニューの設定がされている状態で、jQueryとCSSを追加します。 jQuery クラス名は適宜調整してください。[menu-global-nav-co...
-
要素の高さを画面100%に調整する
要素の高さが画面100％に足りないときにフッターの位置がおかしくなるのを防ぐための調整です。jQueryとCSSの2パターン掲載しています。 まずはjQuery。 画面内の要素のうち、高さ調整したい要素(targetItem、1要素のみ)と高さ調整しない要素(staticItem、配列指定可)を指定して使います。マーク...
-
速度改善でとりあえずやったこと
あまりに読み込みが遅いのでまずはすぐにやれるところだけでもやってみようかと。 画像の遅延読み込み プラグイン「Lazy Load by WP Rocket」で、画像を遅延読み込みさせてレンダリングブロックを軽減してみました。設定のチェックは全部入れてます。 キャッシュの利用 プラグイン「WP Super Cache」で...
-
WSLの導入
WinとMac、制作環境としてどちらを使うか、どちらが優れているか、とは昔からよく言われることですが、個人的には、どっちでも慣れているほうを使えばよいと思ってます。今のご時勢、ソフト面ハード面ともに、極端なメリデメはなくなっていますし、どちらかでしか実現できない機能も稀になりました。 カラープロファイルの扱いが必要なデ...
-
GDPRざっくりまとめ
まったく対応していなかったり、振り回されて過剰に反応したりしてるサイトをちらほら見かけるようになってきたので、ざっくり概要と対応についてまとめ。ちなみにちょうど今日、gaとかにもそれに関わるインフォメーションが出てました。 GDPR。EU一般データ保護規則（General Data Protection Regulat...
-
Web用語ざっくりまとめ
最終的にユーザーがChromeやIEなどのブラウザでWebページを表示する過程と、そのあたりの用語を、コンテンツから順に、ブラウザにたどり着くまでざっくりまとめ。ほんとにざっくりなので気が向き次第追加するかも。 コンテンツ サイトのページ、リソース（画像やhtmlファイル等）。 html ハイパーテキストを記述するため...
-
HTTP/2対応
HTTP/2の話。「HTTP/2.0」とか「HTTP2」とかいろいろ表記あったのが「HTTP/2」で決まったみたい。Webのプロトコルの新しいやつ。 例のごとく細かい話はしないですが、ざっくり言うと、これに対応すれば通信効率上げたりできます。サーバ周りの話になるとややこいのでフロントエンドに関わるの話で言うと、並列処理...
-
常時SSL対応
ついこの間まで、常時SSL対応をしているほうがマイノリティだった気がするんですが、昨年2017年8月の時点で、https接続の割合が50％を超えたらしいですね（参考：Chrome で HTTPS 経由で読み込まれたページの割合（国別））。 それ自体は良い方向の流れだと思いますが、私が初めてWebサイトを作った頃と比べて...
1/2