ブロックスタイルを追加してカラムブロックを中央揃え・両端揃えにする【WordPress】 WordPressのブロックエディターで横並び等のレイアウトに重宝する「カラムブロック」ですが、デフォルトではカラムの中央揃えや両端揃えの指定ができません。 そこで、カラムブロック用のブロックスタイルを追加して中央揃えや両端揃え等... 2023.03.09 ウェブ制作
VS Codeのワークスペースやフォルダーを簡単に切り替える拡張機能【Project Manager】 Visual Studio Codeのワークスペースやフォルダーを1クリックで簡単に切り替え可能な拡張機能「Project Manager」を紹介します。 Project Managerに登録したワークスペースやフォルダーはプロジ... 2023.01.29 ウェブ制作
Keychron K1 ワイヤレス・メカニカルキーボード (テンキーレス)茶軸 現在使用中のキーボード「Keychron K1 ワイヤレス・メカニカルキーボード(テンキーレス)」という製品を紹介します。 Keychron K1は打鍵感の異なる好みの軸を選択可能な薄型のメカニカルキーボードで、Bluet... 2023.01.24 ホビー
改善版:投稿内のブロックにのみCSSを適用してエディター上にも反映する【WordPress】 WordPressによる記事の見栄えを整えるため「投稿」にのみ適用されるCSSを用意します。 ブロックエディターで配置する "見出し" や "段落" などのブロックに、ウェブサイトのデザインに合わせたCSSをあらかじめ用意しておく... 2023.01.14 ウェブ制作
add_editor_style()が効かない場合は@importが原因かも【WordPress】 add_editor_style() で読み込んだCSSファイルの内容がエディターに反映されない一例の紹介です。add_editor_style() が効かない状況に遭遇したら原因はこれかもしれません。 代替となる解決策も紹介して... 2022.11.28 ウェブ制作
Facebookページの投稿を取得してPHPで表示する【2022年版】 企業やグループ等のFacebookページに投稿された記事データを取得してウェブサイトに表示する手順です。今回はPHPで表示する方法を使っています。 使用したバージョン Facebook グラフAPI v15.0 Ste... 2022.11.21 ウェブ制作
クリックで開閉するアニメーション付きアコーディオン【CSS/JavaScript/jQuery】 クリックするとアニメーションしながら開閉する折りたたみ要素の実装方法です。今回は主に<details>(詳細折りたたみ要素)とJavaScriptを使って実現する方法を紹介します。 他の方法と比較してメリットも多いので... 2022.09.01 ウェブ制作
ある日FacebookグラフAPIによるフィード取得ができなくなっていた 過去に制作したウェブサイトでFacebookグラフAPIとアクセストークンを使ってFacebookページの記事データを取得し一覧表示していたのですが、何らかのエラーで表示されなくなっていました。その際の状況や解決に至った経緯を残しておき... 2022.08.29 ウェブ制作
Visual Studio CodeでのSass導入とおすすめ設定【Live Sass Compiler】 Sassを使えるようにするためにはVisual Studio Codeの拡張機能である Live Sass Compiler (Glenn Marks) が手軽に導入できて便利です。 今回は Live Sass Compiler ... 2022.08.01 ウェブ制作
フォントサイズの指定方法と違いを見直してみる【CSS】 ウェブサイト制作時のフォントサイズの指定方法について考え直す機会があったのでそれぞれの違いや見解をまとめてみます。 rem, em, px, % 等、単位の選び方に迷った場合は参考にしてみてください。 使用したバージョン G... 2022.07.21 ウェブ制作