はにわまん

GutenbergのブロックをAdvanced Custom Fields的に使ってみる

Gutenbergにはテンプレート機能があり、利用するブロックを制限することが可能です。このテンプレート機能を使うことで、「Advanced Custom FieldsAdvanced Custom …

webpackの基本的な使い方!最小構成で動作を試してみよう

webpackの基本的な使い方です。似たようなものにgulpがありますが、違いとしては以下のような認識です。 gulp・・・タスクランナー webpack・・・ビルドツール 利用者の属性で分けるなら、…

Gutenbergにオリジナルなブロックを作成する方法(動的編)

テキスト等を入力、編集できるブロックを作成する方法です。ブロックの基本的な使い方については以下の記事で紹介しているので、まずはこちらを参考にしてください。 Gutenbergにオリジナルなブロックを作…

Gutenbergにオリジナルなブロックを作成する方法(静的編)

Gutenbergにオリジナルなブロックを作成する方法です。公式のチュートリアルを参考にしながら、以下のようなpタグで囲まれた固定値のブロックを作っていきます。 汎用性は無いかもしれませんが、作り方の…

WordPressで簡単メールマガジン!「Subscribe2」プラグインの使い方

WordPressでおそらく最もシンプルにメールマガジンを設置できる「Subscribe2」プラグインの紹介です。 投稿時に自動メールから、任意のタイミングでの一括送信など、シンプル設計で簡単に操作で…

WordPressでAJAX通信する方法

WordPressでAJAX通信する方法です。WordPressの場合はアクション先のURLがあらかじめ決まっていて、fucntions.phpからフックすることによって実態の処理を実行するといった流…

【魔法のvw】画像のように拡大・縮小するレスポンシブを実現させるCSSの書き方

ウインドウ幅に連動して画像のように拡大・縮小するレスポンシブを実現させるCSSの書き方の紹介です。 特にPCとスマホの間の「よしな」に表現するときの強い見方となるので、覚えておいて損はありません! ウ…

子要素を親要素(インナー幅)からはみ出して画面いっぱいにするCSS

子要素を親要素からはみ出して画面いっぱいにするは、今までであれば親要素から出してコーディングし直すというのが一般的でした。 ただし、今ではcalcとvwとい新たなCSSの概念があるので、子要素を親要素…

「WAI-ARIA」を使ったHTMLのコーディング例

「WAI-ARIA」とは、W3Cの中の団体が定めているWebアクセシビリティに関する規格ですね。「WAI」は「Web Accessibility Initiative」の略で、「ウェイ」と読むらしいで…

【WCAG 2.0】Webアクセシビリティの「HTML」の達成方法をおさらい

「WCAG 2.0」が定義しているWebアクセシビリティ達成基準の中の「HTML」の項目をすべて確認する意図で作成しました。→ HTML と XHTML の達成方法 | WCAG 2.0 達成方法集 …