サイト作成 【SEO】サジェストキーワード メモ
SEO対策に「サジェストキーワード」を使用した対策があります。 これを使用すると、Googleでその言葉で何が調べられているかわかります。 例えば、鍵屋の場合「鍵 トラブル」で検索すると 「鍵 トラブル 業者」 のように表示される。鍵トラブ...
ネタ帳
サイト作成 
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; } /* スクロールするとヘッダ...
CSS PNG形式の画像に影をつけたいけどうまくいかない！
PNG画像で、周囲の背景は透過しているとき、 「box-shadow」で影をつけると、透過しているところにも影がついてしまいました。 わかりにくいのですが、角丸なのに、四角として影がついており、白くなってしまいます。 この時に便利なのが、 ...
HTML ファビコンが表示されない
表示されないことについて調べると、いろんなところで出てくるのがキャッシュを消せと。 キャッシュを消しても、ちゃんと載っているかわからない時、調べるサイトがありました。 これで確認すると、パスの誤りや、サーバーのアップロード先の誤りなどが見つ...
HTML 【HTML】Googleマップ載せる方法
① Googleマップで載せたい場所を検索 共有ボタンを押すと、下記の表示が出るので、「地図を埋め込む」を押すとHTMLコードが出てくる。 ② HTMLに記入 小サイズにすると、widthは400とHTMLにでてくる。 ％しておいた方がコン...
CSS 【CSS】アイコンと文字を上下中央に
こうなってしまっているのを これにしたい！ ① アイコン＋文字のクラスに「display: inline-block;」「vertical-align: middle;」を指定 ② アイコンに「vertical-align: middle;...