プラグインなしでWordPressのGutenberg（ブロックエディタ）にオリジナルのスタイルをあてるカスタマイズ
「Gutenberg（グーテンベルク）」は、WordPress 5.0から採用された新しいエディターで、「ブロックエディタ」とも呼ばれています。 ブロックエディタは、WordPressバージョン4系までの旧エディター（ク …
動画メディアを簡単・気軽に。WordPressテーマ「MOVIE THEME」でできる10のことと特徴
動画メディア用のWordPressテーマは、それなりに数があります。ですが、海外のものがほとんどで管理画面の用語も英語で使いづらく、それ以上に自分が使いたいと思うのが少ないです。 ので、この度中の人かかかず（＠salty …
カテゴリで条件分岐
カテゴリを設定することで、たくさんの記事の中から同じ種類・分類に関して投稿された記事を簡単に見つけることができます。 そんなカテゴリでの条件分岐について紹介します。 目次親カテゴリに該当する場合の条件分岐子カテゴリに該当 …
フィールド値の出力
functions.php にコードを記述して作ったカスタムフィールドの値を取得して出力します。 カスタムフィールドを使う時、使用頻度が多いコードなので覚えておくと便利です。 目次フィールド値の出力フィールドの値がない場 …
テキストフィールドの作成・出力
プラグイン「Advanced Custom Fields」を使わずに、カスタムフィールドを設置して、入力内容を保存。そして、表示させるまでのスニペットを紹介します。 目次テキストフィールドの作成add_meta_box( …
JavaScriptのIntersection Observer APIでスクロールインするとタイピング風アニメーションでテキスト表示
ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptの .addEventListener の scrollイベントで実装していましたが、Intersection Observe …
JavaScriptの.split()で文字を分割してスクロールインすると1文字づつゆっくり浮き出る
LPのような各ブロックで訴求や内容を変える場合、邪魔にならない程度のアニメーションをつけることで、ユーザーの視線誘導が可能です。 この記事では、ヒーローエリア以降にある各セクションのタイトルを「少し目立たせたい場合」に使 …
JavaScriptの.lengthで要素に中身があるかを判別して、中身がある場合はアコーディオンで表示
普通にHTMLでベタ書きができるなら、アコーディオンにする要素を個別に指定できます。ですが、要素の個数が多いと一個一個目視でclass名を付与する必要があり、面倒です。 なので、この記事ではJavaScriptのループを …
JavaScriptの.sessionStorageでタブのメニューにNewをつけてブラウザを閉じるまでNewを非表示
タブメニューは、限られたスペースで複数のコンテンツを表示することができますが、クリックしないとその中身を見ることができません。 そんな時、そのメニューを目立たせてあげると良いですが、目立たせが強過ぎてもいけないので、なか …
JavaScriptの.prepend()でページ遷移時に上から下に落ちるようにしてオーバーレイを表示
Webページのページ遷移時アニメーションを、ネイティブなJavaScriptで作ります。 アニメーションは、設置するページやアイデアに応じて、この記事を参考に活用してみてください。 目次.prepend()上から下に落ち …
