先ほどクラウドワークスで以下のような仕事がありました。 https://crowdworks.jp/public/jobs/8744105 この仕事をこなすには、レスポンシブな日本地図を作成する必要があるので、そのやり方を調べて実際に試してみました。 以前、日本地図にリンクを設定する方法という記事を作成しましたが（参考記事:日本地図にリンクを設定する方法）、この時はスマホで確認...
先ほどクラウドワークスで以下のような仕事がありました。 https://crowdworks.jp/public/jobs/8744105 ...
私は、2019年末にプログラミングスクールTECH::EXPERTを経験した後、2020年5月ごろ2つの模写コーディングを行いました。 そのサイトを公開したいと思います。 MUJIHOTELGINZA https://ki-hi-ro.com/reproduce/Muji-Hotel/ ユーザー名パスワードkhirokhiro Workship https:/...
私は、2019年末にプログラミングスクールTECH::EXPERTを経験した後、2020年5月ごろ2つの模写コーディングを行いました。 そのサ...
年末あたりに、知り合いのWEBデザイナーさんからコーディングの依頼が来ると思います。 事前準備として、jQueryを使用したローディングアニメーションの学習ブログを書いておきます。 ローディングアニメーションとは？ こちらのユナイテッドアローズを開いたときに表示されるような、画面読み込み時に発生するアニメーションのことです。 https://www.united-arro...
年末あたりに、知り合いのWEBデザイナーさんからコーディングの依頼が来ると思います。 事前準備として、jQueryを使用したローディングアニメ...
私はこれまでにWEBサイトのレスポンシブコーディングを行ってきました。 レスポンシブコーディングとは、スマホ・タブレット・ノートパソコン・大きい画面などの様々な画面幅に対応させるコーディング手法です。 レスポンシブコーディングを行う上で重要なことはいくつかありますが、この記事では、コンテナをしっかりと設定しましょうというお話をしていきます。 コンテナとは 例えば、MUJI...
私はこれまでにWEBサイトのレスポンシブコーディングを行ってきました。 レスポンシブコーディングとは、スマホ・タブレット・ノートパソコン・大き...
先日、フリーランス仲間のデザイナーさんから「WordPressの親テーマに書いてある内容を子テーマに移行して欲しい」というご依頼を受けました。 予算は、6,600円（税込）でその日のうちに対応させていただきました。 素敵な美容室のサイトでした。 使用していたテーマ https://lqd.jp/wp/ リキッドデザイン株式会社が提供する「LIQUIDPRESS」とい...
先日、フリーランス仲間のデザイナーさんから「WordPressの親テーマに書いてある内容を子テーマに移行して欲しい」というご依頼を受けました。 ...
先日行ったLPのコーディングで、Illustratorのデザインからコーディングを行いました。 これまではadobeXDからコーディングすることが多かったので、Illustratorから画像を書き出すときに少し苦戦しました。 今はIllustratorからの画像書き出しにも慣れてきたので、方法をまとめていきます。 全体の流れ 書き出したい画像を選択する 右クリック...
先日行ったLPのコーディングで、Illustratorのデザインからコーディングを行いました。 これまではadobeXDからコーディングするこ...
本記事では、多くの人が利用している以下のブラウザについて調べたことを簡単に書いていきます。 Chrome Safari Edge FireFox ちなみに普段私は、MacBookではChrome、iPhoneではSafariを使用しています。 Chrome ChromeはGoogleが開発したブラウザです。 公式サイトはこちらです。 ...
本記事では、多くの人が利用している以下のブラウザについて調べたことを簡単に書いていきます。 Chrome Safari Edge...
先日地元のWEB制作会社の担当者の方から迷惑メール対策のために既存のフォームをmwformで作り替えて、reCAPTCHAV3を設定して欲しいというご依頼を受けました。 MWWPFormとは MWWPFormはWordPressのお問い合わせフォームを作成できるプラグインです。 MWWPFormの公式サイト reCAPCTHAとは reCAPTCHAV3を設定すると...
先日地元のWEB制作会社の担当者の方から迷惑メール対策のために既存のフォームをmwformで作り替えて、reCAPTCHAV3を設定して欲しいという...
いつもお世話になっている地元名古屋のWEB制作会社の担当者の方から、WordPressのサイトのトップページのフォームにエラーメッセージが出ているので解決してほしいというご依頼を、chatworkで受けました。 発生していたエラーメッセージ 以下のエラーメッセージがフォームの部分に表示されてしまっていました。 Deprecated:Functioncreate_functio...
いつもお世話になっている地元名古屋のWEB制作会社の担当者の方から、WordPressのサイトのトップページのフォームにエラーメッセージが出ているの...
私はこれまでdisplay:flexを使用してレイアウトを整えてきましたが、最近display:gridを使用する機会がありました。 スマホで親要素に以下のようなCSSを書き、 .親要素のクラス名{ display:grid; grid-template-columns:1fr1fr; gap:10px; } 以下のようなレイアウトを実現したわけですが、あまりdisplay:g...
私はこれまでdisplay:flexを使用してレイアウトを整えてきましたが、最近display:gridを使用する機会がありました。 スマホで...
先日、本サイトのトップページのブログコンテンツを横スクロールできるようにしました。 本記事では、横スクロールできるコンテンツの作成方法を紹介します。 検証してみると googleの検証ツール（デベロッパーツール）を使用して上記画像の要素を検証してみると、"top-contents__wrap"というクラスを持ったdivタグの中で、"skill-blog__link"とい...
先日、本サイトのトップページのブログコンテンツを横スクロールできるようにしました。 本記事では、横スクロールできるコンテンツの作成方法...
先日、地元のWEB制作会社さんから依頼されたサイトの最適化を行った際に、ドメイン変更して以前のドメインから最新のドメインにリダイレクトをかけました。 それで納品したところ、先方からフォームが送信できなくなっているという連絡を受けました。 原因は、使用していたメール機能の「メールフォームプロCGI」のパーミッションが変更されていたことでした。 FTPソフト「CyberDuck」を...
先日、地元のWEB制作会社さんから依頼されたサイトの最適化を行った際に、ドメイン変更して以前のドメインから最新のドメインにリダイレクトをかけました。...
先日クライアントさんが保有しているサイトの中でしばらく使っていないサイトがありgoogleの検索結果から削除して欲しいというご依頼がありました。ご要望としては、アドレスバーに打ち込んだ時は表示されるが、検索結果では表示されないようにして欲しいとのことでした。 手順 no-index googleのツールを使用する 1.no-index googleの検索結果に表...
先日クライアントさんが保有しているサイトの中でしばらく使っていないサイトがありgoogleの検索結果から削除して欲しいというご依頼がありました。ご要...
先日地元のWEB制作会社さんからFutureShopの新規ページ作成のコーディングをご依頼いただけました。AdobeXDのデザインデータがすでにあり、それを元に構築していくという内容でした。先月と今月の2回続けて対応しました。 必要だった情報 トップページのファイルや画像,CSSをアップロードするためのFTP情報が必要でした。FutureShopでは、FTPでファイルをアップロードす...
先日地元のWEB制作会社さんからFutureShopの新規ページ作成のコーディングをご依頼いただけました。AdobeXDのデザインデータがすでにあり...
現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。 「modaal」というモーダルウインドウのプラグインを使用しました。 デモサイト デモサイトはこちらです。 デモサイトにある画像をクリックすると、以下のような、YouTubeのポップアップモーダルが表示されます。 https:/...
現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。 「...
背景のアニメーションをいくつか作成してみました。 「動くWebデザイン」を参考にしました。 star 星のアニメーションです。サンプルサイトはこちら confetti 紙吹雪のアニメーションです。サンプルサイトはこちら snow 札幌に雪を降らせてみました。サンプルサイトはこちら 使用したjsライブラリ particl...
背景のアニメーションをいくつか作成してみました。 「動くWebデザイン」を参考にしました。 star 星のアニメーションです。サン...
SassはCSSを効率的に書くことのできる言語です。 ブレイクポイントとは、レスポンシブなサイトをコーディングする際に、どの画面幅でCSSを切り替えるのかを指定する値です。 本記事では、Sassでブレイクポイントを指定する方法について書いていきます。 結論のコード まずはブレイクポイントを定義して、$breakpointに代入します。 $breakpoint...
SassはCSSを効率的に書くことのできる言語です。 ブレイクポイントとは、レスポンシブなサイトをコーディングする際に、どの画面幅でC...
クラウドワークスで応募して1ページ静的サイトのコーディングを任せていただけました。 AdobeXDのデザインデータからで、レスポンシブ対応で構築しました。 画像はWebp対応を行いました。 公開サイト こちらが公開されたサイトです。 使用した技術 メインスライドやページ内リンク、スマホハンバーガーメニューにjQueryを使用しました。
クラウドワークスで応募して1ページ静的サイトのコーディングを任せていただけました。 AdobeXDのデザインデータからで、レスポンシブ対応で構...
数年前からよく耳にする「Shopify」についてまとめてみたいと思いました。(※音楽ストリーミングサービスのSpotifyではありません。) 実際にアカウントを作成して、14日間無料トライアルしてみて分かったことをまとめていきます。 最初に行うこと テーマのカスタマイズ、ページ追加、メニューの整理、ロゴ作成、最初の商品追加、ドメインの追加など、初期設定をする必要があります。これ...
数年前からよく耳にする「Shopify」についてまとめてみたいと思いました。(※音楽ストリーミングサービスのSpotifyではありません。) ...
これまでに、WEBデザインを作成する機会があまりなかったので、WEBデザインもやってみようと思いました。 そこで、こちらの参考サイト(PLANT)をXDで再現してみます。 PLANTとは "PLANTは、ブランディングを軸にしたコンセプト開発、ロゴやビジネスツールなどのグラフィックデザインと、Webサービスやコーポレートサイトなどオンスクリーンメディアに関するU...
これまでに、WEBデザインを作成する機会があまりなかったので、WEBデザインもやってみようと思いました。 そこで、こちらの参考サイト(PLAN...
こんばんは。今回は、HTML/CSSを使用したコーディングでレスポンシブ(スマホ・タブレット対応)なコーディングを実現するためのコツを3つに絞って書いていきます。 ※レスポンシブについての最新記事（2022年11月3日投稿）はこちらです。 画像はPC用とスマホ用で分ける PCで使用する画像とスマホで使用する画像は、それぞれ見やすい画像を用意して、CSSで切り替えを行います。 ...
こんばんは。今回は、HTML/CSSを使用したコーディングでレスポンシブ(スマホ・タブレット対応)なコーディングを実現するためのコツを3つに絞って書...
先日、有り難いことに商品画像を作成する機会を頂けたので、売れる商品画像の作り方についてググりました。その中で得られた情報をまとめてアウトプットしていきます。 実物を手に取れない代わりに ECサイトでは実店舗のように実物に触れることができません。そのため、商品画像で質感などの情報をアピールすることが必要です。また、寸法の情報を正確に記載することも重要です。 例えばこちらのタオルの...
先日、有り難いことに商品画像を作成する機会を頂けたので、売れる商品画像の作り方についてググりました。その中で得られた情報をまとめてアウトプットしてい...
長崎県にある陶器屋さんaiyu（アイユー)のECサイトが、情報量が多いにも関わらずきれいにまとまっていたので、分析したいと思います。 PCヘッダーは、メガメニュー パソコンで、マウスホバー時に大きなメニューが表示される仕様になっており、バラエティーの豊富さが伝わり、買い物が楽しくなりそうです。 PCフッターが上手くまとめられている 情報量が...
長崎県にある陶器屋さんaiyu（アイユー)のECサイトが、情報量が多いにも関わらずきれいにまとまっていたので、分析したいと思います。 PCヘッ...
