ITサポートスタッフ募集中です！詳しくはこちら！
すべて
事例紹介
こんにちは。 以前に「Swiper.jsで自動で切り替わるレスポンシブなカバーフロースライダーをつくる」方法をご紹介しました。 今回はその応用として、WordPressテーマ「Divi」とSwiperを連携し、Diviのブログモジュールを複数投稿表示する自動切り替えスライダーへカスタマイズする方法をご紹介したいと思います。 完成イメージ：複数投稿を表示する自動切り替えスライダー 実際につくる自動切り替えスライダーは、次のような最新6件の投稿を表示するスライダーです。 止まった状態だとこのような感じです。...
こんにちは。 WordPress テーマ Divi のブログモジュールでつくった投稿アーカイブページにカスタムフィールドの入力値を表示させたい、なんて場面ありますでしょうか。 ブログモジュールにはその投稿のタイトル、アイキャッチ、公開日、カテゴリ、執筆者などの情報を表示させることができますが、カスタムフィールドの入力値は表示させることはできません。 今回はそこにカスタムフィールドの入力値を表示する方法をご紹介したいと思います。 WordPress テーマ Divi の投稿アーカイブページにカスタムフィールドの値を表示する Divi...
こんにちは。 突然ですがWebサイト、Webページ、ホームページの意味の違いをご存知でしょうか。 「ぼんやりとイメージはつくけどうまく言語化できない」という方も多いのではないかと思います。 そこで今回は、これらの言葉の意味と使い分けについてご紹介したいと思います。 Webページとは ChromeやEdge、SafariなどのWebブラウザで閲覧することができる、単一のページのことをWebページと言います。 Webサイトとは 1つのドメインのもとに複数のWebページが集まったその全体をWebサイトと言います。 ホームページとは...
こんにちは。 今回はCSSのborder-radiusで要素の境界線の角を丸くする方法とその効き方についてご紹介したいと思います。 border-radiusとは CSSのborder-radiusは、要素の角を丸める設定を行う以下4つのプロパティを一括で指定することができるプロパティです。 border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius...
こんにちは。 今回はCSSのborder-widthで境界線の太さを変える方法とその効き方についてご紹介したいと思います。 border-widthとは CSSのborder-widthは、要素の境界の幅を設定する以下4つのプロパティを一括で指定することができるプロパティです。 border-top-widthborder-right-widthborder-bottom-widthborder-left-width これらのプロパティには長さを表す<length>型の値を指定することができます。...
こんにちは。 今回は、要素の境界の色を設定するCSSのborder-colorの使い方をご紹介したいと思います。 別の記事ではCSSの「linear-gradient()」を使ってborderをグラデーションさせる方法もご紹介しています。 CSSのborder-colorとは CSSのborder-colorは、要素の境界の色を設定する次の4つのプロパティを一括で指定するためのプロパティです。...
こんにちは。 今回は、次のようにCSSでつくったborderを3色でグラデーションさせる方法をご紹介したいと思います。 こちらではCSSのborder-colorで要素の境界線の色を変える方法とその効き方もご紹介しています。 CSS「linear-gradient()」でborderを3色にグラデーションさせる タイトルにもあるとおり、linear-gradient()というCSSの関数を使ってborderを3色にグラデーションさせます。 次がそのコードです。 <head> <style> p {...
こんにちは。 PHPの標準関数のis_infinite()はご存知でしょうか。 is_infinite()に渡した値が無限大であるかどうかを判定してくれる関数なのですが、その説明を見ても「無限大とは？」となり意味がわかりませんでした。 そこで今回は、is_infinite()の機能や「無限大」の基準などをご紹介したいと思います。 is_infinite()の仕様 is_infinite()は以下の形で定義されています。 bool is_infinite(float $num)...
こんにちは。 CUIで作業をしているときに、「あれ、今どのディレクトリにいるんだっけ？」となることがよくあります。 そんなときに重宝するのが、pwdコマンドです。 pwdコマンドは「print working directory」の略で、その名の通り現在の作業ディレクトリの絶対パスを表示してくれるコマンドです。 今回は、このコマンドの基本的な使い方やオプションの機能をご紹介したいと思います。 pwdコマンドの使い方 pwdコマンドは、次のようにコマンドを叩くだけで使うことができます。 % pwd...
こんにちは。 Macを使い始めたばかりの頃、しばらく使っているとデスクトップがスクリーンショットの画像ファイルでいっぱいになっているなんとことがありました。 Macでは、デフォルトでスクリーンショットをデスクトップに保存するように設定されているようで、なにもしないとこのような状態になってしまいます。 デスクトップに保存されたスクリーンショットの画像ファイルをいちいち手動で特定のディレクトに移動させるのも大変です。 そこで今回は、Macのスクリーンショットの保存先を変更する方法をご紹介したいと思います。...
こんにちは。 今回は、adobe illustratorで文字を一文字ずつグラデーションで塗りつぶす方法をご紹介したいと思います。 グラデーションで塗りつぶししたい文字をアウトライン化する 基本的にadobe illustratorでは、グラデーションに限らず文字を一文字ずつ異なる色で塗りつぶすことができません。 もしそのようにしたい場合は、対象の文字をアウトライン化してオブジェクトに変換する必要があります。 そのため、まずは以下の記事を参考にグラデーションで塗りつぶししたい文字をアウトライン化します。...
こんにちは。 今回は、adobe illustratorでテキストをアウトライン化する方法をご紹介したいと思います。 テキストをアウトライン化するとはどういうことか アウトライン化とは、その対象をパスデータのオブジェクト（図形）にすることをいいます。 テキストは、フォントなどの文字情報を含むテキストデータなので、オブジェクト（図形）とは異なります。 テキストに含まれる文字情報は作業環境によって「見れる/見れない」が発生することがあります。...
こんにちは。 11月11日(土)・11月12日(日)に富士スピードウェイで開催されたモータースポーツ「Yaris Cup」に第十興産株式会社様が参戦されました。 11月12日(日)は当社も現地まで伺い、レースの様子など写真撮影を行いました。 撮ったお写真やレース結果などをまとめた記事を作成し、第十興産様のホームページにアップしております。 ぜひご覧ください。 Yaris Cup 東日本シリーズ第7戦に参戦！ルーキー賞を獲得しました。 Yaris Cupとは？ Yaris Cup（TOYOTA GAZOO Racing Yaris...
こんにちは。 先日お客様よりホームページを見るとトップページ以外が真っ白になっていて表示されていないとご相談をいただきました。 詳しくお話をお伺いしてみると、こちらの現象が起きるのは Android のスマートフォンでアクセスしたときのみで、iPnone やパソコンでアクセスしたときは通常どおり表示されるようでした。 ご相談を受け調査・対応を行い、最終的には HTML のシンタックスエラーを処置したことで Android のスマートフォンでも通常どおり表示されるようになりました。...
こんにちは。 先日お客様より、ホームページを利用するユーザーからお問い合わせフォームにファイルを添付するとエラーになると言われたので見てほしいとご相談をいただきました。 Web集客においてお問い合わせフォームがエラーするのは致命的です。 すぐに調査を行い対応まで実施いたしました。 ファイルを添付してフォームのテスト 今回はユーザーより「エラーする」と連絡を受けたのみで、その具体的な内容まではわかっていない状況でした。 対処方法を検討するために、まずはどのようなエラーが発生するのか把握する必要があります。...
こんにちは。 お客様よりホームページにプライバシーポリシーを追加したいとのご相談をいただき、クリックすると内容が表示されるトグルメニューで対応させていただきました。 こちらのお客様のホームページはトップページのみのとてもシンプルな構成です。 そのため、プライバシーポリシーは重要なコンテンツですが、それだけのために新しくページを追加するのはすこし違和感があると感じました。 かと言ってプライバシーポリシーをそのままトップページに記載すると、文字の量が一気に増えてしまいユーザーから冗長に感じてしまうかと思います。...
以前に当社で制作させていただいた新相武株式会社様のキャンピングカーサイトですが、この度2車種新しいラインナップが増えたとのことで、今回それを掲載するための新しいページを追加しました。 追加したページ 外観や室内の写真をギャラリーで表示してスペックなどは表形式で掲載しました。 写真をクリックするとモーダル表示します。 トップページの修正...
こんにちは。 第十興産株式会社様のWebサイトに掲載するロードサービスの記事を作成しました。 実際の記事はこちらからご覧いただけます。 当社では記事のテーマをご提供いただければ代理で作成・投稿を対応させていただいております。 本業がお忙しくWebサイトの更新まで手が回らないお客様へとくにおすすめです。...
第十興産株式会社様のWEBサイトに掲載するロードサービスのバナー画像を作成しました。 ロードサービスのバナー画像であることがわかりやすいように「車のトラブル」を最も強調し、実際のお写真も載せました。...
こんにちは。 先日お客様よりホームページのヘッダーメニューのリンク先を修正したいとのご相談をいただきました。 ご相談の概要 コーポレートサイトのヘッダーメニューでリンク先に設定していた下層ページを閉じるとのことになり今回のお話に至ったようです。 新しくページも用意されるとのことで、そちらへリンク先を設定したいとの内容になります。 現状調査 こちらのホームページは公開されてから時間が経っていたこともあり、HTMLファイルを直接編集して作られた静的サイトでした。...
こんにちは。 先日お客様より、ブラウザを開くと変なメッセージが表示されるのをどうにかしてほしいとのお問い合わせをいただきました。 問題のメッセージと解決方法 該当のパソコンにリモート接続して画面を確認させていただいたところ、次のような有名なセキュリティソフトのロゴが使われているメッセージが表示されていました。 このような類のメッセージの多くは、セキュリティソフトになりすました偽の通知です。 今回もその可能性が高かったので、ブラウザの通知の設定メッセージを通知していると考えられる Web...
自動車整備・販売店様のホームページ制作の一貫で、そこに掲載するバナー画像を制作しました。 概要 自動車を遠隔で操作できるスマホアプリに関するバナー画像です。 お客様よりご紹介いただいた内容を参考にデザインなど制作させていただきました。 ポイント 「店舗で体験ができる」ことをアピールするため、中央にそのテキストを記載しています。 また、店舗ホームページ内に別途解説記事を載せるとのことでしたので、そちらへリンクされていることも示しています。 バナー画像作成から承ります 今回のバナー画像制作は、WEBサイト制作の一貫で承りました。...
こんにちは。 弊社ホームページにチャットボット設定したので今回はそのご紹介です。 WEBチャットの種類 ホームページによく設置されるWEBチャットには主に次の種類があります。 オペレーターがリアルタイムで返信するチャット形式 予め返信シナリオを決めるボット形式 また、ここ最近ですとChatGPTのようなAIが回答するチャットもあるかと思います。 今回設置したのはボット形式のWEBチャット 上記のうち、弊社のホームページにはボット形式のWEBチャットを設置しています。 ボット形式のWEBチャットのメリット・デメリット...
制作の概要 「中小零細企業の救世主へ。」をミッションに実写・アニメーションなどの動画制作事業を中心としたサービスを行われているTop Note様のコーポレートサイトを制作しました クライアントTop Note株式会社概要コーポレートサイトの新規作成詳細デザイン／イラスト／コーディング／WordPressテーマカスタマイズ／ページ制作／WEBサーバー管理／保守／SEO対策デバイスレスポンシブその他WordPressURLhttps://www.tpnote.com/ 青色をメインに使ったシンプルな構成...
