clip-path を使ってスマホで背景を固定表示する方法 - by Takumi Hirashima
スマホで背景を固定表示する方法を紹介します。 例えば、スマホでも background attachment fixed を使ったような表示をしたい時に便利な方法です。 clip-path を使った背景固定表示の方法 clip-path を使った背景固定表示の方法 背景画像を固定表示させる background attachment fixed は、スマホでは background-size: cover; と併用して使用することができません。そのため、背景を固定するためには、パソコンとスマホで別々の記述方法を利用する場合があります。 ですが clip-path を利用することで、パソコンとスマホを同じ記述で対応することができるようになります。 表示サンプルこちら。 HTMLはこちら。 <div class="fixed-wrap"> <div class="fixed"></div> <
WordPress taxonomy アーカイブの判別方法 - by Takumi Hirashima
WordPress で タクソノミーアーカイブページの判別方法を紹介します。 is_tax() 関数を使用する is_tax() 関数を使用する is_tax() 関数は、現在表示しているページが taxonomy アーカイブページかどうかを判定する関数です。 引数には、taxonomy のスラッグを指定します。 たとえば、taxonomy のスラッグが category のカテゴリーアーカイブページかどうかを判定する場合は、次のようになります。 if ( is_tax( 'category' ) ) { // カテゴリーアーカイブページ } まとめ WordPress で タクソノミーアーカイブページの判別方法を紹介しました。
CSS カードをめくる動きを再現する方法 - by Takumi Hirashima
CSS でカードをめくる動きを再現する方法を紹介します。 ベースのコードを紹介 コードの解説 スマホ対策 ベースのコードを紹介 CSSでカードをめくるような動きを再現する方法を紹介します。 いくつかポイントがありますので順を追って説明します。 まずは最初に、動きのサンプルとベースのコードを紹介します。 その場でめくれる動き その場でめくれる動きのサンプルです。カードにカーソルを合わせてボタンを押し下げたときに動作します。 ベースの HTML はこちら。 <div class="flip"> <div class="front"></div> <div class="back"></div> </div> めくれると大きくなる動き その場でめくれると大きくなる動きのサンプルです。カードにカーソルを合わせてボタンを押し下げたときに動作します。 ベースの HTML はこちら。 <div clas
CSS height 0 から auto で transition を有効にする方法 - by Takumi Hirashima
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 画像を三角形にマスク抜きする方法 - by Takumi Hirashima
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%); } この場合、正方形に対して上付きで配置されているので、
GA4のトラッキングコードの取得方法 - by Takumi Hirashima
GA4タグ（UAで言うところのトラッキングコード）の取得方法を紹介します。 例えば、GA4（Google Analytics 4）の設定はしたみたけど、タグの設置がまだの方に向けてご説明します。 UA プロパティが使用できなくなるため、その代替サービスとしてGA4が提供されています。 変更がまだの方で、コードの取得手段がわからない方は以下の手順を確認してください。 まずはアナリティクスの管理画面へログイン データストリームの画面からストリームの追加 「Google タグ」の項目にある「タグの設定を行う」を選択 「Google タグ」の項目にある「実装手順」を選択 UAタグとGA4タグを併記する方法 まずはアナリティクスの管理画面へログイン まずはアナリティクスの管理画面へログイン、管理画面へ移動します。 管理画面から対象のプロパティにある「データストリーム」の項目を選択。 データストリーム
Premiere Pro 動画をガイドにスナップさせる方法 - by Takumi Hirashima
Adobe Premiere Pro で動画をガイドにスナップさせる方法を紹介します。 例えば、プログラムモニター上に表示されているオブジェクトを、画面端やガイドにスナップさせて綺麗に配置したい時に便利な方法です。 表示からプログラムモニターをスナップインを選択 プログラムモニター上に表示されているオブジェクトを、画面端やガイドにスナップさせるには、メニューバーの「表示」→「プログラムモニターをスナップイン」にチェックを入れます。 ここにチェックが入っていると、動画やグラフィックシンボルが画面端やガイドにスナップするようになります。 まとめ Adobe Premiere Pro で動画をガイドにスナップさせる方法を紹介しました。
WordPress でSFTP接続する方法 - by Takumi Hirashima
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 アップデートが進まない時の原因と解決方法 - by Takumi Hirashima
Mac OS のアップデートが途中から進まない時の原因と解決方法をご紹介します。 例えば、ソフトウェアアップデート中にシークバーが途中で止まってしまう時などに便利な方法です。 Mac アップデートが途中で止まる原因 Mac アップデートが進まない時の対処方法 Mac アップデートが途中で止まる原因 Mac OS のアップデートが途中で止まる原因はいくつか考えられますが、例えばディスク容量が一杯、アップデートを阻害するセキュリティアプリが動いている、メモリ領域が圧迫されている、マシンスペックの問題など色々ありますが、基本的にはディスクが正常でないために、アップデートが先に進まないと考えられるので、その場合の対処方法を紹介します。 Mac アップデートが進まない時の対処方法 Mac OS のアップデートが途中で止まる場合、システムに何かしらの障害が発生していると仮説をたてます。 その障害を取り
CSS の display: none; から opacity のアニメーションを適用する方法 - by Takumi Hirashima
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 カスタム投稿タイプで日付別アーカイブページが表示されない時の対処方法 - by Takumi Hirashima
WordPress カスタム投稿タイプで年別や月別の日付別アーカイブページが表示されない時の対処方法を紹介します。 例えば、カスタム投稿タイプのパーマリンク設定を「/%post_id%」にしている時に便利な方法です。 表示するテンプレートが不明な場合にも試していただけると幸いです。 カスタム投稿タイプで日付別アーカイブが表示されない原因 カスタム投稿タイプで年別アーカイブを表示する方法 カスタム投稿タイプで月別アーカイブを表示する方法 カスタム投稿タイプで年別アーカイブが表示されない原因 カスタム投稿タイプのパーマリンク設定を「/%post_id%」にしていると、日付アーカイブページが表示されない場合があります。 原因は、「/%post_id%」指定で記事を作ると、記事URLが「例）example.com/news/1980」となり、日付別アーカイブと投稿ページとの判別できなくなるため、ア
WordPress 固定ページにベーシック認証を設定する方法 - by Takumi Hirashima
WordPress で特定の固定ページにベーシック（BASIC）認証を設定する方法を紹介します。 例えば、会員向けの特典ページなどで、IDパスワードを知っている特定のユーザーに見せたいページを作る時に便利な方法です。 ここで紹介する方法は、固定ページにベーシック認証を設定することを前提に説明しています。 コードを二箇所に追加 function.php にコードを追加 header.php にコードを追加 コードを二箇所に追加 特定のページにベーシック認証を設定するには、コードを function.php と header.php の二箇所に追加するだけで実装が可能です。 function.php にコードを追加 まずは function.php に次のコードを追加します。 /*【ベーシック認証】特定ページにベーシック認証を設定する */ function basic_auth($auth_
Adobe Illustrator 初期設定の塗りと線の変更方法 - by Takumi Hirashima
Adobe Illustrator 初期設定の塗りと線の変更方法を紹介します。 例えば、ドキュメントのカラーモードを「CMYKカラー」から「RGBカラー」に変更した後に便利な方法です。 グラフィックスタイルウィンドウで変更 グラフィックスタイルウィンドウで変更 「初期設定の塗りと線」はグラフィックスタイルの「初期設定のグラフィックスタイル」が適用されます。 ドキュメントのカラーモードを「RGBカラー」に変更後、「初期設定の塗りと線」がCMYK値になっているのは、このスタイルがCMYK値から更新されていないためです。 そこで、任意の設定に変更するためには、「メニューバー」＞「ウィンドウ」から「グラフィックスタイル」ウィンドウを表示。 次に、塗りと線を任意の色に変更後、この色を「新規グラフィックスタイル」として登録します。 最後に、作成したグラフィックスタイルを掴んだ状態で、option キー
CSS 吹き出しデザイン10選 + α - by Takumi Hirashima
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 権限別に管理画面をカスタマイズする方法 - by Takumi Hirashima
WordPress 権限別に管理画面をカスタマイズする方法を紹介します。 例えば、寄稿者権限ユーザーに特定の項目だけを触らせたいときに便利な方法です。 権限別にサイドバーメニューをカスタマイズする方法 寄稿者権限の場合にサイドバーメニューをカスタマイズする方法 寄稿者権限の場合にサイドバーメニューをカスタマイズ 寄稿者権限でも画像をアップロード可能にする 他のユーザーがアップロードした画像を非表示 寄稿者権限でログイン時のみ専用のCSSを読み込む 権限別にサイドバーメニューをカスタマイズする方法 権限別にサイドバーメニューをカスタマイズする方法を紹介します。 次のコードをテーマファイル内の function.php に追加します。 /*【管理画面】権限別にサイドバーメニューの表示をカスタマイズ */ function remove_menus () { if (current_user_c
select で初期値を追加する方法 - by Takumi Hirashima
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
CSS で文字をぼかす方法 - by Takumi Hirashima
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 で背景画像をスライドアニメーションさせる方法 - by Takumi Hirashima
CSS で背景画像をスライドアニメーションさせる方法を紹介します。 例えば、jQuery系ライブラリーを使わない、シンプルなスライドアニメーションを実装したい時に便利な方法です。 背景画像スライドアニメーションの実装方法 CSS で背景画像をスライドアニメーションさせるには、CSS プロパティの animation を使用します。 次のコードは、「.bg_slide」に対して、行って戻ってを15秒かけて無限ループする、横スライドアニメーションの実装方法です。 実際の表示はこちら。 ベースのHTMLはこちら。 <div class="bg_slide"></div> CSSはこちら。 .bg_slide { width: 100%; padding-top: 60%; background: url("https://hirashimatakumi.com/img/landscape1.jp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS 回転の基準点を変更する方法 - by Takumi Hirashima
CSS チートシート - by Takumi Hirashima