最近活用し始めたウェブ制作で役立つCSSプロパティや疑似クラス10選
CSSプロパティや疑似クラス等、比較的新しいものや最近知ったものの中から実戦で役立ちそうなものを紹介します。CSSプロパティappearance - ブラウザ標準スタイルの使用方法を指定するブラウザ標準のスタイルシート（User Agent...
ウェブ制作
ブロックの追加機能（幅広・全幅・マージン・パディング等）や配置指定を自動的にテンプレートへ反映させるには【WordPress】
WordPressテーマの自作やカスタマイズにおいて、これまでは add_theme_support() で「幅広・全幅」「マージン・パディング」等のエディターの追加機能を有効化しつつ、フロントエンドに反映されない一部の項目はCSSを書き足...
ブロックスタイルを追加してカラムブロックを中央揃え・両端揃えにする【WordPress】
WordPressのブロックエディターで横並び等のレイアウトに重宝する「カラムブロック」ですが、デフォルトではカラムの中央揃えや両端揃えの指定ができません。そこで、カラムブロック用のブロックスタイルを追加して中央揃えや両端揃え等の指定ができ...
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() が効かない状況に遭遇したら原因はこれかもしれません。代替となる解決策も紹介しています。ad...
Facebookページの投稿を取得してPHPで表示する【2022年版】
企業やグループ等のFacebookページに投稿された記事データを取得してウェブサイトに表示する手順です。今回はPHPで表示する方法を使っています。使用したバージョン Facebook グラフAPI v15.0Step1. Facebookア...
クリックで開閉するアニメーション付きアコーディオン【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 (Glenn...