Web List

切り抜き

Nuxt3でheadlessuiとvue advanced cropperを使って画像を切り抜いた。

奇っ怪

変更が参照になってて、変更場所を特定するのに苦労した話。

カンマ

Nuxt3とGSAP ScrollTriggerでカンマ含み数字をカウントアニメーションさせる。

ふわっとメニュー

Nuxt3とTailwind CSSでふわっとフェードでメニューを表示する。

効かない

TailwindCSSでhidden sm:blockが効かないのを効かせる。

色彩変化

GSAPを使って背景のグラデーションを変化させる。

シェア

SNSシェアボタンをWordPressで自作実装する。

タイポ

グリッドで失敗し、svgで文字組みする。

Nuxt3でpluginsのファイルを呼び出すとtsエラーになる。

順番

Nuxt3でtransitionした時の順番が思ってるのと違った。

崩れる

Vuetify3でpageTransitionしたら、footerが崩れた。

アップアップ

app.vueに何を記載しても反応がないを解決する。

ふぉーむ

Nuxt3でNetlify Formsを動かしてみる。

ねとりふぁい

NetlifyにNuxt3をSSRでデプロイする。

無限ループ

CSSとJSで無限ループを実装する。

フレワク

Nuxt3+Vuetify3で実装するも相変わらずハマる。

バリフォー

Nuxt3でvuetify3とVeeValidate4を実装するのに手こずる。

北海道コロナ週報

北海道の新型コロナウイルス感染状況を可視化する。

勝手にリフレ

Nuxt3でリフレッシュされる現象に悩まされる。

イライラ

スマホでクリックを2回押さなきゃを改善する。

要不要

Nuxt3でnuxt-securityを導入したが不要だった件。

ハマる

Nuxt3でnuxt-og-imageにハマる。

怪しいチャート

Nuxt3でApexChartsを使い多軸yaxisと複数のsiriesを紐付ける。

ハマる

Nuxt3でcreateElementしたらCSSが効かないを解消する。

縦スラ

横スライダーを縦スライダーにする話。

条件分岐

Nuxt3でv-bindのclassに複数の条件分岐を設定する。

円動

円グラフっぽいアニメーションを実装する。

上下左右

カーソルの入出方向で、ホバーアニメーションの方向を変える。

縦スク

縦スクロールによって、既読割合を表示する。

求人情報の構造化

構造化データをWordPressに実装し、Google for jobsに情報を伝える。

人気投票

JSでカウントし、JSONで保存。クリックした後のアニメーションを実装する。

整形し、書き出す

csvで取得し、phpで整形して、JSONで書き出す。

画像設定

YoastでデフォルトのOGP画像を設定する。

チェックする

WordPressのテーマをチェックするTheme CheckとQuery Monitorを導入。

検索で強調する

WordPressの検索結果で、ACFの検索結果を検索ワードで強調する。

止めてやる

functions.phpでvar_dump()して変数の中身を知る。

絞り込む

category.phpとtag.phpで絞り込んで一覧表示する。

投稿者を加える

カスタム投稿タイプで管理画面一覧に投稿者を表示させる。

スマホブラウザ

スマホブラウザの外縁色を指定する。WordPress関係ないかも。

取得し、戻す

swiperで文字を動的に扱うための細工です。

フィットする

inline-blockの代わりにfit-contentで問題を解決する。

リンクが効かない

疑似要素を使ったらリンクが効かなくなったのを修正する。

チラつく

Swiperを使った際、Safariで画像がチラつくのを修正する。

小説を依頼

chatGPT3.5に小説を書くことを依頼。

仕事の範囲

無償でWebディレクションをするべきか、せざるべきか、悩ましい。

愛だろ、愛っ

危機感からOPEN AI chatGPTを触ることに。

ザンプが逝く

Xamppで頻発するMySQLエラーから復帰する。

メールフォーム

mb_send_mail()でメールの不受信や文字化けを解消。

変わってた

wordpressのテーマ作成方法が変わったみたい。

分割そして挿入

swiperの.swiper-slideを動的に挿入。

ハイライト

barba jsで、遷移後にHighlighting Code Blockを再びハイライトする。

もっと見るボタン

JQueryから普通のJSに書き変える。そして、長くなる。

ナクストのエラー

Node.jsのバージョンアップで、NUXT JSにエラーが発生。解消方法を発見。

アニメーションしない

display: noneとopacityは併用できない。

ブレンドモード

mix-blend-modeで乗算やオーバーレイを適用する。

アンダーライン

text-decorationの機能が豊富になっていた。

レスポンシブ

画像をトリミングするobject-fit。

ファイル操作

Node.jsを使ってデスクトップ上でhtmlファイルを大量制作。

セレクトフォーム

jQuery Plugin Multiple SelectでMulti Select以外に、Single Selectを適用する。

北海道の病院稼働状況

オープンデータを使い、北海道の病院稼働状況を制作しました。

セキュリティ対策例

Wordpressのセキュリティ対策例について調べました。

全画面表示

jQuery Pluginのlightcaseで全画面表示。

リンク

リンク集。

ルーツ

自分の苗字を探すブログ。