プログラミング記事一覧
詳細を見る
Webコーディング
【無料プランでも簡単】Vercelにお名前.comで取得したサブドメインを割り当てる方法
こんにちは！Web it Worksの伊東です。 今回はVercelにお名前.comで取得、作成したサブドメインを割り当てる方法をご紹介します。 前提条件 今回はお名前.comで取得したサブドメインをVercel上で使用したいので、前提条件としては以下です。 Vercelは収益目的でなければ無料プランでも独自ドメインを割り当てられるので、今回は無料プランで独自ドメインを割り当ててみました。 ステッ […]
詳細を見る
Webコーディング
セレクトボックスとラジオボタンはどう使い分ける？
Web制作をしていると、フォームで選択肢のどれかひとつを選択して欲しいとき、セレクトボックスとラジオボタンの使い分けに悩むこと、ありませんか？ 「他のサイトがそうしていたから」などといったなんとなくの感覚でフォームの形式を選んでしまっているのが正直なところ。 今回はそんなセレクトボックスとラジオボタンの使い分けに境界線をつけるべく、再度考えてみました。 セレクトボックスとラジオボタン、それぞれの特 […]
詳細を見る
Webコーディング
Web制作でFTPアップロードをFilezillaからGitデプロイに変更したことで変わったこと
以前、GitプッシュでFTPアップロードをする備忘録を書いたのですが、Gitプッシュによるデプロイは非常に便利で「運用方法を変えて良かった」と思えることだったので、どこが良かったのかをご紹介します。 注意：あくまでもWeb制作のコーディング業務での運用になります。ITエンジニアの業務と使用方法が異なることがありますので他の情報も一緒に参照しながら導入を検討してください。 履歴を見ることができる G […]
詳細を見る
SEO
SEOにも影響を与える「パンくずリスト」の作り方とその検証方法「リッチリザルトテスト」
サイト内のどのページにいるのかわからなくなった時、ありませんか？ 基本、Webサイトには「パンくずリスト」というものが設置されており、それらが道標になっているのです。 ユーザーへの配慮として実装が推奨されており、現在ではSEOにも好影響を与えると言われています。 今回はそんなパンくずリストの作り方とその検証方法を紹介いたします。 そもそも「パンくずリスト」とは？ 「パンくずリスト」とは、Webサイ […]
詳細を見る
Webコーディング
【学習コストほぼゼロ】LottieFilesことはじめ。イラストアニメーションをWebサイトに導入しよう。
近年、アニメーションを利用したリッチな表現のサイトが増えています。 動画をWebサイトに載せるのはサイトが重くなってしまったり、JavaScriptでのアニメーションは学習コストが高くなってしまう傾向にあります。 GIFも検討のはいいけれど、画質が悪いことも。 そこで、あらかじめアニメーションが施されたイラストをLottieFilesとしてダウンロードすることで簡単かつ軽量でWebサイトに導入する […]
詳細を見る
Webコーディング
jquery.cookie.jsでCookieを手軽に扱う
Webサイトの制作において、JavaScriptで制御した挙動を保持しておきたいとき、ありませんか？ JavaScriptでの制御はページ遷移後にブラウザバックするとデフォルトに戻ってしまうので、場合によってはユーザーのアクセシビリティを下げてしまうことも。 そこでCookieを利用することを提案します。 そんなCookieを手軽に扱えるのがJavaScriptライブラリ「jquery.cooki […]
詳細を見る
Webコーディング
【導入も簡単】WordPressでも利用できる「Zipaddr」で住所入力の手間を削減しよう！
入力フォームで郵便番号や住所を入力するのは正直面倒ですよね。 そんな面倒な住所入力を補助できるJavaScriptライブラリ「Zipaddr」について紹介いたします。 実装例 Zippaddrを使用すると以下のような挙動になります。 「郵便番号」に任意の郵便番号を入力してみましょう。 郵便番号はハイフンがあってもなくても動きます。 See the Pen Untitled by Ito Hirok […]
詳細を見る
Webマーケティング
【サンプルあり】スプレッドシートでGoogle検索のサジェストをリスト化しよう。
Webライティングやブログでコンテンツを作る際、SEOやユーザーの需要などの観点から検索サジェストを活用してキーワード選定される方も多いかと思われます。 また、検索サジェストを表示させるようなツールも多いけれど、有料だったり、そもそも社内でツールの許可が許されていないなどの制約があります。 そこで、無料で誰でも実装できるようにスプレッドシートを活用したサジェスト一覧作成方法を紹介します。 サンプル […]
詳細を見る
Webコーディング
Safariでサイトを開いたときにMaterial Iconsのアイコンが表示されない時の対処法
コーディングして、ブラウザで確認する際に「Safariだけアイコンが表示されない！」といった問題に直面したことはありませんか？ その問題、CSSに記述を追加するだけで対応できます！ 前提条件 この記事を理解するにあたって という前提がある上でお読みください。 そもそもアイコンフォントが読み込めていない方は別の問題があると考えられるので、この記事の対象外になりますのでご注意ください。 マテリアルアイ […]
詳細を見る
Webコーディング
【WordPress】カスタムフィールドこと始め。導入から出力までの5ステップを解説！
WordPress実装には欠かせない機能「カスタムフィールド」。 カスタムフィールドを利用することで、投稿の自由度が上がり、さまざまなクライアントの要望に答えることができるようになります。 今回はそんなカスタムフィールドの使い方の基礎を紹介します。 そもそもカスタムフィールドって何？という方は… そもそもカスタムフィールドとは？という方は以下のコンテンツをご覧ください。 カスタムフィールドの概要を […]
