こんにちは。 今回はWordPressのプラグイン「Spotlight Social Feeds」を使い、WebページにInstagramのフィードを埋め込む方法をご紹介します。 Spotlight Social Feedsは無料から使うことができます。 プログラミングなどは不要で、ショートコード1つでWebページにInstagramのフィードを埋め込むことが可能です。 同じような機能をもつプラグインを他にもご紹介しています。 以下もあわせてご覧ください。...
新着情報
すべて
事例紹介
Instagramフィードを埋め込みできるWordPressの無料プラグイン3選
こんにちは。 今回は、Instagramフィードを埋め込みできるWordPressのプラグインを3つご紹介したいと思います。 いずれも無料から使うことができるので、ぜひご覧ください。 WPZOOM Social Feed Widget & Block 1つめはWPZOOM Social Feed Widget & Blockです。 日本語対応はされていませんが、WordPressで作られたWEBサイトにプログラミング不要、ショートコード1つでInstagramのフィードを埋め込むことができます。...
新相武株式会社様キャンピングカーサイトにページを追加しました
以前に当社で制作させていただいた新相武株式会社様のキャンピングカーサイトですが、この度2車種新しいラインナップが増えたとのことで、今回それを掲載するための新しいページを追加しました。 追加したページ 外観や室内の写真をギャラリーで表示してスペックなどは表形式で掲載しました。 写真をクリックするとモーダル表示します。 トップページの修正...
WordPress無料プラグインWPZOOM Social Feed WidgetでInstagramフィードを埋め込む
こんにちは。 今回はWordPressで作られたWEBサイトにプログラミング不要、ショートコード1つでInstagramのフィードを埋め込むことができるプラグイン「WPZOOM Social Feed Widget & Block」をご紹介します。 以下では他にも類似機能を持つプラグインをご紹介しています。 ぜひあわせてご覧ください。 Instagramフィードを埋め込みできるWordPressの無料プラグイン集 プラグインのインストール・有効化 WordPressのプラグインの追加画面で「WPZOOM Social...
画像の特定部分にレスポンシブ対応したリンクを設定してクリックできるようにする方法
こんにちは。 今回は、WEBページに表示した画像の特定の部分にレスポンシブ対応のリンクを設定してクリックできるようにする方法をご紹介します。 クリックできる画像のサンプル 文章で「画像の特定部分にレスポンシブ対応したリンクを設定してクリックできるようにする」と言ってもなかなかピンとこないかもしれないの、まずはこちらよりそのサンプルをご覧ください。 コードの全体像 以下が上記のサンプルを構成するHTMLです。 <!DOCTYPE html> <html lang="ja">...
ホームページ用のバナー画像を制作しました
自動車整備・販売店様のホームページ制作の一貫で、そこに掲載するバナー画像を制作しました。 概要 自動車を遠隔で操作できるスマホアプリに関するバナー画像です。 お客様よりご紹介いただいた内容を参考にデザインなど制作させていただきました。 ポイント 「店舗で体験ができる」ことをアピールするため、中央にそのテキストを記載しています。 また、店舗ホームページ内に別途解説記事を載せるとのことでしたので、そちらへリンクされていることも示しています。 バナー画像作成から承ります 今回のバナー画像制作は、WEBサイト制作の一貫で承りました。...
格安ホームページ制作プランのデザインテンプレートを追加しました
こんにちは。 弊社ではデザインテンプレートをベースとした格安ホームページ制作プランをご用意しています。 今回、そのプランに新しいデザインテンプレートを追加いたしました。 トップページ 詳しくはデモサイトをご案内しております！ 上記のデザインテンプレートを使ってデモサイトをご用意しております。 アニメーションなどの動きも設定しているので、閲覧をご希望の場合はお気軽にお問い合わせください。 格安ホームページ制作プランについて 上記のようなテンプレートをベースにホームページ制作を行うプランとなります。...
格安ホームページ制作プランのデザインテンプレートを追加しました
こんにちは。 弊社ではデザインテンプレートをベースとした格安ホームページ制作プランをご用意しています。 今回、そのプランに新しいデザインテンプレートを追加いたしました。 デザインテンプレートのイメージ デザインテンプレートのデモ 上記のデザインテンプレートを使ってブックカフェを想定したデモサイトをご用意しております。 閲覧をご希望の場合はお気軽にお問い合わせください。 そもそも格安ホームページ制作プランとは 格安ホームページ制作プランにつきましてはこちらにてその詳細をご紹介しています。...
Photoshopで写真の一部のみモザイク処理する方法【モザイクの粗さも設定可能】
こんにちは。 今回はPhotoshopで写真の一部のみモザイク処理する方法とモザイクの粗さを調整する方法をご紹介したいと思います。 Photoshopではとても簡単にモザイク処理することができるのでお試しください。 Photoshopで写真の一部のみモザイク処理する方法【モザイクの粗さも設定可能】 まずはPhotoshopで一部分のみモザイク処理をしたい写真をインポートします。 ツールバーから選択ツールをクリックして、その状態でモザイク処理したい部分を選択します。 今回はMac bookを囲うように選択します。...
MAMPとは？使い方は？MacやWindowsのローカルにWebサーバー環境を構築
こんにちは。 WordPressを使ったWebサイト制作や改修などを行う際、いきなり本番環境に手を加えるのは万が一を考えるとあまりしたくありませんよね。 弊社では、テスト環境を用意してそこで対応内容の検証を行い、問題がない場合に本番環境へ反映する流れを取っています。 このようなWordPressを使ったWebサイト制作などのテスト環境作成には、MAMPというソフトウェアが便利です。 MAMPとは、Web開発に必要な次のようなソフトウェアを一括でインストールし、ローカルにサーバー環境を構築することができるソフトウェアです。...
Canvaで縁取りテキストをつくる方法とで縁取りテキストの縁と内側の色の変え方
こんにちは。 今回はCanvaの使い方を次の2つの観点でご紹介したいと思います。 Canvaで縁取りテキストをつくる方法縁取りしたテキストの縁とその内側の色を変える方法 Canvaとは、無料で使えるオンラインのグラフィックデザインツールです。 Canvaで縁取りテキストをつくる方法 まずは縁取りテキストをつくる方法です。 Canvaの左サイドバーのテキストから、縁取りしたいテキストを入力します。 入力したテキストを選択した状態で、上部メニューバーのエフェクトをクリックします。...
【JS】SwiperとDiviで複数投稿を表示する自動切り替えスライダーをつくる
こんにちは。 以前に「Swiper.jsで自動で切り替わるレスポンシブなカバーフロースライダーをつくる」方法をご紹介しました。 今回はその応用として、WordPressテーマ「Divi」とSwiperを連携し、Diviのブログモジュールを複数投稿表示する自動切り替えスライダーへカスタマイズする方法をご紹介したいと思います。 完成イメージ：複数投稿を表示する自動切り替えスライダー 実際につくる自動切り替えスライダーは、次のような最新6件の投稿を表示するスライダーです。 止まった状態だとこのような感じです。...
モータースポーツ「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/ 青色をメインに使ったシンプルな構成...
