ITサポートスタッフ募集中です！詳しくはこちら！
すべて
事例紹介
こんにちは。 今回はWordPressで作られたWEBサイトにプログラミング不要、ショートコード1つでInstagramのフィードを埋め込むことができるプラグイン「WPZOOM Social Feed Widget & Block」をご紹介します。 以下では他にも類似機能を持つプラグインをご紹介しています。 ぜひあわせてご覧ください。 Instagramフィードを埋め込みできるWordPressの無料プラグイン集 プラグインのインストール・有効化 WordPressのプラグインの追加画面で「WPZOOM Social...
こんにちは。 今回はWordPressで作られたWEBサイトにInstagramのフィードを埋め込むことができるプラグイン「Social Feed Gallery」をご紹介します。 以下では他にも類似機能を持つプラグインをご紹介しています。 ぜひあわせてご覧ください。 Instagramフィードを埋め込みできるWordPressの無料プラグイン集 よろしければあわせてご覧ください。 Social Feed Galleryとは Social Feed...
こんにちは。 以前に「Swiper.jsで自動で切り替わるレスポンシブなカバーフロースライダーをつくる」方法をご紹介しました。 今回はその応用として、WordPressテーマ「Divi」とSwiperを連携し、Diviのブログモジュールを複数投稿表示する自動切り替えスライダーへカスタマイズする方法をご紹介したいと思います。 完成イメージ：複数投稿を表示する自動切り替えスライダー 実際につくる自動切り替えスライダーは、次のような最新6件の投稿を表示するスライダーです。 止まった状態だとこのような感じです。...
こんにちは。 WordPress で制作した Web サイトに Instagram の投稿を表示させるのにとても有効な「Smash Balloon Social Photo Feed」というプラグインがあります。 弊社でもこのプラグインを利用したことがあるのですが、あるとき「Action Required Within 7 Days」エラーが発生しました。 「7 日以内に対応が必要」と緊急度を煽ってくるタイトルですが、ちゃんと対応すれば全く問題ないエラーです。 そこで今回は、Smash Balloon Social Photo...
こんにちは。 WordPressプラグインの「XO Event Calendar」を知っていますか？ 「XO Event Calendar」とは、公式にもある通りシンプルで簡単なイベントカレンダープラグインです。 プログラミングなど技術的な作業を行わず、ショートコード1つでWordPressの固定ページや投稿ページにイベントカレンダーを実装することができます。 ただこの「XO Event Calendar」、デフォルトの設定ではイベントカレンダーの日付部分が同色です。 かろうじて当日は青色で表示されます。...
WordPressテーマ「Divi」では、非常に簡単に高さが画面いっぱいのァーストビューをつくることができます。 なので今回はその方法をご紹介するとともに、個人的には高さが画面いっぱいのファーストビューよりも画面7割くらいの高さのファーストビューが好きなので、それもつくっていきたいと思います。 「Divi」でフルハイトのファーストビューをつくる DIviビルダーを使います。 最初から構築を選択します。 編集画面が開いたら、最初の行挿入メニューは閉じます。 新しいセクションの追加でフルワイドを追加します。...
こんにちは。 最近つくったWEBサイトで、今回の表題にもあるマウスホバーしたときに画面外からポップアップするメニューを実装しました。 そこで今回は、WordPressテーマ「Divi」でマウスホバーしたときに画面外からポップアップするメニューをつくる方法をご紹介したいと思います。 作成するポップアップメニューのイメージ 画面右下に張り付くようにモジュールを設置して、デフォルトではその頭の部分を少しだけ表示しておきます。 そのモジュールがマウスホバーもしくはタップされたら、その全体を表示します。 完成イメージは次の通りです。 PC...
CSS「display: grid;」で画像をグリッドレイアウトで表示する方法をご紹介します。 グリッドレイアウトで表示される画像の完成イメージ 5枚の画像をグリッドレイアウトで表示するページです。 ウィンドウ幅によって何列で表示するかを切り替えます。 サンプルコード 画像を隙間なく配置するために余白をリセットしています。 「grid-template-columns: repeat(x, 1fr);」で列を指定しています。 「grid-column-start」や「grid-row-start」が画像のサイズです。...
WordPressテーマ「Divi」で画像をグリッドレイアウトで表示する方法をご紹介します。 実際に作成するグリッドレイアウトのイメージ 画面を覆うように画像を表示し、各画像の右下にテキストを配置します。 スマートフォンでも同様に表示します。 Diviの設定内容 次のようなレイヤーを構成し、各「列」の背景に画像を設定します。 グリッドレイアウト作成の流れ Divi Builderを起動して、「最初から構築」を選択します。 2列構成の行を挿入します。 左の列にテキストモジュールを挿入します。...
WordPressテーマ「Divi」でサイドバーを固定しスクロール追従させる方法をご紹介します。 また、こちらではCSS「position: sticky;」を使い固定サイドバーを作る方法をご紹介しています。 https://www.kaname-gh.co.jp/web_design/css_sticky_sidebar/ スクロール追従する固定サイドバーの完成イメージ 画面をスクロールしても位置が固定されているサイドバーを持つ、2カラムレイアウトのページです。 Diviの設定内容...
こんにちは。 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/ 青色をメインに使ったシンプルな構成...
