コーディング– category –
-
コーディング
Figmaのメールアドレスを変更する方法。変更できない時はココをチェック!
Figmaの設定画面の開き方や、アカウントに登録しているメールアドレスの変更方法をまとめました。 また、Googleと連携させてアカウントを作った場合、通常の方法では別のメールアドレスに変更できないので、そちらの変更方法もまとめています。 【Figmaの... -
コーディング
メールで共有するボタンをWebページに簡単に作る方法【HTML】
Webサイトに、そのページをLINEやTwitterなどで共有する機能を作ることがありますが、「LINEとか使ってないから他の手段も作って」と言われることもあると思います。 「メールでシェアする」「メールで共有する」のようなボタンを作って、 クリックしたら... -
コーディング
画像の遅延読込でページ内リンクがずれる時の解決法【jQuery】
アンカーリンク(aタグ)を使って、メニューや目次からページ内の特定の場所にジャンプさせることってよくありますよね。 ところがそれにloading="lazy"などの遅延読み込みを組み合わせると、ジャンプ先がずれてしまいます。 ランディングページでどうして... -
コーディング
カスタム投稿記事をタグ一覧ページに表示させる方法【WordPress】
tag.phpなどのタグのアーカイブページで、該当タグがついたカスタム投稿記事を表示させたい! でもなぜかうまくいかない…と行き詰ってしまった時に解決した方法です。 うまくいかない原因は様々ですが、同じように困っている方は下記の設定がきちんとでき... -
コーディング
カスタム投稿のカテゴリ一覧を表示する方法【WordPress】
カスタム投稿のカテゴリー(タクソノミー)を取得して、メニューやサイドバーに各タームをリスト表示する方法です。 トップや一覧ページ、記事詳細ページで取得・表示させたいWP管理画面でカテゴリーを追加したり削除したときにも対応させるリンクあり/な... -
コーディング
伸び縮みする矢印のアニメーションサンプル【CSSのみや、スクロールで発火】
HTMLとCSSのみで描画する、動く矢印のアニメーションサンプルです。随時追加予定。 スクロールして要素が出現してからアニメーションを開始させたいときは、jQueryも追加します(後半に記載)。 【棒線のみのスタイリッシュな矢印(文字つき)】 See the P... -
コーディング
tableと他要素の幅が小数点以下切り捨てのせいで揃わない時の対処法
tableの横幅をパーセントで指定し、同じ横幅のdiv要素を下に並べたとき、微妙に横幅が揃わないことがあります。 ずれる原因は、ブラウザによってtableのサイズが小数点以下で切り捨てられてしまうため。 (例)スマホのとき、横幅92%指定…tableは380px、di... -
コーディング
抜粋の文字数をPCとスマホで別々に設定する方法【WordPress】
WordPressでthe_excerpt()関数を使うと、文末に[...]をつけて投稿記事の抜粋文を表示してくれます。 その抜粋の文字数を自由に変更して、かつスマホとPCそれぞれ別の値を設定したい時の書き方をまとめました。 【まず「WP Multibyte Patch」の有効化】 the... -
コーディング
WebP対応/非対応ブラウザで画像を表示させる方法2選。PC、スマホで切替も
次世代フォーマットの画像の1つであるWebP(ウェッピー)をサイトで表示させ、SafariやIEなどの非対応ブラウザでは代替画像を表示させる方法をまとめました。現在主流の書き方は、大きく分けて2つあります。 【方法1 pictureタグで柔軟に切り替える】 <... -
コーディング
トップのお知らせ部分に別ページの新着情報だけを表示する【jQuery】
WordPressを導入していない静的サイトで、別ページのお知らせ一覧の最新の数件だけを取得して、トップのお知らせ(NEWS)部分に表示させたい。 そんな機会があったのでjQueryだけで実装しました。 【書き方】 ①TOPページのHTMLに、お知らせ一覧ページから...
12