ウェブ制作

クリックで開閉するアニメーション付きアコーディオン【CSS/jQuery】

クリックするとアニメーションしながら開閉する折りたたみ要素の実装方法です。比較的新しい要素の<details>を使う方法や、jQuery・CSSを使う方法等を紹介します。 その1:<details> ...

ある日FacebookグラフAPIによるフィード取得ができなくなっていた

過去に制作したウェブサイトでFacebookグラフAPIとアクセストークンを使ってFacebookページの記事データを取得し一覧表示していたのですが、何らかのエラーで表示されなくなっていました。その際の状況や解決に至った経緯を残しておき...

Visual Studio CodeでのSass導入とおすすめ設定【Live Sass Compiler】

Sassを使えるようにするためにはVisual Studio Codeの拡張機能である Live Sass Compiler (Glenn Marks) が手軽に導入できて便利です。 今回は Live Sass Compiler ...

フォントサイズの指定方法と違いを見直してみる【CSS】

ウェブサイト制作時のフォントサイズの指定方法について考え直す機会があったのでそれぞれの違いや見解をまとめてみます。 rem, em, px, % 等、単位の選び方に迷った場合は参考にしてみてください。 使用したバージョン G...

ブロックエディターと公開記事の表示を揃えるための3つのポイント【WordPress】

WordPressの記事編集の際、エディター上に表示されているものと実際に公開される記事の表示が異なっていると完成形のイメージも掴みにくく、何度もプレビューで確認することになってしまいがちです──。 今回はエディターでの編集が少し...

投稿内のブロックにのみCSSを適用してエディター上にも反映する【WordPress】

ブロックエディターが搭載された現在のWordPressでは、メインの記事となる「投稿」だけではなくウィジェットやフルサイトエディター(FSE)の編集にもブロックエディターが使われています。 このエディターで配置するブロックは「投稿...

正規表現のパターンは段階的に考えると覚えやすい【PHP】

正規表現というと「記号が多く意味不明・難しそう・読めない──」といった印象を持っていたのですが、「簡単な正規表現はいつでも使えるようにしておきたい」という思いから段階を分けて学んでみたところ少しづつ理解が進んでいきました。 まずは...

Gutenberg エディターで画像とテキストを横並びにする方法3選【WordPress】

WordPressで記事を編集する際、文章と関連画像を並べて配置したい場合があると思います。そんなときに役立つ画像と文章を横並びレイアウトにする方法を3つ紹介します。 それぞれ手軽さや特徴に違いがありますが、3番目のカラムを使う方...

見分けにくい再利用ブロックを判別しやすく改善する【WordPress】

WordPressのエディターに搭載される再利用ブロックを使って配置したブロックは、それが再利用ブロックであることが分かりにくいのが難点です。そこでエディター上の再利用ブロックの外観を調整する方法でこの問題を解決します。 使用した...

Googleアナリティクス(GA4)とサーチコンソールの関連付けを行う

以前はできなかったGoogleアナリティクス(GA4)とサーチコンソールの連携が可能になっているので紹介します。これらを関連付けるとGoogleアナリティクス上で検索クエリの確認ができるようになります。 Google...
スポンサーリンク
タイトルとURLをコピーしました