SEO 【SEO】画像をAVIFに！メモ
自分用のメモとして残します。上記サイトはGoogleが提供している、ブラウザ上で画像を圧縮できるサイト。画像の容量が大きいと表示に時間がかかり、ユーザーが離脱してしまう。簡単に言うと、AVIFはあまり画質をそこなわずに圧縮してくれるものであ...
サイト作成
SEO SEO 【SEO】サジェストキーワード メモ
SEO対策に「サジェストキーワード」を使用した対策があります。これを使用すると、Googleでその言葉で何が調べられているかわかります。例えば、鍵屋の場合「鍵 トラブル」で検索すると「鍵 トラブル 業者」のように表示される。鍵トラブルで検索...
Github 【Github】マークダウンリンクを作成する
(url)このように記載すれば文字にリンクがつきます。
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」というものが入っていることに気づきました。スマホでも確認してみると、余白ではなく、改行がされている様...
HTML ファビコンが表示されない
表示されないことについて調べると、いろんなところで出てくるのがキャッシュを消せと。キャッシュを消しても、ちゃんと載っているかわからない時、調べるサイトがありました。これで確認すると、パスの誤りや、サーバーのアップロード先の誤りなどが見つかり...
Figma 【Figma】サイト制作の基本的な操作を簡単に説明
Figmaについてや始め方については、別の記事で紹介しているので説明を省きます。ここでは基本的な操作方法について説明していきます。日本語にする翻訳機能を使っていましたが、翻訳が大変なことになったので、検索すると日本語に変換機能がありました！...
Figma 【Figma】コンポーネント機能の使い方
Figmaについて勉強したての、独学Web初心者です。Figmaについては、別の記事でご紹介しているのでご参照ください！Figmaの概要：Figmaの基礎的な機能：今回はコンポーネント機能についてお話します。コンポーネント機能とはコンポーネ...
サイト作成 サイト制作／各パーツの名前を知っておく
Web初心者なのですが、独学でやっているため、サイトのそれぞれの要素の名前がわからず、なんとなく制作していました。チームでやる際に、これでは私しかわからない！と思い、簡単にまとめてみました！ホームページ と サイトよく聞く「ホームページ」似...
Figma ページがださい！素敵なサイトのデザインを作るFigmaの始め方
Web初心者なのですが、自分でなにも考えずに「あこれもいれたい！」「これも！」ってやっていたら、統一感のないページだったり、デザイン無知のため質素なページになってしまいます。私の成長日記もかねて、記録していこうかなと思います！一から作った初...
サイト作成 面白い！Googleサーチコンソールの設定方法
Googleサーチコンソールとは無料で使用できる、Google検索でのサイトのパフォーマンスを分析できるツールのことです。検索順位やクリック数、表示回数などがわかります。また、検索ページに掲載されているか否かもわかり、掲載されていない場合は...
サイト作成 FTPの使い方／WinSCP
FTPとはFTPとは、ファイルを転送するためのもので、サーバーにアップされたファイルの一覧を見たり、ファイルをサーバーにアップロードしたりできます。私は「WinSCP」を使用しているのでその方法について説明します。「WinSCP」とはWin...
Wordpress 【WordPress】はじめに設定したいこと 14選！
Wordpressにてサイト作成まずはWordpressでサイト作成をします。サイトの作成方法は別の記事で紹介しているのでご参照ください。① サイトタイトルの設定サイトタイトルは、サイトの一番上に表示される大切なものです。30文字以内が目安...
Wordpress 見やすいサイト制作のポイント！サイズの目安／リンクの開き方
ここでは、初心者の私が知らなかった、サイト制作のポイントをまとめてみました！エンジニアの先生が教えてくれたものを含めご紹介します！フォントフォントには、「Webフォント」と「デフォルトフォント」があります。「Webフォント」ex）有名なもの...