ウェブ制作

ウェブ制作

こんなときは?WordPressで遭遇したトラブルとその対処法まとめ

記事編集・エディター関連左寄せ/右寄せによる後続要素の回り込みを解除するには画像ブロック等に「右寄せ・左寄せ」を指定した場合に後続ブロックが意図しない配置になってしまう場合の対応策です。画像とテキストを横並びにするには画像の横に文章を配置し...
ウェブ制作

目的別に選ぶWordPressカテゴリーの最適な表示方法

カテゴリーの表示方法についてHTML構造やリンクの有無など、求める形式によって書き方を選ぶ必要があります。今回は私もよく使ういくつかのパターンを書き残しておこうと思います。投稿が属しているカテゴリーの表示ここでいう「投稿が属しているカテゴリ...
ウェブ制作

最近活用し始めたウェブ制作で役立つCSSプロパティや疑似クラス10選

CSSプロパティや疑似クラス等、比較的新しいものや最近知ったものの中から実戦で役立ちそうなものを紹介します。CSSプロパティappearance-ブラウザ標準スタイルの使用方法を指定するブラウザ標準のスタイルシート(UserAgentSty...
ウェブ制作

ブロックの追加機能(幅広・全幅・マージン・パディング等)や配置指定を自動的にテンプレートへ反映させるには【WordPress】

WordPressテーマの自作やカスタマイズにおいて、これまではadd_theme_support()で「幅広・全幅」「マージン・パディング」等のエディターの追加機能を有効化しつつ、フロントエンドに反映されない一部の項目はCSSを書き足して...
ウェブ制作

ブロックスタイルを追加してカラムブロックを中央揃え・両端揃えにする【WordPress】

WordPressのブロックエディターで横並び等のレイアウトに重宝する「カラムブロック」ですが、デフォルトではカラムの中央揃えや両端揃えの指定ができません。そこで、カラムブロック用のブロックスタイルを追加して中央揃えや両端揃え等の指定ができ...
Visual Studio Code

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

VisualStudioCodeのワークスペースやフォルダーを1クリックで簡単に切り替え可能な拡張機能「ProjectManager」を紹介します。ProjectManagerに登録したワークスペースやフォルダーはプロジェクトとして一覧表示...
ウェブ制作

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

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

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

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

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

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

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

クリックするとアニメーションしながら開閉する折りたたみ要素の実装方法です。今回は主に<details>(詳細折りたたみ要素)とJavaScriptを使って実現する方法を紹介します。他の方法と比較してメリットも多いのでぜひ使ってみてください。...
スポンサーリンク