デバイスに合わせた画像の切り替えについて、どうのような方法をとられていますか？ 今回はレスポンシブサイトの構築時に、デバイス合わせて適切な画像を読み込み、画像を変える方法について紹介していきます。 PC用の画像とSP用の画像を読み込ませて、display:none;で表示・非表示している場合には、画像の切り替え方法につ...

フォームの入力保管機能は便利ですが、サイトの構築内容によっては、思わぬ妨害にもなってしまう場合があると思います。 そこで今回は、フォームの入力保管機能であるAutocompleteを無効にする方法について紹介していきます。 html側でフォームのAutocompleteを無効にする方法 ■フォーム全体にAutocomp...

JQueryの実行処理をレスポンシブのブレイクポイントによって、条件分岐したいときが稀にあります。 ユーザーエージェントで分岐する方法もありますが、もっと手軽に使いやすいようにレスポンシブのブレイクポイントに合わせた方法について調べてみました。 目次 ・JQueryの実行処理を条件分岐する ・jqueryの実行処理をレ...

Webサイト内で、情報を分かりやすくまとめるために、タブ切り替えのBoxを実装することは、一つの手法であります。今回はそんなタブ切り替えについて、タブとターゲットとなる切り替えBoxが離れていても動作するタブ機能をJQueryを使って実装していきます。 今までタブ切り替えを実装したことがない方は、是非参考にしていただけ...

以前の記事でHTMLリンクでパラメータ渡しについて紹介しましたが、今回は同一ページ内でのページ内リンクでパラメータを渡す方法について承知していきたいと思います。 HTMLリンクのパラメータ渡しについて先に知りたい方は、下記記事をお読みください。 ↓↓↓↓ https://fractales.jp/javascript/...

2020年5月は目まぐるしく、Googleのコアアルゴリズムアップデートによる順位変動の影響を受けた方も多いと思います。ご自身が運営されているサイトの検索順位が、急激に下がってしまった方は、いろいろと苦心されているでしょう。 そのコアアルゴリズムアップデートの後、しばらく経過した2020年5月28日に新たに検索ランキン...

JQueyのスライダーの中でもレスポンシブ対応で動作が安定して使いやすいslick.jsですが、スマホのみ動作させたい場合どのようにすればいいのか調べてみました。調査して分かったことを紹介していきますので、slickをスマホのみ適用したい方はご参考にしていただければと思います。 目次 ・slickをスマホ時のみ動作させ...

SEOを意識している方であればH1タグなどを、テキストで表現したいと考える方は少なくないと思います。しかしH1に入力したテキストの文字数が長いと、スマートフォンで閲覧したら見栄えが悪くなってしまうのが悩みとなりますよね。 今回はそんな文字数問題を解決するために、cssを使ってテキストの文字数を制限する方法を紹介していき...

Youtube動画を設置するときにどのような方法で設置していますか？ ほどんどの方は、設置がしやすいembed（埋め込み）方式で、動画を設置していると思います。設置した動画を再生してみると、再度に関連動画が表示されるので困ったことはありませんか？ 今回はYoutubeのembed方式で表示される、関連動画を非表示にする...

サイトがなかなか検索上位に上がらない！！ 最近だんだんとサイトの検索順位が全体的に下がってきている、そのようなことでお悩み方！！ 不用意にサイトのコンテンツを改善する前に、まずはサイトの表示速度について改善してみませんか？ 今回はhtmlで作成されてサイトの描画を、高速化する方法について紹介していきます。wordpre...