ウェブ制作

VS Codeのワークスペースやフォルダーを簡単に切り替える拡張機能【Project Manager】

Visual Studio Codeのワークスペースやフォルダーを1クリックで簡単に切り替え可能な拡張機能「Project Manager」を紹介します。 Project Managerに登録したワークスペースやフォルダーはプロジ...

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

WordPressによる記事の見栄えを整えるため「投稿」にのみ適用されるCSSを用意します。 ブロックエディターで配置する "見出し" や "段落" などのブロックに、ウェブサイトのデザインに合わせたCSSをあらかじめ用意しておく...

add_editor_style()が効かない場合は@importが原因かも【WordPress】

add_editor_style() で読み込んだCSSファイルの内容がエディターに反映されない一例の紹介です。add_editor_style() が効かない状況に遭遇したら原因はこれかもしれません。 代替となる解決策も紹介して...

Facebookページの投稿を取得してPHPで表示する【2022年版】

企業やグループ等のFacebookページに投稿された記事データを取得してウェブサイトに表示する手順です。今回はPHPで表示する方法を使っています。 使用したバージョン Facebook グラフAPI v15.0 Ste...

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

クリックするとアニメーションしながら開閉する折りたたみ要素の実装方法です。いくつかの方法がありますが、<details>(詳細折りたたみ要素)とJavaScriptを使って実現する方法がメリットも多く最もおすすめです。 ...

ある日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)の編集にもブロックエディターが使われています。 このエディターで配置するブロックは「投稿...
スポンサーリンク
タイトルとURLをコピーしました