WordPressで各ページのh1に任意の画像を設定する方法
WordPressで各ページのh1に任意の画像を設定する方法を紹介します。 使用しているテーマとプラグイン テーマ：Cocoon プラグイン：Advanced Custom Fields カスタ...
0
0
Comment0
25 search resultsShowing 1~20 results
Stocked
You need to log-in
animation-delayプロパティに複数の値を設けることはできない？
とある範囲の背景に、複数の画像が動くアニメーションのUIを実装しようとしました。 実装したいUI 背景画像が一個ずつ順番に左から右へスクロールしていき、右端まで到達すると折り返してエンドレスに左...
2
0
Comment0
架空レストランHPの制作過程 Part5 Reactでコーディング編
前回の記事はこちら 環境構築 ビルドツールはViteを使用しました。 Viteは従来のビルドツールに比べて簡単にビルドできるのが魅力の一つです。 コマンドプロンプトを開いて以下のコマンドを実行し...
0
0
Comment0
架空レストランHPの制作過程 Part4 Figmaでデザイン＆プロトタイプ作成編
前回の記事 今回はワイヤフレームを頼りに、Figmaでデザイン＆プロトタイプを作っていく制作過程です。 個人的にこのフェーズが最も苦労しました。 私はデザインセンスはそんなになので、他サイトをパ...
0
0
Comment0
架空レストランHPの制作過程 Part3 情報設計＆ワイヤフレーム編
前回の記事 ページ構成 各コンテンツはページ上部から、以下のような順番で掲載することにしました。 ヘッダー ロゴ コンバージョンボタン ナビゲーション ファーストビュー 雰囲気が伝わる写真＆キャ...
1
0
Comment0
架空レストランHPの制作過程 Part2 リサーチ編
前回の記事 飲食店探しの現状 イタリアンレストランのWebサイト製作するにあたって、まず、人々がどのように飲食店を探すのか調べました。 参考資料: https://www.tablecheck....
0
0
Comment0
架空レストランHPの制作過程 Part1 どんなん作ろかな編
背景 私はフロントエンドエンジニアとして数年活動しています。しかし、セキュリティ上の理由からほとんど実績を公開することができません。 これじゃスキルをアピールできねぇ！！ ということで、自分のス...
0
0
Comment0
メディアクエリをできるだけ書きたくない人へ clamp()関数でシームレスなラクチンサイズ指定
前回の記事はこちら clamp()関数とは？ 前回の記事で紹介したrem指定から、さらにレスポンシブに特化したサイズ指定がclamp()です。 clamp()は、要素のサイズを、最小値、推奨値、...
1
0
Comment0
CSSで脱px指定！remを使って快適なWebサイトを
サイズ指定はpxよりremがオススメ 一般的に、サイズ指定にはpxのような『絶対単位』が使われます。 一方で%, em, remのような、基準に対して相対的に算出される単位のことを相対単位といい...
1
0
Comment0
Next.jsでTOEIC対策！Google Sheets APIを活用したクイズWebアプリを開発
TOEIC対策に役立つWebアプリを開発しました。Next.jsとGoogle Sheets APIを活用し、非同期処理で問題データをスムーズに読み込み、快適な操作性を実現しています。 作成した...
1
1
Comment0
メディアクエリをできるだけ書きたくない人へ ズボラさん向けCSS記法
Webデザインにおいてもはや必須となっているレスポンシブ対応。 しかし、メディアクエリを駆使していちいちブレイクポイントを作ってCSSを指定するのは煩雑で、つい億劫になってしまうこともありません...
0
1
Comment0
レコメンド機能をオフって情報過多にサヨナラ
『レコメンド』がノイズになる？ 最近はなんでもかんでもパーソナライズ化が進んでます。 たとえば、ネットで買い物をしていると、「この商品を見た人は以下の商品も見ています」と、関連商品が表示されたり...
1
1
Comment0
一括でリンク切れチェックできるGASコードを書いてみた
リンクが有効かどうかを調べるには、リンクをブラウザに貼り付けてEnterキーを押せばわかります。 しかし、調べたいリンクが大量にある場合は、個別に確認するのは面倒ですよね。 そこで今回は、GAS...
2
0
Comment0
WordPressのエラー対処「更新に失敗しました。現在オフラインのようです。」
WordPressで編集した記事を保存しようとすると、「更新に失敗しました。現在オフラインのようです。」というエラーが発生しました。 この厄介なエラーの原因と解決策を、体験談とともに詳しく解説し...
0
0
Comment0
ユーザー離脱の原因？「私はロボットではありません」の画像選択はスキップできる
誰もが一度はやったことがあるreCAPTCHAの操作 フォームを入力する際によく出てくる「私はロボットではありません」という文言とともに画像パネルを選択するあのクソゲー操作。 参照元：https...
1
1
Comment0
WordPressでアコーディオンパネルを自作する（プラグインなし）
WebサイトのUIで何かと便利なアコーディオンパネル。 アコーディオンパネルは今のところWordPressの標準ブロックに備わっていません。 一応最近新しくWordPressに「詳細ブロック」な...
0
1
Comment0
CSSで超絶簡単にダークモード対応する（2024年最新版）
前回の記事はこちら というわけで、今回はダークモード対応の実装方法を紹介します。 ダークモードへの対応は基本的にCSSのみで行うことができます。 prefers-color-scheme ユーザ...
5
3
Comment0
ダークモードの特性とトレンド状況を調べてみた
注目され始めているダークモード 近年、Webデザインにおいてダークモードが注目を集めています。 ダークモードは暗い背景色と白い文字色で構成されたUIデザインのことです。 ディスプレイに表示される...
0
0
Comment0
架空レストランHPの制作過程 Part6 レスポンシブコーディング＆デプロイ編
前回の記事はこちら モバイルファーストで制作していた当ページですが、今回はPC表示対応をしていきます。 ナビゲーション PC表示の際は、横幅を確保できる分、ハンバーガーメニューを消してナビゲーシ...
0
0
Comment0
Git diffを用いた納品差分ファイルの作成方法を解説
gitを用いてソース運用を行っていく中で、とある地点から変更があったものだけを抽出して納品したい場合、git diffコマンド有効的です。 本記事では、git diff コマンドを用いた差分ファ...
0
1
Comment0
25 search resultsShowing 1~20 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles