サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
hirashimatakumi.com
スマホで背景を固定表示する方法を紹介します。 例えば、スマホでも background attachment fixed を使ったような表示をしたい時に便利な方法です。 clip-path を使った背景固定表示の方法 clip-path を使った背景固定表示の方法 背景画像を固定表示させる background attachment fixed は、スマホでは background-size: cover; と併用して使用することができません。そのため、背景を固定するためには、パソコンとスマホで別々の記述方法を利用する場合があります。 ですが clip-path を利用することで、パソコンとスマホを同じ記述で対応することができるようになります。 表示サンプルこちら。 HTMLはこちら。 <div class="fixed-wrap"> <div class="fixed"></div> <
CSS 回転する基準点を変更する方法を紹介します。 例えば、中央以外から回転したい場合に便利な方法です。 回転の基準点を変更する方法 回転の基準点を変更する方法 CSS で回転を行う場合は transform: rotate(0deg); を使用します。 使用した場合、対象要素の中央が回転の基準点となります。 .rotate { transform: rotate(0deg); } ここから基準点を変更する場合は transform-origin を使用します。 用途の多い、左上、真上、右上、右中央、右下、真下、左下、左中央の指定方法を紹介します。 左上
Adobe Premiere Pro 動画や静止画などのクリップの表示秒数を数値入力で変更する方法を紹介します。 例えば、静止画クリップを同じ尺で表示したい時に便利な方法です。 クリップの尺を変更は「速度・デュレーション」 対象のクリップを選択後、右クリックから「速度・デュレーション」を選択。表示される「クリップ速度・デュレーション」ウィンドウの「デュレーション」の値を、任意の値に変更してください。 例えば、クリップの尺を5秒にしたい場合は「500」と入力します。 ※ウィンドウを開き直すと表示の値がフレーム数になるのでご注意ください。 まとめ Adobe Premiere Pro 動画や静止画などのクリップの表示秒数を数値入力で変更する方法を紹介しました。
WordPress で タクソノミーアーカイブページの判別方法を紹介します。 is_tax() 関数を使用する is_tax() 関数を使用する is_tax() 関数は、現在表示しているページが taxonomy アーカイブページかどうかを判定する関数です。 引数には、taxonomy のスラッグを指定します。 たとえば、taxonomy のスラッグが category のカテゴリーアーカイブページかどうかを判定する場合は、次のようになります。 if ( is_tax( 'category' ) ) { // カテゴリーアーカイブページ } まとめ WordPress で タクソノミーアーカイブページの判別方法を紹介しました。
CSS でカードをめくる動きを再現する方法を紹介します。 ベースのコードを紹介 コードの解説 スマホ対策 ベースのコードを紹介 CSSでカードをめくるような動きを再現する方法を紹介します。 いくつかポイントがありますので順を追って説明します。 まずは最初に、動きのサンプルとベースのコードを紹介します。 その場でめくれる動き その場でめくれる動きのサンプルです。カードにカーソルを合わせてボタンを押し下げたときに動作します。 ベースの HTML はこちら。 <div class="flip"> <div class="front"></div> <div class="back"></div> </div> めくれると大きくなる動き その場でめくれると大きくなる動きのサンプルです。カードにカーソルを合わせてボタンを押し下げたときに動作します。 ベースの HTML はこちら。 <div clas
CSS で height 0 から auto で transition を有効にする方法を紹介します。 例えば、height 指定 0 から hover 演出を有効にしたい時に便利な方法です。 max-height を指定する height:auto; の指定では transition が効かないため、max-height を指定することで transition を有効化します。 div a { max-height: 0; transition: max-height .4s ease; } div:hover a { max-height: 100px; // 高さの数値は適宜変更してください } まとめ CSS で height 0 から auto で transition を有効にする方法を紹介しました。
CSS のチートシートを紹介。随時更新中。 属性の有無を判別 [class] or :not([class]) 属性の有無を判別 [class] or :not([class]) class や alt、href など属性の有無で判別する場合 [class] や :not([class]) を利用します。 指定した属性(class)がある場合に適用。 a[class] {color:red;} 指定した属性(class)がない場合に適用。 a:not([class]) {color:red;} 属性は任意の値に変更してください。 まとめ CSS のチートシートを紹介しました。
CSS で画像を三角形に切り抜き(マスク)する方法を紹介します。 例えば、デザインのアクセントで画像をマスクしたいときに便利な方法です。 CSSで画像を三角形に切り抜く場合は clip-path CSSで画像を三角形に切り抜く場合は clip-path CSSで画像を三角形に切り抜く場合は clip-path が便利です。 例えば、正方形の要素に背景画像を指定して、三角形に切り抜く場合は次の指定行います。 .clip-path { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } これは正方形の上下に合わせた面長な三角形になるため、正三角形の場合は次のように指定します。 .clip-path { clip-path: polygon(50% 0%, 0 85%, 100% 85%); } この場合、正方形に対して上付きで配置されているので、
get_field() の使い方を紹介します。 通常の出力方法から、if文を混ぜた使い方を紹介していきます。 get_field() とは? get_field() の基本的な出力方法 if文を使った get_field() の出力方法 別ページのフィールド値を出力する方法 オプションページのフィールド値を出力する方法 リピーターフィールドのフィールド値を出力する方法 get_field() とは? get_field() とは、WordPress のカスタムフィールド作成プラグイン ACF(Advanced Custom Fields)を利用して制作した、カスタムフィールドの値を出力するための関数です。 get_field() の基本的な出力方法 get_field() の基本的な出力方法を紹介します。 例えば、フィールド名が field_name の値を出力するときは、次のコードをテン
GA4タグ(UAで言うところのトラッキングコード)の取得方法を紹介します。 例えば、GA4(Google Analytics 4)の設定はしたみたけど、タグの設置がまだの方に向けてご説明します。 UA プロパティが使用できなくなるため、その代替サービスとしてGA4が提供されています。 変更がまだの方で、コードの取得手段がわからない方は以下の手順を確認してください。 まずはアナリティクスの管理画面へログイン データストリームの画面からストリームの追加 「Google タグ」の項目にある「タグの設定を行う」を選択 「Google タグ」の項目にある「実装手順」を選択 UAタグとGA4タグを併記する方法 まずはアナリティクスの管理画面へログイン まずはアナリティクスの管理画面へログイン、管理画面へ移動します。 管理画面から対象のプロパティにある「データストリーム」の項目を選択。 データストリーム
WordPress で月別や年別アーカイブ一覧の表示方法を紹介します。 例えば、ブログのサイドバーに月別アーカイブ一覧を表示したいときに便利な方法です。 liタグでアーカイブ一覧を表示する方法 liタグで月別アーカイブ一覧の表示方法 liタグで年別アーカイブ一覧の表示方法 セレクトボックスでアーカイブ一覧を表示する方法 数字のお尻に年表記を付けたい liタグでアーカイブ一覧を表示する方法 アーカイブ一覧を表示するには wp_get_archives() を使用します。 例えば、カスタム投稿タイプのスラッグが blog で、liタグで月別アーカイブ一覧を表示したいときは、次のコードをテンプレートファイルに追加します。 liタグで月別アーカイブ一覧の表示方法 月別にする場合は type の指定を monthly にします。 <ul class="monthly-list"> <?php wp_
Adobe Illustrator で編集可能なインク素材(イラスト)の作成方法を紹介します。 例えば、スプラトゥーン風の素材を作るのに便利な方法です。 多角形ツールで11〜15角形を作る 多角形の周りに三角形を配置 複合シェイプを作成 効果のスタライズ「角丸」を適用 位置を調整して完成 多角形ツールで11〜15角形を作る まず始めに「多角形ツール」を使用して、11から15角形を作ります。 多角形の数は任意の値で構いませんが、11から15の奇数で作ると自然な感じに仕上がります。 多角形の周りに三角形を配置 続いて、多角形の周りに三角形を配置。多角形の頂点の数に合わせた三角形を、お互いの頂点が少しかぶる形で配置します。 位置は後から調整できるので、ひとまずは多角形を中心に花弁のように配置します。 複合シェイプを作成 次に、全てのオブジェクトを選択して「パスファインダー」から「合体(Optio
PHP で文字列(数列)を日付に変換する方法を紹介します。 例えば、取得した文字列(数列)を年月日が含まれた日付にしたい時に便利な方法です。 文字列(数列)を日付に変換するためには strtotime() 関数を使用します。 次のコードは、$time_value の値を日付に変換する方法です。 <?php $time_value = '201703220134'; echo date('Y年m月d日 H:i',strtotime($time_value)); ?> strtotime() 関数は、英文形式の日時をUNIXタイムスタンプに変換することができます。 変換した値は date にセットして次のように表示します。 2017年03月22日 01:34 年月日をドット区切りにする場合は 'Y年m月d日 H:i' を 'Y.m.d H:i' のように編集してください。 まとめ PHP で文
YouTube で動画をコマ送りする方法を紹介します。 例えば、視聴動画の特定シーンを注目して観たい時に便利な方法です。 YouTube コマ送り・戻しは「,(カンマ)」「.(コロン)」キーを押す コマ送りは「.(コロン)」 コマ戻しは「,(カンマ)」 コマ送り以外のショートカットキーを紹介 YouTube 動画の進行に関連するショートカットキー一覧 YouTube の表示に関連するショートカットキー一覧 YouTube コマ送り・戻しは「,(カンマ)」「.(コロン)」キーを押す YouTube で動画をコマ送り・戻しするには、動画を一時停止にしてキーボードの「,(カンマ)」「.(コロン)」キーを押すとコマ送りが可能です。 コマ送りは「.(コロン)」 YouTube で動画をコマ送りするには、キーボードの「.(コロン)」キーを押すとコマ送りが可能です。 一回キーを押すごとに1フレーム(約0
Adobe Premiere Pro で動画をガイドにスナップさせる方法を紹介します。 例えば、プログラムモニター上に表示されているオブジェクトを、画面端やガイドにスナップさせて綺麗に配置したい時に便利な方法です。 表示からプログラムモニターをスナップインを選択 プログラムモニター上に表示されているオブジェクトを、画面端やガイドにスナップさせるには、メニューバーの「表示」→「プログラムモニターをスナップイン」にチェックを入れます。 ここにチェックが入っていると、動画やグラフィックシンボルが画面端やガイドにスナップするようになります。 まとめ Adobe Premiere Pro で動画をガイドにスナップさせる方法を紹介しました。
WordPress でSFTP接続する方法を紹介します。 SFTPの関係で管理画面からプラグインのアップデートが行えない時に便利な方法です。 プラグイン SSH SFTP Updater Support をダウンロード プラグインをサーバーにアップロード プラグインを有効化 wp-config.php にコードを追加 接続情報を更新 プラグイン SSH SFTP Updater Support をダウンロード SFTPの関係で管理画面からプラグインのアップデートが行えない場合、プラグイン SSH SFTP Updater Support を利用することで、管理画面ないから SFTP 接続を行うことができます。 まずは SSH SFTP Updater Support をサイトからダウンロードします。 プラグインをサーバーにアップロード ダウンロードしたプラグインのファイルをFTPクライアン
Mac OS のアップデートが途中から進まない時の原因と解決方法をご紹介します。 例えば、ソフトウェアアップデート中にシークバーが途中で止まってしまう時などに便利な方法です。 Mac アップデートが途中で止まる原因 Mac アップデートが進まない時の対処方法 Mac アップデートが途中で止まる原因 Mac OS のアップデートが途中で止まる原因はいくつか考えられますが、例えばディスク容量が一杯、アップデートを阻害するセキュリティアプリが動いている、メモリ領域が圧迫されている、マシンスペックの問題など色々ありますが、基本的にはディスクが正常でないために、アップデートが先に進まないと考えられるので、その場合の対処方法を紹介します。 Mac アップデートが進まない時の対処方法 Mac OS のアップデートが途中で止まる場合、システムに何かしらの障害が発生していると仮説をたてます。 その障害を取り
CSS の display: none; から opacity のアニメーションを適用する方法を紹介します。 例えば、DOM の生成タイミングで transition が意図した動きをしてくれない時に便利な方法です。 display: none; から opacity 透過アニメーションの適用方法 display: none; から transition で opacity がアニメーションしない理由 display: none; から opacity 透過アニメーションの適用方法 display: none; から opacity 透過アニメーションを適用するには animation を利用します。 .example { display: none; } .example.active { display: block; animation: fade-in .4s; } @keyfra
WordPress カスタム投稿タイプで年別や月別の日付別アーカイブページが表示されない時の対処方法を紹介します。 例えば、カスタム投稿タイプのパーマリンク設定を「/%post_id%」にしている時に便利な方法です。 表示するテンプレートが不明な場合にも試していただけると幸いです。 カスタム投稿タイプで日付別アーカイブが表示されない原因 カスタム投稿タイプで年別アーカイブを表示する方法 カスタム投稿タイプで月別アーカイブを表示する方法 カスタム投稿タイプで年別アーカイブが表示されない原因 カスタム投稿タイプのパーマリンク設定を「/%post_id%」にしていると、日付アーカイブページが表示されない場合があります。 原因は、「/%post_id%」指定で記事を作ると、記事URLが「例)example.com/news/1980」となり、日付別アーカイブと投稿ページとの判別できなくなるため、ア
WordPress で特定の固定ページにベーシック(BASIC)認証を設定する方法を紹介します。 例えば、会員向けの特典ページなどで、IDパスワードを知っている特定のユーザーに見せたいページを作る時に便利な方法です。 ここで紹介する方法は、固定ページにベーシック認証を設定することを前提に説明しています。 コードを二箇所に追加 function.php にコードを追加 header.php にコードを追加 コードを二箇所に追加 特定のページにベーシック認証を設定するには、コードを function.php と header.php の二箇所に追加するだけで実装が可能です。 function.php にコードを追加 まずは function.php に次のコードを追加します。 /*【ベーシック認証】特定ページにベーシック認証を設定する */ function basic_auth($auth_
CSS で吹き出しを作る方法を紹介します。 例えば、画像を使わずに吹き出しを作りたいときに便利な方法です。 CSS で吹き出しを作る方法 吹き出しに影をつける方法 CSS で吹き出しを作る方法 CSS だけで吹き出しを作る場合は、CSS セレクタの擬似要素 ::before や ::after を使用します。 例えば、シンプルな長方形の吹き出しを作る場合の方法を紹介します。実際の見た目は次の通りです。 ベースの HTML は次の通りです。 <div class="fukidashi">吹き出し</div> CSS はこちら。 .fukidashi { position: relative; width: 240px; margin: 0 auto; padding: 15px; font-size: 16px; line-height: 1.3; text-align: center; l
Adobe Illustrator 初期設定の塗りと線の変更方法を紹介します。 例えば、ドキュメントのカラーモードを「CMYKカラー」から「RGBカラー」に変更した後に便利な方法です。 グラフィックスタイルウィンドウで変更 グラフィックスタイルウィンドウで変更 「初期設定の塗りと線」はグラフィックスタイルの「初期設定のグラフィックスタイル」が適用されます。 ドキュメントのカラーモードを「RGBカラー」に変更後、「初期設定の塗りと線」がCMYK値になっているのは、このスタイルがCMYK値から更新されていないためです。 そこで、任意の設定に変更するためには、「メニューバー」>「ウィンドウ」から「グラフィックスタイル」ウィンドウを表示。 次に、塗りと線を任意の色に変更後、この色を「新規グラフィックスタイル」として登録します。 最後に、作成したグラフィックスタイルを掴んだ状態で、option キー
CSS で作る吹き出しデザイン10選+αをご紹介します。 画像を使わずに、CSS だけで吹き出しを作りたいときに便利な方法です。 01.ノーマル吹き出し 02.ソリッド吹き出し 03.シャキッと吹き出し 04.角丸吹き出し 05.まる吹き出し 06.フワッと吹き出し 07.ラフ吹き出し 08.カクカク吹き出し 09.プイっと吹き出し 10.ドット吹き出し 11.額縁吹き出し 12.つぎはぎ吹き出し 13.ギザギザ吹き出し 14.シャドウ吹き出し 15.コミック吹き出し 16.アバンギャルド吹き出し 01.ノーマル吹き出し CSS で作る吹き出しでよくみる、シンプルデザインの吹き出しです。 本体の余白は以下のベースの CSS を使用します。 .balloon { position: relative; width: 280px; padding: 30px 20px; margin: 0 a
WordPress 権限別に管理画面をカスタマイズする方法を紹介します。 例えば、寄稿者権限ユーザーに特定の項目だけを触らせたいときに便利な方法です。 権限別にサイドバーメニューをカスタマイズする方法 寄稿者権限の場合にサイドバーメニューをカスタマイズする方法 寄稿者権限の場合にサイドバーメニューをカスタマイズ 寄稿者権限でも画像をアップロード可能にする 他のユーザーがアップロードした画像を非表示 寄稿者権限でログイン時のみ専用のCSSを読み込む 権限別にサイドバーメニューをカスタマイズする方法 権限別にサイドバーメニューをカスタマイズする方法を紹介します。 次のコードをテーマファイル内の function.php に追加します。 /*【管理画面】権限別にサイドバーメニューの表示をカスタマイズ */ function remove_menus () { if (current_user_c
PHP で URL パラメーターから値を取得する方法を紹介します。 例えば、ページを遷移して値の受け渡しをしたい時に便利な方法です。 URL にパラメーターをつける方法 PHP で URL パラメーターから値を取得する方法 URL にパラメーターをつける方法 URL にパラメーターをつける場合は、URLとパラメーターを区切るために「?」を使います。 例えば、URL「https://hirashimatakumi.com/blog/」にパラメーター「product=camera」をつけると次のようになります。 https://hirashimatakumi.com/blog/?product=camera パラメーターが複数の場合は &(アンパサンド)でパラメーターをつなぎます。 https://hirashimatakumi.com/blog/?product=camera&color=b
select(セレクトボックス) で値を持たない初期値を追加する方法を紹介します。 例えば、初期値を「選択してください」などにする時に便利な方法です。 option に selected と disabled を指定する方法 option に hidden を指定する方法 option に selected と disabled を指定する方法 セレクトボックスの最初に、値を持たない「選択してください」を追加する場合は、以下のコードを追加してください。 <select name="select"> <option selected disabled>選択してください</option> <option value="項目1">項目1</option> <option value="項目2">項目2</option> <option value="項目3">項目3</option> </sel
WordPress でカスタム投稿タイプの親ページだけの投稿一覧の表示方法を紹介します。 例えば、階層化したカスタム投稿の親ページの投稿一覧を、サイトマップなどで表示したいときに便利な方法です。 投稿タイプを指定して親の投稿一覧を表示 投稿タイプを指定して親ページのみの投稿一覧の表示方法を紹介します。 紹介する方法は、カスタム投稿タイプを階層化した場合の表示方法です。 カスタム投稿を階層化するには WordPress カスタム投稿タイプを追加する方法をご覧ください。 例えば、階層化した投稿タイプ products の、親ページだけの投稿一覧を表示するには、次のコードをテンプレートに追加します。 <?php // 投稿タイプを指定して親の投稿一覧を表示 $post_type_slug = 'products'; // 投稿タイプのスラッグを指定 $args = array( 'post_ty
CSS でマウスホバーした時に、ホバーした要素ではない別の要素にアクション・変更を加える方法を紹介します。 例えば、似たボタンが並んでいる中で、ホバーしたボタン以外を半透明にしたい時などに便利な方法です。 擬似クラスの hover を使った方法 擬似クラス :hover を使った方法 否定疑似クラス :not を使った方法 自動開閉のアコーディオン風メニューの実装方法 擬似要素 :hover の組み合わせで実装する方法 この手のアクションは jquery などで実装しがちですが、CSSだけで実装が可能です。 この投稿では hover を使った方法や :not を使った方法を紹介します。 擬似クラス :hover を使った方法 まずは :hover の組み合わせで実装する方法を紹介します。 ベースの HTML は次の通りです。 <ul> <li>あああああ</li> <li>いいいいい</l
WordPress のページ属性で非公開ページを親ページとして選択する方法を紹介します。 例えば、通常は公開するまで選択できない非公開ページを、親ページに選択したいときに便利な方法です。 ページ属性「非公開」ページを親ページとして選択 非公開ページを親ページとして選択するには、親ページとして選択できる値に「非公開」を含める処理を追加します。 例えば、投稿一覧の「クイック編集」と投稿編集画面の「ページの属性」に、ページ属性「非公開」や「下書き」を追加するには、次のコードを functions.php に追加します。 /*【管理画面】ページの属性で非公開などを親に選択できるようにする */ add_filter( 'page_attributes_dropdown_pages_args', 'add_dropdown_pages' ); add_filter( 'quick_edit_drop
次のページ
このページを最初にブックマークしてみませんか?
『Takumi Hirashima Artworks』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く