サイト作成 【SEO】PageSpeed Insights「第三者コードの影響を抑えてください」をタグマネージャーを用いて対応
PageSpeed Insights で、ページの表示速度がどのくらいなのか計測することができます。 ページの表示速度を上げることは、SEO対策として重要です。 私の過去の記事でも、Wordpressで作成したサイトの速度を上げることについ...
サイト作成
サイト作成 
未分類 【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で作ると、白い線ができてしまうことがあります。 これを解消する方法をご紹介し...
CSS 【CSS・js】ヘッダーをスクロールに合わせて表示・非表示させる（jQueryなし）
header { position: fixed; top: 0; left: 0; z-index: 99; height: 5.5em; transition: transform 0.3s 0.1s; } /* スクロールするとヘッダ...
HTML 謎の空白「$#xfeff」
サイト作成をしていた際に、1つのページだけ謎の空白ができていました。 そこで、デベロッパーツールで調べてみると、そこの部分に「$#xfeff」というものが入っていることに気づきました。 スマホでも確認してみると、余白ではなく、改行がされてい...
CSS 【CSS】ヘッダーを固定にして追従させる方法／超簡単に説明！
① position: fixed 「position: fixed」を使用し固定させる 例 position: fixed; /* 位置を固定する */ top: 0; /* 固定する位置を指定 */ left: 0; /* 固定する位置...