CSS で文字にぼかし効果を加える方法を紹介します。 表示の演出で、文字がボケた状態からスタートさせたい時に便利な方法です。 CSS で文字にぼかし効果を追加する方法 CSS でボケて消えるアニメーションの実装方法 CSS で文字にぼかし効果を追加する方法 CSSで文字にぼかし効果を追加するには color と text-shadow を使用します。 例えば、文字に透明度50%ほどで20pxほどのぼかしを加える場合、次のコードをCSSに追加します。 実際の見た目はこちら。 CSS はこちら。 .blur { color: transparent; text-shadow: 0 0 20px rgba(0,0,0,0.5); } まずは color に transparent を指定して文字を透明にします。 次に、text-shadow でボケの値を調整することで影にぼかし（ブラー）のような

CSS で有機的に動く円の作成方法を紹介します。 例えば、ページのアクセントや、サムネイルのワンポイントに便利な方法です。 CSSで有機的な円を作る CSSで有機的な円を動かす 円の動きを滑らかにする 円の中に写真を入れるとうまくいかない CSSで有機的な円を作る CSS で有機的な円を作るには border-radius に複数のプロパディ値を指定します。 実装時の見た目はこちら。 ベースのHTMLはこちら。 <div class="round-wrap"> <div class="round"></div> </div> 続いてCSSの指定はこちら。 .round-wrap { width: 200px; height: 200px; } .round { width: 100%; height: 100%; border-radius: 30% 70% 60% 40% / 30% 4

PHP で配列同士を結合する方法を紹介します。 例えば、WordPress などで、型が一緒の繰り返しフィールドの配列を、結合して出力したいときに便利な方法です。 配列同士を結合する方法 配列同士を結合する方法 配列同士を結合するにはPHPの関数 array_merge() を使用します。 例えば、型が一緒の配列を一つの配列にするには次のコードのように値をセットします。 <?php // 配列同士を結合 $example1 = ['hoge1', 'fuga1', 'hoga1']; // 配列A $example2 = ['hoge2', 'fuga2', 'hoga2']; // 配列B $new_example = array_merge($example1, $example2); // 配列の結合 print_r($new_example); // 確認のため配列を出力 ?> $

<table class="jp-map"> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="hokkaido" colspan="2" rowspan="2"><a href="#">北海道</a></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <t

Google アナリティクス 4（GA4）でのページビュー数の確認方法を紹介します。 例えば、アナリティクスのバージョンが変わって、ページビュー数の確認方法がわからなくなった人におすすめの方法です。 旧バージョンでは、アナリティクスの管理画面の「行動」＞「概要」の「ページ」などから確認できたページビュー数ですが、Google アナリティクス 4（GA4）ではページビュー数の項目の位置が変更されています。 新バージョンでは、アナリティクスの管理画面の「レポート」から「エンゲージメント」のトップや、「エンゲージメント」＞「ページとスクリーン」などから確認することができます。 まとめ Google アナリティクス 4（GA4）でのページビュー数の確認方法を紹介しました。

CSS で背景画像を透過しているように見せる方法を紹介します。 例えば、子要素に影響を与えずに親要素の背景画像だけを透過表現したい時に便利な方法です。 CSS で背景画像を透過しているように見せる方法 白地で透過 黒地で透過 CSS で背景画像を透過しているように見せる方法 img 要素などの透過は opacity を利用すればよいのですが、背景画像が含まれる要素に opacity を利用すると、子要素も透過されてしまいます。そこで background の blend-mode を利用することで、背景画像だけを透過した感じにすることができます。 白地で透過 背景画像を「白地で透過」させるには、はじめに background-image で背景画像を指定。 続いて background-color で白色を rgba で指定、透過の値を 1 以下に指定して透過させます（サンプルでは0.5を

jQuery スクロールしたらクラスを付与する方法を紹介します。 例えば、スクロール後にヘッダーを固定したい時に便利な方法です。 スクロールしたらクラスを付与する方法 コードの解説 スクロールしたらクラスを付与する方法 スクロールしたらクラスを付与する場合は scroll イベントを利用します。 例えば、ページ上部から 20px スクロールした場合に、#header 要素にクラス「fixed」を付与する場合は、次のコードを追加します。 $(window).scroll(function () { if($(window).scrollTop() > 20) { $('#header').addClass('fixed'); } else { $('#header').removeClass('fixed'); } }); 上記のコードは jQuery 単体のコードになります。 jquery

WordPress の WP_Term_Query を使ったターム一覧の表示方法を紹介します。 例えば、ターム一覧に紐づく投稿一覧を表示したいときに便利な方法です。 WP_Term_Query を使ったターム一覧の表示方法 タームの名前やスラッグの取得方法 WP_Term_Query を使った親タームに紐づく子ターム一覧の表示方法 WP_Term_Query を使ったターム一覧の表示方法 WP_Term_Query は WordPress 4.6 から追加された新しいクラスになります。 使用するには WordPress 4.6 以上にアップデートしてから使用してください。 次のコードは、タクソノミースラッグが information-category の場合に、ターム一のアーカイブページのリンクとタームに紐づく投稿数のカウント付きで表示する方法です。 <?php $args = array

WordPress で本文中にショートコードを使って投稿一覧を表示する方法を紹介します。 例えば、本文中に記事の紹介などを行いたいときに便利な方法です。 ショートコードで投稿一覧を表示する方法 ショートコードに値を指定して表示結果をコントロールする方法 ショートコードで投稿一覧を表示する方法 まずはショートコードタグ用のフックを追加します。 例えば、最新の投稿を3件表示するショートコードを作りたいときは、 次のコードを function.php に追加します。 /*【出力カスタマイズ】ショートコードで投稿一覧を表示 */ function shortcode_post_list() { // 変数の定義 global $post; // グローバル宣言 $args = array( // クエリの準備 'posts_per_page' => 3, // 表示件数の指定 'post_type

CSS で画像とテキストどちらにも使えるグリッチエフェクトを実装する方法を紹介します。 例えば、電脳的な雰囲気のあるサイトを作りたいときに役立つテクニックです。 CSS でグリッチエフェクトを実装する方法 点滅アニメーションを実装する方法 歪みアニメーションを実装する方法 振動アニメーションを実装する方法 CSS でグリッチエフェクトを実装する方法 CSS だけでアナログな雰囲気のあるグリッチエフェクトを実装するために CSS プロパティ animation を使用します。 画像とテキストに適用した場合の完成イメージと、ベースの HTML とコピペですぐ使える CSS はこちら。 <!-- ↓ 画像の場合 --> <div class="flash"><div class="skew"><div class="glitch"><img src="画像URL" alt="" /></div>

WordPress や PHP で今月を取得する方法を紹介します。 例えば、アーカイブの見出しに「今月の何々」などと表記したい時に便利な方法です。 今月の取得方法 今月を一桁や二桁で取得 先月・翌月の取得方法 今月の取得情報 WordPress や PHP で今月を取得するには date() 関数を使用します。 例えば、今月の月を取得したい場合は date() 関数 に n を指定して、次のコードをテンプレートファイルに追加します。 <?php echo date('n'); ?> 今月を一桁や二桁で取得 今月の値を一桁や二桁で取得したい場合は、date() 関数に n または m を指定します。 次のコードは、月を一桁で取得する方法です。 <?php echo date('n'); ?> 値 n を指定すると、先頭に0をつけない数字を取得します。例：1 ~ 12。 <?php echo

WordPress で最大アップロードサイズを変更する方法を紹介します。 例えば、2MBを超えるファイルをアップしたい時に便利な方法です。 functions.php に変更を加える方法 php.ini に変更を加える方法 サーバーの設定を確認 WordPress 側で最大アップロードサイズの変更を試す前に、まずはサーバーの設定を確認してください。 XSERVER やロリポップなどの主要なサーバーでは、サーバーの管理画面でファイルのアップロードサイズを管理している場合があります。 functions.php に変更を加える方法 WordPress でファイルの最大アップロードサイズを変更する方法を紹介します。 例えば、アップロードサイズを 5MB まで引き上げたい場合は、次のコードを functions.php に追加します。 /* WordPressで最大アップロードサイズを変更する

WordPress で現在表示しているページの直上の親ページのスラッグやIDを取得して表示する方法を紹介します。 例えば、固定ページで現在表示しているページの親ページの情報を表示したいときに便利な方法です。 ここで言う「直上」は、子ページなら親ページ、孫ページであれば子ページを指します。 親ページのIDを取得する方法 親ページのスラッグやタイトルを取得して表示する方法 親ページの作成日や本文を取得して表示する方法 直上の親ページのタイトルを取得する方法 親ページのカスタムフィールド値を取得する方法 親ページのIDを取得する方法 現在表示している投稿から post_parent で親ページの ID を取得します。 次のコードは、投稿のグローバル変数 $post から post_parent で ID を取得する方法です。 <?php $parent_id = $post->post_pare

WordPress のプラグイン Advanced Custom Fields を使ったカスタムフィールド値の取得と表示方法を紹介します。 値の取得方法と合わせて、表示されない時の注意点や対処方法も紹介します。 基本的な表示方法と注意点 投稿のフィールド値の取得と表示方法 カスタムフィールド値を取得したい場合 別の投稿のカスタムフィールド値を表示 オプションページからカスタムフィールド値を取得 条件分岐を使った表示方法 Repeater Field のフィールド値を表示 注意点 テキストフ​​ィールドの表示 画像フィールドの表示 画像の表示（返り値：オブジェクト） 画像の表示（返り値：URL） 画像の表示（返り値：ID） チェックボックス・ラジオボタンフィールドの表示 セレクタフィールドの表示 関連（投稿）オブジェクトの表示 投稿オブジェクトが一つの場合 投稿オブジェクトが複数の場合（グロ

WordPress で現在表示しているページが親・子・孫ページか判別する方法を紹介します。 例えば、親ページの時だけ何かを出したい時に便利な方法です。 現在表示しているページが親・子・孫ページか判別する方法 表示がうまくゆかない場合 現在表示しているページが親・子・孫ページか判別する方法 現在表示しているページが親・子・孫ページか判別するには、親要素の有無を確認したり、子要素があるかどうかを確認します。 例えば、固定ページに親・子・孫ページが登録されている時に、現在表示しているページが親・子・孫ページかを判別するには、次のコードをループ内に追加します。 <?php // 表示しているページが親・子・孫かを判別する方法 if($post->post_parent == 0){ // 親の判別 echo '親'; }else{ $children_args = array( 'post_par

WordPress で1ページ目のときにページネーションを「もっと見る」ボタンに変更する方法を紹介します。 例えば、一覧の最後で次のページへ遷移して欲しいときに便利な方法です。 ページネーションを「もっと見る」ボタンに変更する方法 プラグイン WP-PageNavi を使っている場合の方法 ページネーションを「もっと見る」ボタンに変更する方法 1ページ目のときにページネーションを「もっと見る」ボタンに変更するには is_paged と get_next_posts_link を使用します。 関数 is_paged は、現在表示されているページ番号が1より大きいかどうかを判別します。 関数 get_next_posts_link は、次のアーカイブページがあるかどうかを判別します。 例えば、wp_link_pages を使用している場合は、次のコードを追加します。 <?php // 1ページ

WordPress で get_terms を使ったターム一覧の表示方法を紹介します。 例えば、サイドバーにタームの一覧を表示したいときに便利な方法です。 get_terms を使ったターム一覧の表示 カレントクラスを追加したい場合 タクソノミーを複数指定する方法 タームに紐づく投稿の数でソートする get_terms を使ったターム一覧の表示 get_terms を使ってタームの一覧を表示する場合は、パラメーターにタクソノミースラッグを指定します。 例えば、タクソノミースラッグが news-cat の場合に、リンク付きターム一覧を表示するには、次のコードをテンプレートファイルに追加します。 <?php // get_terms を使ったターム一覧の表示 $taxonomy_terms = get_terms('news-cat'); // タクソノミースラッグを指定 if(!empty(

WordPress でタクソノミーのターム一覧の表示方法を紹介します。 例えば、タクソノミーアーカイブページでターム一覧を表示したいときに便利な方法です。 タームのタイトル一覧を表示する方法 空のタームを表示する方法 リンク付き一覧を表示する方法 カレントを付与する方法 ターム一覧を好きな順番で並び替える方法 投稿に紐付いたタームの一覧を表示する方法 タームのタイトル一覧を表示する方法 タームタイトルの一覧を表示する場合は関数 get_terms を使用します。 次のコードは、タクソノミーのスラッグが products-category のとき、リンクなしのタームタイトル一覧を表示する方法です。 <?php $terms = get_terms('products-category'); foreach ( $terms as $term ) { echo esc_html($term->

WordPress でカスタム投稿タイプの月別アーカイブ一覧を表示する方法を紹介します。 月別アーカイブ一覧を表示するには wp_get_archives 関数を使用します。 この関数は、年別、月別、週別、日付別、投稿タイトルの公開日順、投稿タイトルのアルファベット順でアーカイブリストを表示することができます。 この関数はテンプレートのどこでも使用することができますが、カスタム投稿タイプで使用する場合はプラグイン Custom Post Type Permalinks をインストールして有効化する必要があります。 月別アーカイブ一覧の実装方法 月別アーカイブ一覧の基本的な表示 月別アーカイブ一覧をプルダウンメニューで表示 アーカイブ一覧でタイトルに年度を表示したい 表示されるテンプレートが不明な場合 月別アーカイブ一覧の実装方法 実装するための手順は次の通りです。 １）WordPress

WordPress でターム別に年別アーカイブのリンクリストの表示方法を紹介します。 例えば、カテゴリ別に年別アーカイブのリンクリストを表示したいときに便利な方法です。 ターム別の年別アーカイブリンクリストの表示方法 サブループベースのターム別の年別 アーカイブリンクリストの表示方法 ターム別の年別アーカイブリンクリストの表示方法 ターム（カテゴリ）別の年別アーカイブリンクリストを表示するために query_posts を使います。 例えば、カスタム投稿タイプのスラッグが information で、タクソノミースラッグが information-cat 、タームスラッグが pickup の場合の、ターム別の年別アーカイブリンクリストの表示方法です。 <?php // ターム（カテゴリ）別の年別 アーカイブリンクリストの表示 $post_type = 'information'; // ア