TECH-BLOG

Web制作関連の記事を掲載しています。

  • CSSで冊子風エフェクト

    0件のコメント

    毎回PhotoShopとかで冊子風に加工するのが億劫だなと思って作ってみました。けっこう冊子風の画像を掲載してるサイトって多いですけど、CSSで作れば若干労力が減る気がします。 こんな感じになります。HTML側で、img要素を囲むタグ(divとかfigureとか)に「sassi」クラスを追加してます。以下CSS。 若干...

  • CSSで缶バッジ風のエフェクト

    0件のコメント

    ざっと探した感じだとやり方まとめられてるサイトが見当たらなかったのでまとめてみます。缶バッジ風というか、ほとんどリッチボタンと同じ感じですが。同人系サイトだとわりと使いどころがありそうな気がします。 こんな感じとか、 こんな感じ。HTML側で、img要素を囲むタグ(divとかfigureとか)に「badge」クラスを追...

  • CSSでグロー効果っぽいやつ

    0件のコメント

    イラスト制作でよく使うフィルター効果を、CSS3 filterでも実現できないかなと思ってやってみました。イメージとちょっと違ったけどこんな感じに。わかりやすくするためにアニメーションさせています。 cssはこんな感じ。 コントラスト上げて、少しぼかして、透明度下げて、ブレンドモード覆い焼き。元の絵もグロー効果付けてる...

  • 初回訪問時のみダイアログ表示

    0件のコメント

    GDPR対策とかなんとかで、初回訪問時のみダイアログを表示する機会も増えてるようなのでまとめてみます。 HTML CSS jQuery ページ読み込み完了時にcookie([onceDialogAccessFlg]でcookie名指定)があるか判定して、なかったら表示します。閉じるボタンを押すと該当のcookieが保存...

  • WordPressのテーマメニューをレスポンシブでハンバーガーメニューにする

    0件のコメント

    自作テーマでタイトルのような設計をしたい場面がよくある気がするんですが、検索するとプラグインを使った実装以外まとまった情報がなかったのでざっくりまとめてみます。テーマメニューの設定がされている状態で、jQueryとCSSを追加します。 jQuery クラス名は適宜調整してください。[menu-global-nav-co...

  • 要素の高さを画面100%に調整する

    0件のコメント

    要素の高さが画面100%に足りないときにフッターの位置がおかしくなるのを防ぐための調整です。jQueryとCSSの2パターン掲載しています。 まずはjQuery。 画面内の要素のうち、高さ調整したい要素(targetItem、1要素のみ)と高さ調整しない要素(staticItem、配列指定可)を指定して使います。マーク...

  • 速度改善でとりあえずやったこと

    0件のコメント

    あまりに読み込みが遅いのでまずはすぐにやれるところだけでもやってみようかと。 画像の遅延読み込み プラグイン「Lazy Load by WP Rocket」で、画像を遅延読み込みさせてレンダリングブロックを軽減してみました。設定のチェックは全部入れてます。 キャッシュの利用 プラグイン「WP Super Cache」で...

  • あんぷら屋はWordPressに移行しました。

    0件のコメント

    更新頻度やらメンテナンス性やら考えた結果、あんぷら屋をWordPressに移行することにしました。することに、というかしました。ブログっぽくすることで今後の更新頻度を上げていきたいところです。 構成としては、イラストや漫画関連の更新は「ART-BLOG」、Web関連の記事は「TECH-BLOG」という感じで分けています...

  • WDCP2018行ってきました

    0件のコメント

    「Web Design Creative Plus - 今とこれからのウェブデザイン」に行ってきました。最近のWebの情報をいろいろ勉強させていただいたので、復習がてらさらっとまとめます。自分用のメモを読みやすくしただけですが、驚いたことも多々あったので共感できるところがあるかもしれません。 AIで変わるこれからのWe...

  • WSLの導入

    0件のコメント

    WinとMac、制作環境としてどちらを使うか、どちらが優れているか、とは昔からよく言われることですが、個人的には、どっちでも慣れているほうを使えばよいと思ってます。今のご時勢、ソフト面ハード面ともに、極端なメリデメはなくなっていますし、どちらかでしか実現できない機能も稀になりました。 カラープロファイルの扱いが必要なデ...