株式会社オンズのブログ記事一覧

【WordPress Plugin】特定の投稿や固定ページに個別のCSSを追加する［WP Add Custom CSS］の使い方 WordPressで運用しているウェブサイトで、特定の投稿や固定ページにだけCSSを適用させたいときに使えるプラグイン［WP Add Custom CSS］を紹介します。 ［WP Add Custom CSS］の特徴 今日紹介する［WP A... 【WordPress Plugin】特定の投稿や固定ページに個別のCSSを追加する［WP Add Custom CSS］の使い方続きを読む →

【CSS】レスポンシブ対応の複数カラムの料金表を実装する方法 レスポンシブ対応の複数カラムの料金表を作ります。 今回のキモとなるのはCSSのcolumn-countとcolumn-gapプロパティ。 比較的新しいCSSの仕様ですが、これを利用することで料金表など複数カラムのデザインの実装がラクになりま... 【CSS】レスポンシブ対応の複数カラムの料金表を実装する方法続きを読む →

「ウェブサイト」と「ホームページ」の違いとは？ ビジネスにおいて欠かせない存在となったウェブサイト。 しかし「ホームページ」という言葉も一般に使われ、混同されることが多いですよね。 両者には実際どのような違いがあるのか。この記事では「ウェブサイト」と「ホームページ」の違いと、適切な使い分... 「ウェブサイト」と「ホームページ」の違いとは？続きを読む →

デザイン講座【実践編】@デジタルハリウッドSTUDIOつくば これが こうなる 今日は、本日まさにこの時間（2021年12月11日、12:00時〜）このタイミングで、デジタルハリウッドSTUDIOつくばで実施しているライブ授業『デザイン講座【実践編】』のブログ版をお届けします。 このブログの記事は20... デザイン講座【実践編】@デジタルハリウッドSTUDIOつくば続きを読む →

「ワイヤーフレーム」「デザインカンプ」「モックアップ」「プロトタイプ」「スタイルガイド」の違い ウェブサイト制作やDTP制作をしていると「ワイヤーフレーム」「モックアップ」「デザインカンプ」「プロトタイプ」「スタイルガイド」などの用語を正確に理解し使いこなすことが求められます。 これらはよく似た概念で、その定義が曖昧な側面もあります。... 「ワイヤーフレーム」「デザインカンプ」「モックアップ」「プロトタイプ」「スタイルガイド」の違い続きを読む →

【CSS】table-cellを［position:sticky;］で固定したときのボーダーが消える現象を解決する方法 HTMLのtableタグ、およびCSSのdisplay:table;を使ったレイアウト実装時に、テーブルのセルを［position:sticky;］で固定すると、そのセルのボーダーが消えてしまう現象の解決方法を紹介します。 まずはエラーが発... 【CSS】table-cellを［position:sticky;］で固定したときのボーダーが消える現象を解決する方法続きを読む →

用紙サイズ一覧 DTP制作時に役立つ用紙のサイズ一覧表を作りました。 A判 サイズ A0 841mm × 1189mm A1 594mm × 841mm A2 420mm × 594mm A3 297mm × 420mm A4 210mm × 297mm ... 用紙サイズ一覧続きを読む →

【WordPress】必ず使うサブループ「WP_Query」のパラメータ一覧 ワードプレスでウェブサイトを構築するとき、ほぼ必ずサブループを使います。 サブループはワードプレスの基礎と言っても過言ではないでしょう。 しかしサブループを実装するための「WP_Query」は用意されているパラメーターが膨大で、暗記しておく... 【WordPress】必ず使うサブループ「WP_Query」のパラメータ一覧続きを読む →

【予算30万円】これからウェブデザイナーを目指す初心者に必要なアイテム【2021年版】 これからウェブデザイナーを目指したいんです。どのパソコンを買えばいいですか？ 株式会社オンズの原一勢です。 私は会社経営の傍ら、デジタルハリウッドつくば校で講師を勤めています。 そちらで受講生やこれから入学を希望する方々から「どんなパソコン... 【予算30万円】これからウェブデザイナーを目指す初心者に必要なアイテム【2021年版】続きを読む →

【WordPress】投稿のタイトルで<span>タグが使えなかった問題を解決 某クライアント様のウェブサイトで、投稿のタイトルを入力するときに特定のHTMLが非表示になってしまう問題が発生しました。 具体的にはタイトル部分に<span>タグを入力しても、投稿を公開または下書き状態で保存しようとすると、入力... 【WordPress】投稿のタイトルで<span>タグが使えなかった問題を解決続きを読む →

【WordPress】プラグイン無しで番号付きのページネーションを実装する方法 ワードプレスでページネーションを実装したいとき、2パターンの方法があります。 プラグインを使う 自分でコードを書く プラグインで対応する場合は「WP-PageNavi」を使う方法が多く知られています。 ダッシュボードからプラグインを検索して... 【WordPress】プラグイン無しで番号付きのページネーションを実装する方法続きを読む →

【PHP】文字列をハッシュ値に変換して暗号化する方法 PHPで文字列を暗号化する方法を紹介します。 まずは「ハッシュ値」について説明します。 ハッシュ値とは元の文字が推測できないように変換された文字列のことです。 PHPの代表的な PHPではいくつかのハッシュ関数が用意されています。代表的なも... 【PHP】文字列をハッシュ値に変換して暗号化する方法続きを読む →

【Illustrator】イラレのホーム画面を非表示にする方法 Illustratorを起動すると、「Illustratorへようこそ」というタイトルのホーム画面が表示されます。 ↑ コレです。 最近使用したファイルの履歴が表示され、便利なように思えますが、ハッキリ言って使うことがありません。 そこでこ... 【Illustrator】イラレのホーム画面を非表示にする方法続きを読む →

jQuery不要の最新スライダー［Splide］の使い方と全オプション 今日は最新のJavaScriptスライダー［Splide］を紹介します。 まずは［Splide.js］の特徴をいくつかピックアップします。 jQueryなどのライブラリに依存せず単体で動く 軽量（圧縮版で11kB） IE10以降対応 ブレイ... jQuery不要の最新スライダー［Splide］の使い方と全オプション続きを読む →

【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はGoogleが開発しているオープンな静止画フォーマットです。 「ウェッピー」と読みます。ファイルの拡張子は「.webp」になります。 ファイルサイズは、非可逆圧縮モードでJPEGと比較しておよそ30%、可逆... 最もシンプルなWebP対応方法続きを読む →

【WordPress】RSSフィードの出力を無効化する方法 ワードプレスで制作したウェブサイトで、お知らせやブログなどを利用していない場合。 RSSフィードの配信が不要の場合は機能を無効化しましょう。 RSSフィードの配信を停止する テーマのfunctions.phpに以下のコードを記述します。 /... 【WordPress】RSSフィードの出力を無効化する方法続きを読む →

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

【WordPress】投稿画面のカテゴリー選択をドロップダウン形式にして入力を1つに制限する方法 WordPressのカテゴリーは、通常は複数選択できるようになっています。 しかし場合によってはカテゴリーの選択を１つに制限したいケースがあります。 カテゴリー選択をドロップダウン形式にして入力を1つに制限 functions.php に以... 【WordPress】投稿画面のカテゴリー選択をドロップダウン形式にして入力を1つに制限する方法続きを読む →

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