HTML手打ちのWebサイト（！）に、 手作りPHPのお問い合わせフォーム（！）を載っけた状態で 何年も使っていたんだけどRecaptcha v2ではスパムが防ぎきれておらず、 Recaptcha v3に変えてみたら、挙動が不安定になってしまった。そこで手作りPHPフォームを卒…

レスポンシブのスマホ表示でサイト全体のフォントサイズが小さくなっても、font-size:90% とか 0.9em で設定した箇所を14px以下のサイズにはしたくない！ みたいな時に。mgmgblog.com min関数、max関数 どうやらfont-sizeだけではなく、marginなどにも使える…

Instagram投稿の埋め込みコードを取得して、 とあるWebページに埋め込んだところ、iPhoneのChromeでだけ、コンテンツが表示されなかった。正常に動いた場合、blockquoteの部分がscriptによってiframeに書き換えられるっぽいんだけど、その肝心のscriptが、ど…

WordPressサイトの中の、 人名に使われている とある1文字が異体字で サイト全体に使っている 'Noto Sans JP' では希望する字体にならなかったので、 その一文字だけにspan class="moji"を付けて、別のWebフォントを指定したい。PHPで置換かな…と思ったが、J…

背景画像のSVGがスライドショーのようにフェードで切り替わっていく、というのをやりたかった。 SVGである理由 綺麗だから 背景画像である理由 SVGだと、背景画像にしないとレスポンシブでのサイズ変更ができないから CSSのanimationで実装したらiOSのChrome…

普通にSVG画像を擬似要素のcontentとして指定すると、 大きさを変更することができず、不便である。 div:before{ content:url('../../../img/icon.svg'); width:20px; height:20px; } ↑ これだとwidthもheightも効かないそこで、背景画像として指定すると良…

マウスオーバーしたら、画像を拡大＋オーバーレイを薄くする、というのをやりたかった。 a::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, .3), rgba…

大好きなWordPressテーマ、SWELL。 SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマ SWELLにはlightbox機能（Luminous Lightbox）が標準搭載されており、別途で画像にリンクを設定していない場合は、画像をクリックすると拡…

WordPressのブロックエディターの「ギャラリー」機能。複数画像を並べるのに便利なんだけど、横長画像と縦長画像が混在した場合、縦長画像の方に高さが統一されるため横長サムネの行と縦長サムネの行が存在してしまったりして、見た目がちょっと微妙だった。…

英語のページ（URLに /en/ が含まれる）全てにおいて、 ヘッダーロゴのリンク先を英語版のHomeに設定したかった。body閉じタグ直前にこちらを… <script> let url = location.href; let pattern = '/en/'; if(url.indexOf(pattern) > -1){ let link = document.getEle…

そんなことある？って感じなんだけど、サイトの多言語化対応で、英語・アラビア語のサイトを作っている。アラビア語って、右から左に書く言語。なので当然サイトが全部 dir="rtl" になるってワケ。そりゃレイアウト崩れるとこも出てくる。 CSSで崩れたとこ直…

多言語サイトを作っていて、「検索」を「Search」に変えたかった。 const hoge = document.querySelectorAll('#search input')[0]; hoge.placeholder = "Search"; ほんとうに些細なことなんだけど、1行目末の[0]が必須だった。 これに気づかなくて、 なかな…

別ファイルで用意するの正直めんどくせ〜と思っていたが、 メディアクエリで書けば簡単 1. CSSファイルをmedia="all"で読み込む <link rel="stylesheet" media="all" href="~~~~/style.css"> 2. @media print{ で書いていく /**********印刷用**********/ @media print{ body{ color: #000; background: transparent; }</link>…

単語じゃなくても、クライアント様がブログ本文に入力した装飾 「●○●○●○●○●○●○●○●○●○●○●○●○●○●○」 みたいなやつで崩れたりする。 （そういう装飾を自分では使わないから、予測できなかった）単語の途中でも改行されるようにCSSを書き加えるんだけど、 いつも…

黒のベタ塗りだとカッコつかないな…という時、うっすら斜めドットにすると良い感じである。 background: #3d3d3d; background-image: radial-gradient(#333 20%, transparent 20%), radial-gradient(#333 35%, transparent 35%); background-repeat: repeat;…

WordPressを入れるほどじゃないけど、HTML手打ちもバカバカしいので ヘッドレスCMSを利用して、更新を簡単にしたいな〜と思ったのだった。microcms.io APIスキーマ 今回作るのは、タイトルすら不要なサイト。テキストエリアだけ。 フィールドID：textField …

html、cssは省略します WordPressの時 jQuery(function($){ //ここに色々書く。$(function(){ はダメ }); ページを読み込んだら、ってわざわざ言いたい時 window.addEventListener('DOMContentLoaded', function(){ // ここに書く。$(function(){ }); だとエ…

JavaScriptがそもそも苦手すぎて、 どうもVueとかReactをやる気になれない。結局たよりになるのはjQuery、、、 気をつけたところ Scriptは、対象となるDOM要素（#loader-bgなど）の後ろに書かないと、 エラーが出ることがあるっぽい。 追記2 一瞬ちらっと見…

たとえばtop指定→bottom指定に 大画面の時は上部に、スマホは下部に表示したいな〜っていうとき nav { position:fixed; top:16px; left:16px; } @media screen and (max-width: 600px){ nav { bottom:16px; } } ってすると、bottomが効かない。 topが優先さ…

メールフォームは たしかこれを使った www.php-factory.net reCaptcha 「私はロボットではありません」というやつ reCAPTCHA: Easy on Humans, Hard on BotsGoogleアカウントにログインした状態で上記にアクセスし、 「reCAPTCHA v2」を選択して登録し、API…

JSONデータをPHPでごにょごにょして....というのを自作するのは骨が折れるので、プラグインを使うことに。 下準備 ↓を参考に、Instagramの開発者ページからアプリケーション登録を行っておく。 teamnaporitan.com instafeed.js instafeedjs.comheader部分で…

なんだかんだ言っても、ECサイトや企業サイトではなく、個人のページとか、単純な作りのページであればまだまだハンバーガーメニューは有効だと思うのです。「ハンバーガーメニューはクソ」とか言われてた頃に比べて、浸透度も高まってるだろうし。 仕様 右…