CSS 【Tailwind CSS】ラベルの書き方
シンプルな赤いラベル<span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold"> ○○</span>bg-red-500 → 背景色を赤に...
CSS 
CSS 【SEO】CSS（JS）の圧縮／PageSpeed Insights
ページの速度改善についてです。ページの速度を速めることは、SEO対策として大切になってきます。わたしは、ランディングページを作成していましたが、ページの表示速度を速めることはランディングページの利便性というのを改善することにつながり、サイト...
CSS 【CSS】画面が左右に動いてしまう問題 ②
サイト制作をしているときに、画面が左右に動いてしまい、スクロールが不安定になってしまうことがありました。そこで対策方法がわかったので共有します。最初に、はみ出ている要素がないか確認します。padding等で、横幅100％からはみ出しているこ...
SQL 【SQL】GoogleBigQuery メモ
sample-- SELECT * FROM `booleanoid.limo_orders.orders`（すべて取り出す）-- SELECT * FROM `booleanoid.limo_orders.orders` WHERE or...
SEO 【SEO】PageSpeed Insights「第三者コードの影響を抑えてください」をタグマネージャーを用いて対応
PageSpeed Insights で、ページの表示速度がどのくらいなのか計測することができます。ページの表示速度を上げることは、SEO対策として重要です。私の過去の記事でも、Wordpressで作成したサイトの速度を上げることについて掲...
SEO 【SEO】レイアウトシフトメモ
自分用のメモとして残しておきます。数ミリ秒の低下でもペナルティになる累積レイアウトシフト(CLS)は、PageSpeed Insights でわかるCLS判定値が0.1以下ならOK、0.1以上なら要改善・0.1未満⇒良好・0.25以下⇒改善...
SEO 【SEO】画像をAVIFに！メモ
自分用のメモとして残します。上記サイトはGoogleが提供している、ブラウザ上で画像を圧縮できるサイト。画像の容量が大きいと表示に時間がかかり、ユーザーが離脱してしまう。簡単に言うと、AVIFはあまり画質をそこなわずに圧縮してくれるものであ...
SEO 【SEO】サジェストキーワード メモ
SEO対策に「サジェストキーワード」を使用した対策があります。これを使用すると、Googleでその言葉で何が調べられているかわかります。例えば、鍵屋の場合「鍵 トラブル」で検索すると「鍵 トラブル 業者」のように表示される。鍵トラブルで検索...
Wordpress 【WordPress】Contact Form7 スパムメール対策
スパムメールがたくさん来るようになりました。放置しておけばいいかと思いましたが、個人情報の漏洩やサイトが改ざんされるリスク、ウイルス感染のリスクがあるようで、対策が必要みたいです。私がやったことをご紹介します。チェックボックスの設置コンタク...
Github 【Github】マークダウンリンクを作成する
(url)このように記載すれば文字にリンクがつきます。
Github 【Github】マークダウン画像の大きさを変更するメモ
<img src="ここに画像のURLが入る.jpg" width="50%">普通に画像を貼り付けると、大きく表示される↓!(これを<img src="ここに画像のURLが入る.jpg" width="50%">これに変えると大きさが変わ...
HTML パンくずリストメモ
SEO効果JSON-LD、microdata、RDFamicrodata、RDFaという書き方がある。JSON-LD形式は、現在Googleの構造化データのマークアップとして推奨されている。JSON-LD形式を書いても、ページには表示されな...
CSS 【CSS】背景の区切り
オシャレなサイトやLPページでは、セクションの分かれ目でデザイン性のある背景の区切りが使われています。このサイトでは、素敵な区切りを作成できるもので、CSSをコピペすることができます。三角の区切りこんな感じの区切りを作ります。<!-- 背景...
CSS 【サイト作成】画面が動いてしまう問題 ①
サイト作成し、スマホで確認した際に、画面が左右に動いてしまうことがありました。縦のスクロールだけでいいのに、横にスクロールできるような感じです。そのままにしてもいい感じもしましたが、LPの作成だったので訪問してくれるユーザーが煩わしくてペー...
CSS 【CSS】リストの改行をそろえる、アイコンを画像にする、アイコンと文字の高さを揃える！
改行を揃える方法これをこれにします。/* リストの改行の位置をそろえる */.list { margin-left: 2.3em; text-indent: -2.3em;}大きさは、アイコンの大きさによって調整します。リストのアイコンを画...
CSS 【CSS】オシャレな境界線と、白い線を消す
ギザギザ、尖り、丸い境界線が作れるオシャレな境界線を作ることに関しては、別のページでも紹介しています。境界線をつけると、白い線がついてしまう問題境界線をCSSで作ると、白い線ができてしまうことがあります。これを解消する方法をご紹介します。c...
CSS 【CSS・js】ヘッダーをスクロールに合わせて表示・非表示させる（jQueryなし）
header { position: fixed; top: 0; left: 0; z-index: 99; height: 5.5em; transition: transform 0.3s 0.1s;}/* スクロールするとヘッダーが...
CSS PNG形式の画像に影をつけたいけどうまくいかない！
PNG画像で、周囲の背景は透過しているとき、「box-shadow」で影をつけると、透過しているところにも影がついてしまいました。わかりにくいのですが、角丸なのに、四角として影がついており、白くなってしまいます。この時に便利なのが、filt...
HTML 謎の空白「$#xfeff」
サイト作成をしていた際に、1つのページだけ謎の空白ができていました。そこで、デベロッパーツールで調べてみると、そこの部分に「$#xfeff」というものが入っていることに気づきました。スマホでも確認してみると、余白ではなく、改行がされている様...
JavaScript vue.js はじめかたメモ
環境作り① node.js ダウンロード詳しくは下記記事参照② VSCode起動③ 表示→ターミナル を開いて「npm create vue@latest」と入力④ Ok to proceed? (y) とでてくるため、「ｙ」と入力⑤? P...