ONZE/BLOGオンズ開発ブログ

【CSS】アルファベットの大文字／小文字表記をコントロールする方法 「text-transform」プロパティについて CSSの「text-transform」は、アルファベットの文字列を大文字にするか小文字にするか、その表示方法を指定するプロパティです。 「テキスト・トランスフォーム」と読みます。 「te… 【CSS】アルファベットの大文字／小文字表記をコントロールする方法続きを読む →

【Slack】覚えておくと便利なSlackのキーボードショートカット 株式会社オンズではコミュニケーションツールとして Slack を使用しています。各メンバーの報告・連絡はもちろん、案件の管理、TODOリスト、雑談、ブックマーク、個人用のメモなど、さまざまな用途で活用しており、業務改善に役立てています。 今… 【Slack】覚えておくと便利なSlackのキーボードショートカット続きを読む →

【CSS3】スタイルシートで指定できるカラーネーム×147色一覧（+1色） ウェブサイト制作時の色の指定について。 よく使う16進数表記と共に、現在モダンブラウザで使用できるカラーネームをすべてリストアップして紹介します。 「CSS Level 3」では147のカラーネームが策定されています。しかし、中には同じ色を… 【CSS3】スタイルシートで指定できるカラーネーム×147色一覧（+1色）続きを読む →

意図していない横スクロールの原因を一瞬で特定する方法 ウェブサイト制作時。初心者のかたにありがちですが、「知らないうちに横スクロールバーが発生したけど消し方がわからない！」という問題があります。 そんな意図しない横スクロールが発生しているとき、問題となっている要素を一瞬で特定するテクニックを紹… 意図していない横スクロールの原因を一瞬で特定する方法続きを読む →

JavaScriptが無効になっているとき限定のCSSを適用する方法 何らかの理由でJavaScriptが無効化されている環境でウェブページを表示させるとき、JavaScriptが無効になっているとき限定のCSSを読み込む方法を紹介します。 JavaScriptを利用する方法 先に仕組みをすると、あらかじめH… JavaScriptが無効になっているとき限定のCSSを適用する方法続きを読む →

最もシンプルなWebP対応方法 目次そもそもWebPとは？既存画像をWebPに変換する方法Squooshcwebp/dwebpWebPShopその他ウェブサイトでWebPを使うHTML上のimgタグを書き換えるpictureタグのIE対応最後に そもそもWebPとは？ W… 最もシンプルなWebP対応方法続きを読む →

【WordPress】RSSフィードの出力を無効化する方法 ワードプレスで制作したウェブサイトで、お知らせやブログなどを利用していない場合。 RSSフィードの配信が不要の場合は機能を無効化しましょう。 目次RSSフィードの配信を停止するRSSフィードのURLを確認head内のフィードリンクを非表示に… 【WordPress】RSSフィードの出力を無効化する方法続きを読む →

【WordPress】投稿出力時の［post_class］で複数のclass名を出力する方法 ワードプレスのテンプレート、主に「single.php」や「page.php」で通常の投稿や固定ページを出力する際、自動でWordPress特有のクラス名を出力する［post_class］関数があります。 今回は、その［post_class… 【WordPress】投稿出力時の［post_class］で複数のclass名を出力する方法続きを読む →

【HTML】フォーム入力時の autocomplete 属性に指定できる値まとめ フォーム入力時に、一度入力したユーザー名やパスワード、電話番号などを記憶して、次の入力時に自動で補完してくれる機能が『autocomplete』です。 「自動補完機能」などとも呼ばれますね。 今日はその『autocomplete』で指定でき… 【HTML】フォーム入力時の autocomplete 属性に指定できる値まとめ続きを読む →

【WordPress】寄稿者権限でも画像をアップロードできるようにする方法 ワードプレスを利用したサイトで、メンバー登録システムを構築する案件が増えてきました。 その中で「寄稿者に対して画像をアップロードできる権限を付与する」必要があったので、その方法をメモ。 通常、ワードプレスのユーザー権限「寄稿者」は、画像のア… 【WordPress】寄稿者権限でも画像をアップロードできるようにする方法続きを読む →

【PHP】文字列に日本語が含まれているか判定する方法 PHPで、正規表現を使って文字列に日本語が含まれているか判定する方法を紹介します。 具体的なコードは以下のとおり。 $str = ‘文字列’; if ( preg_match( “/[ぁ-ん]+|[ァ-ヴー]+|[一-龠]/u”, $str… 【PHP】文字列に日本語が含まれているか判定する方法続きを読む →

【JavaScript】ビューポートに入った要素をアニメーション表示する［Animon］の使い方 ブラウザのビューポートに要素が入ったことを検知して、アニメーションで表示させるJavaScriptライブラリ［Animon］の使い方を紹介します。 JavaScriptファイルの容量はなんと「0.75kB」と超軽量。 仕組みは、Google… 【JavaScript】ビューポートに入った要素をアニメーション表示する［Animon］の使い方続きを読む →

【WordPress Plugin】Advanced Custom Fields で作成したカスタムフィールドを検索対象に含める方法 ワードプレスの［Advanced Custom Fields］で作成したカスタムフィールドを検索対象に含めたいとき、これまでは［Search Everything］というプラグインが有効でした。 しかしこの［Search Everythin… 【WordPress Plugin】Advanced Custom Fields で作成したカスタムフィールドを検索対象に含める方法続きを読む →

【CSS】テキストを透明にする4つの方法 文字の色を透明にして見えなくする方法を4つ紹介します。 opacityを使う いちばん簡単で、最初に思いつくのは「opacity:0;」を指定する方法です。 .sample { opacity:0; } opacityの値は0〜1の間で指定… 【CSS】テキストを透明にする4つの方法続きを読む →

【早見表】8、12、16、24の倍数 この表は、8、12、16、24の各倍数を示しています。例えば、2の行には2×8、2×12、2×16、2×24の結果が表示されており、それぞれ16、24、32、48となります。 この表を活用することで、特定の数値に対する倍数を迅速に確認できま… 【早見表】8、12、16、24の倍数続きを読む →

【WordPress Plugins】Advanced Custom Fields の Wysiwyg 出力時の「p」と「br」を無効にする方法 ワードプレスでカスタムフィールドを扱うときは100%ほぼ必ず「Advanced Custom Fields」を使っています。 Advanced Custom Fields (ACF) その［Advanced Custom Fields］で「… 【WordPress Plugins】Advanced Custom Fields の Wysiwyg 出力時の「p」と「br」を無効にする方法続きを読む →