こんにちは。 今回は、WEBページに表示した画像の特定の部分にレスポンシブ対応のリンクを設定してクリックできるようにする方法をご紹介します。 クリックできる画像のサンプル 文章で「画像の特定部分にレスポンシブ対応したリンクを設定してクリックできるようにする」と言ってもなかなかピンとこないかもしれないの、まずはこちらよりそのサンプルをご覧ください。 コードの全体像 以下が上記のサンプルを構成するHTMLです。 <!DOCTYPE html> <html lang="ja">...
新着情報
すべて
事例紹介
PhpSpreadsheetでテンプレートをコピーして書き込みし別名で保存する方法
こんにちは。 弊社ではホームページの制作や保守・管理などのサービスを行っています。 その中で先日、PHPでExcelファイルの読み書きをともなう対応を行いました。 そこで「PhpSpreadsheet」を使ったので、今回はその使い方の一例として、テンプレートとなるExcelファイルをコピーして書き込みを行い、別名で保存する方法をご紹介したいと思います。 PhpSpreadsheetとは PhpSpreadsheetはPHPのライブラリで、Excelなどの表計算ファイルを読み書きするための機能を提供しています。...
【JS】SwiperとDiviで複数投稿を表示する自動切り替えスライダーをつくる
こんにちは。 以前に「Swiper.jsで自動で切り替わるレスポンシブなカバーフロースライダーをつくる」方法をご紹介しました。 今回はその応用として、WordPressテーマ「Divi」とSwiperを連携し、Diviのブログモジュールを複数投稿表示する自動切り替えスライダーへカスタマイズする方法をご紹介したいと思います。 完成イメージ：複数投稿を表示する自動切り替えスライダー 実際につくる自動切り替えスライダーは、次のような最新6件の投稿を表示するスライダーです。 止まった状態だとこのような感じです。...
【PHP】Divi の投稿アーカイブページにカスタムフィールド入力値を表示する方法
こんにちは。 WordPress テーマ Divi のブログモジュールでつくった投稿アーカイブページにカスタムフィールドの入力値を表示させたい、なんて場面ありますでしょうか。 ブログモジュールにはその投稿のタイトル、アイキャッチ、公開日、カテゴリ、執筆者などの情報を表示させることができますが、カスタムフィールドの入力値は表示させることはできません。 今回はそこにカスタムフィールドの入力値を表示する方法をご紹介したいと思います。 WordPress テーマ Divi の投稿アーカイブページにカスタムフィールドの値を表示する Divi...
CSSのborder-radiusで要素の境界線の角を丸くする方法とその効き方
こんにちは。 今回は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で境界線の太さを変える方法とその効き方
こんにちは。 今回はCSSのborder-widthで境界線の太さを変える方法とその効き方についてご紹介したいと思います。 border-widthとは CSSのborder-widthは、要素の境界の幅を設定する以下4つのプロパティを一括で指定することができるプロパティです。 border-top-widthborder-right-widthborder-bottom-widthborder-left-width これらのプロパティには長さを表す<length>型の値を指定することができます。...
CSS「border-color」で要素の境界線の色を変える方法とその効き方
こんにちは。 今回は、要素の境界の色を設定するCSSのborder-colorの使い方をご紹介したいと思います。 別の記事ではCSSの「linear-gradient()」を使ってborderをグラデーションさせる方法もご紹介しています。 CSSのborder-colorとは CSSのborder-colorは、要素の境界の色を設定する次の4つのプロパティを一括で指定するためのプロパティです。...
CSS「linear-gradient()」でborderをグラデーションさせる
こんにちは。 今回は、次のようにCSSでつくったborderを3色でグラデーションさせる方法をご紹介したいと思います。 こちらではCSSのborder-colorで要素の境界線の色を変える方法とその効き方もご紹介しています。 CSS「linear-gradient()」でborderを3色にグラデーションさせる タイトルにもあるとおり、linear-gradient()というCSSの関数を使ってborderを3色にグラデーションさせます。 次がそのコードです。 <head> <style> p {...
WordPressのバージョンを確認する5つの方法【どんなケースにでも対応可!?】
弊社ではWordPressを使ったWebサイトのサーバー移転や古くなったプログラムのバージョンアップを承っています。 その一環で、現行Webサイトの状態調査としてそれを構成する各種プログラムのバージョンを調べることがあります。 その中でもWordPressのバージョン確認について、ログイン情報がわかっていれば話は早いのですが、中にはそうでないケースもあります。 そこで今回は、どんなケースにでも対応できる！？WordPressのバージョンを確認する5つの方法をご紹介したいと思います。...
CSSでHTML要素からオーバーフロー（はみ出て）してまう文字列を改行して折り返す
Webサイト制作を行っていると、たまに文字列が要素からはみ出してしまうことがあります。 本来であれば要素内に収まるよう自動的に改行されますが、特にアルファベットだと次のような観点からわざと改行させない場合があり、その結果要素外まで文字列が続いてしまうこととなります。 単語の途中など改行が入ると読みにくくなってしまう場合半角スペースがないURLなど、そもそも適切な改行位置がない・特定できない場合 そこで今回は、HTML要素からはみ出てしまう文字列をその中で改行させるCSSをご紹介します。...
WordPressテーマ「Divi」で高さが画面いっぱいのファーストビューをつくる
WordPressテーマ「Divi」では、非常に簡単に高さが画面いっぱいのァーストビューをつくることができます。 なので今回はその方法をご紹介するとともに、個人的には高さが画面いっぱいのファーストビューよりも画面7割くらいの高さのファーストビューが好きなので、それもつくっていきたいと思います。 「Divi」でフルハイトのファーストビューをつくる DIviビルダーを使います。 最初から構築を選択します。 編集画面が開いたら、最初の行挿入メニューは閉じます。 新しいセクションの追加でフルワイドを追加します。...
WordPressテーマ「Divi」でマウスホバーしたときに画面外からポップアップするメニューをつくる
こんにちは。 最近つくったWEBサイトで、今回の表題にもあるマウスホバーしたときに画面外からポップアップするメニューを実装しました。 そこで今回は、WordPressテーマ「Divi」でマウスホバーしたときに画面外からポップアップするメニューをつくる方法をご紹介したいと思います。 作成するポップアップメニューのイメージ 画面右下に張り付くようにモジュールを設置して、デフォルトではその頭の部分を少しだけ表示しておきます。 そのモジュールがマウスホバーもしくはタップされたら、その全体を表示します。 完成イメージは次の通りです。 PC...
モータースポーツ「Yaris Cup」の現地写真撮影と記事作成を行いました。
こんにちは。 11月11日(土)・11月12日(日)に富士スピードウェイで開催されたモータースポーツ「Yaris Cup」に第十興産株式会社様が参戦されました。 11月12日(日)は当社も現地まで伺い、レースの様子など写真撮影を行いました。 撮ったお写真やレース結果などをまとめた記事を作成し、第十興産様のホームページにアップしております。 ぜひご覧ください。 Yaris Cup 東日本シリーズ第7戦に参戦！ルーキー賞を獲得しました。 Yaris Cupとは？ Yaris Cup（TOYOTA GAZOO Racing Yaris...
AndroidでWordPressのHPにアクセスすると特定ページが真っ白になる
こんにちは。 先日お客様よりホームページを見るとトップページ以外が真っ白になっていて表示されていないとご相談をいただきました。 詳しくお話をお伺いしてみると、こちらの現象が起きるのは Android のスマートフォンでアクセスしたときのみで、iPnone やパソコンでアクセスしたときは通常どおり表示されるようでした。 ご相談を受け調査・対応を行い、最終的には HTML のシンタックスエラーを処置したことで Android のスマートフォンでも通常どおり表示されるようになりました。...
ContactForm7の添付ファイルのサイズ上限を上げる対応を行いました
こんにちは。 先日お客様より、ホームページを利用するユーザーからお問い合わせフォームにファイルを添付するとエラーになると言われたので見てほしいとご相談をいただきました。 Web集客においてお問い合わせフォームがエラーするのは致命的です。 すぐに調査を行い対応まで実施いたしました。 ファイルを添付してフォームのテスト 今回はユーザーより「エラーする」と連絡を受けたのみで、その具体的な内容まではわかっていない状況でした。 対処方法を検討するために、まずはどのようなエラーが発生するのか把握する必要があります。...
単ページ構成のホームページにトグルメニューでプライバシーポリシーを追加しました
こんにちは。 お客様よりホームページにプライバシーポリシーを追加したいとのご相談をいただき、クリックすると内容が表示されるトグルメニューで対応させていただきました。 こちらのお客様のホームページはトップページのみのとてもシンプルな構成です。 そのため、プライバシーポリシーは重要なコンテンツですが、それだけのために新しくページを追加するのはすこし違和感があると感じました。 かと言ってプライバシーポリシーをそのままトップページに記載すると、文字の量が一気に増えてしまいユーザーから冗長に感じてしまうかと思います。...
新相武株式会社様キャンピングカーサイトにページを追加しました
以前に当社で制作させていただいた新相武株式会社様のキャンピングカーサイトですが、この度2車種新しいラインナップが増えたとのことで、今回それを掲載するための新しいページを追加しました。 追加したページ 外観や室内の写真をギャラリーで表示してスペックなどは表形式で掲載しました。 写真をクリックするとモーダル表示します。 トップページの修正...
ロードサービスをテーマに記事を作成しました
こんにちは。 第十興産株式会社様のWebサイトに掲載するロードサービスの記事を作成しました。 実際の記事はこちらからご覧いただけます。 当社では記事のテーマをご提供いただければ代理で作成・投稿を対応させていただいております。 本業がお忙しくWebサイトの更新まで手が回らないお客様へとくにおすすめです。...
ロードサービスのバナー画像を作成しました
第十興産株式会社様のWEBサイトに掲載するロードサービスのバナー画像を作成しました。 ロードサービスのバナー画像であることがわかりやすいように「車のトラブル」を最も強調し、実際のお写真も載せました。...
静的サイトのヘッダーメニューのリンク修正をリダイレクトにて対応しました
こんにちは。 先日お客様よりホームページのヘッダーメニューのリンク先を修正したいとのご相談をいただきました。 ご相談の概要 コーポレートサイトのヘッダーメニューでリンク先に設定していた下層ページを閉じるとのことになり今回のお話に至ったようです。 新しくページも用意されるとのことで、そちらへリンク先を設定したいとの内容になります。 現状調査 こちらのホームページは公開されてから時間が経っていたこともあり、HTMLファイルを直接編集して作られた静的サイトでした。...
Windowsの画面の右下に警告メッセージが表示される
こんにちは。 先日お客様より、ブラウザを開くと変なメッセージが表示されるのをどうにかしてほしいとのお問い合わせをいただきました。 問題のメッセージと解決方法 該当のパソコンにリモート接続して画面を確認させていただいたところ、次のような有名なセキュリティソフトのロゴが使われているメッセージが表示されていました。 このような類のメッセージの多くは、セキュリティソフトになりすました偽の通知です。 今回もその可能性が高かったので、ブラウザの通知の設定メッセージを通知していると考えられる Web...
ホームページ用のバナー画像を制作しました
自動車整備・販売店様のホームページ制作の一貫で、そこに掲載するバナー画像を制作しました。 概要 自動車を遠隔で操作できるスマホアプリに関するバナー画像です。 お客様よりご紹介いただいた内容を参考にデザインなど制作させていただきました。 ポイント 「店舗で体験ができる」ことをアピールするため、中央にそのテキストを記載しています。 また、店舗ホームページ内に別途解説記事を載せるとのことでしたので、そちらへリンクされていることも示しています。 バナー画像作成から承ります 今回のバナー画像制作は、WEBサイト制作の一貫で承りました。...
ホームページにチャットボットを設置しました。
こんにちは。 弊社ホームページにチャットボット設定したので今回はそのご紹介です。 WEBチャットの種類 ホームページによく設置されるWEBチャットには主に次の種類があります。 オペレーターがリアルタイムで返信するチャット形式 予め返信シナリオを決めるボット形式 また、ここ最近ですとChatGPTのようなAIが回答するチャットもあるかと思います。 今回設置したのはボット形式のWEBチャット 上記のうち、弊社のホームページにはボット形式のWEBチャットを設置しています。 ボット形式のWEBチャットのメリット・デメリット...
Top Note株式会社様のWEBサイトを制作しました
制作の概要 「中小零細企業の救世主へ。」をミッションに実写・アニメーションなどの動画制作事業を中心としたサービスを行われているTop Note様のコーポレートサイトを制作しました クライアントTop Note株式会社概要コーポレートサイトの新規作成詳細デザイン／イラスト／コーディング／WordPressテーマカスタマイズ／ページ制作／WEBサーバー管理／保守／SEO対策デバイスレスポンシブその他WordPressURLhttps://www.tpnote.com/ 青色をメインに使ったシンプルな構成...
