CSSで冊子風エフェクト
毎回PhotoShopとかで冊子風に加工するのが億劫だなと思って作ってみました。けっこう冊子風の画像を掲載してるサイトって多いですけど、CSSで作れば若干労力が減る気がします。 こんな感じになります。HTML側で、img要素を囲むタグ（divとかfigureとか）に「sassi」クラスを追加してます。以下CSS。 若干...
カテゴリアーカイブ
技術・小ネタ
-
-
CSSで缶バッジ風のエフェクト
ざっと探した感じだとやり方まとめられてるサイトが見当たらなかったのでまとめてみます。缶バッジ風というか、ほとんどリッチボタンと同じ感じですが。同人系サイトだとわりと使いどころがありそうな気がします。 こんな感じとか、 こんな感じ。HTML側で、img要素を囲むタグ（divとかfigureとか）に「badge」クラスを追...
-
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 ハイパーテキストを記述するため...
1/2