あたおか

4級個人事業主

あたおか

4級個人事業主

MW WP FormでYubinBango.jsが動かない時の最後の手段

WordpressでMW WP Form使ってる方は多いと思いますが、YubinBango.jsを使おうとすると相性が悪いなぁと思います。 対処法はWeb上に転がっていますが、ググった対処法では解決できないケースがあったのでその対処法をメモしました。 Formタグにに「h-adr」クラスを付ける方法MW WP Formはformタグに対して自由なタグをつけることができないので、下記のようにJSで無理やりクラスをつけてあげる対応方法を良くみます function mwfor

あたおか

    • positionプロパティから逃げない（Tipsあり）

      一昔前までのマークアップは、「float」が使いこなせるかどうかが一つの大きな壁だった印象ですが、現在では「position」を使いこなせるかどうかでコーダーの技量を測れるように思います。 長くマークアップをしているコーダーさんでも、以外と「なあなあ」で使っている方もいらっしゃいますので、改めて「覚えておくと今後楽になるかもしれない」点を幾つか挙げさせていただきます。 positionプロパティとはpositionプロパティをざっくり言うと「要素をどのように配置するか」を表

      あたおか

      • マークアップを依頼する前に「ディレクター」が注意すべきポイント

        私は普段マークアップをメインに活動しているつもりですが、Webディレクターとしての引き合いを貰うこともあり、「クライアント」「デザイン」「マークアップ」の橋渡しすることも多いです。 ディレクターの立場でマークアップの仕事を依頼する際に気を付けているポイントがいくつかあるのですが、そういったポイント全く押さえられてない雑なマークアップ依頼を受けることも多々あります。 そういった経験を踏まえ、押さえておかないと「思ってたのと違う」ものが出来上がってしまいがちな、注意すべきポイント

        あたおか

        • Core Web Vitals(CWVs)を意識するとカルーセルのライブラリは何を使うべきか

          Core Web Vitalsを意識してPage Speed Insightsとにらめっこしていると、CDNで読み込んでいる外部のライブラリから受ける影響は極力少なくしたい気持ちが湧いてきます。 サイトの仕様として、トップ画面に鎮座するカルーセル（スライダー）を無くすことは難しいケースが多いと思いますので、せめて影響の少ないライブラリはどれかという観点でスコアを測定してみました。 レギュレーションどういった形での計測が望ましいか迷いましたが、今回は「ライブラリ以外の要因を極

          あたおか

        マガジン

        • HTML/CSS
          4本

        記事

          IEサポート終了後に使いやすくなるCSSセレクタ（疑似クラス、疑似要素）を今のうちに覚えておこう

          古くからあるレガシーシステムを保守されている方以外の100%が歓喜した「2022年6月をもってIEサポート終了」というニュースから約1か月。 IEのサポートが終了したら「display:gridが使える！」「position:sticky;があればこの実装が楽になる！」と今までIEをサポートしないといけないせいで使えなかったプロパティに思いを馳せている方は多いと思いますが、意外と「あるCSSセレクタが使える」かどうかで、CSSの書き方がシンプルになるかどうか差が出る部分は多い

          あたおか

          IEサポート終了後に使いやすくなるCSSセレクタ（疑似クラス、疑似要素）を今のうちに覚えておこう

          あたおか

          運用中サービスに対するCore Web Vitals(CWVs)対策まとめ【追記予定】

          先月くらいまでは日本語での情報が少なかったCore Web Vitals対策ですが、SEOスコアに影響が出始める期日が迫るにつれ、まとまった情報が見つかるようになってきました。 ただ、「そんな対策、こんな小さい案件じゃできないよ」という内容も多いですので、現実的な範囲で何ができるかという観点でまとめてみたいと思います。 ※Page Speed Insightsの表記を前提にしています 最も効果の大きい対策：Webフォントを辞める個人的に最も効果が大きかったのは、「Webフォ

          あたおか

          運用中サービスに対するCore Web Vitals(CWVs)対策まとめ【追記予定】

          あたおか

          【Flexbox】孫要素まで高さを揃える方法 #2 li全体をリンクにしたい場合

          備忘的に書いた以前の記事で、「詳しくはこちら」のようなボタンがあることを前提にFlexboxで良くあるサンプルを作りましたが、稀に良くある要望として「リスト全体をリンクにしたい」というものがあると思います。 以前の書き方の場合、階層が深くなるために以前の書き方では解決しないので、解決策を考えてみました。 「li > a > 高さをそろえたい要素」にするとうまく行かない ↑の画像のようにリストのボックス全体をリンクにしたいと要望があった場合、よくある書き方は下記のような形だ

          あたおか

          【Flexbox】孫要素まで高さを揃える方法 #2 li全体をリンクにしたい場合

          あたおか

          【Flexbox】孫要素まで高さを揃える方法と、うまく行かない時の対処法（追記あり）

          Wordpress等で記事の一覧をFlexboxで横並びにすることはよくあると思います。 デザインカンプなどでは「良い感じ」の文字量で作られていることが多いので気にならなくとも、実際に運用が始まった後に「記事毎にタイトルの長さが違っているので高さが揃わず気持ち悪い」ということはよくあると思います。 自分でも良く忘れるのでので、備忘録も兼ねて。 完成形まず、目指すべき完成形はこんな感じです。 分かりやすいようにタイトル部分に背景色を付けましたが、タイトル部分の高さが揃ってい

          あたおか

          【Flexbox】孫要素まで高さを揃える方法と、うまく行かない時の対処法（追記あり）

          あたおか

          ディスコミュニケーションが生み出すアウトプットの突然変異は我々を何処に連れて行くか

          20代の終わり頃から、ディスコミュニケーションという言葉が長く心のどこかに引っかかっていた気がする。 「何か響きが格好良い」 程度のきっかけ（あるいはZAZEN BOYSがもたらした福音）から始まった引っ掛かりが、いつしか言語を理解する脳内のブローカ野にとどまるのみならず、むしろ脳内のネットワークの中枢に鎮座ましましているロストテクノロジーで作られたブラックボックスのの如き様相を示し始めた。 はじめは小さな引っ掛かりのようなものだったそのブラックボックスも、ソーシャル・ネッ

          あたおか

          ディスコミュニケーションが生み出すアウトプットの突然変異は我々を何処に連れて行くか

          あたおか