jingtian– Author –
-
リゾット米
鍋にバター100 玉名者ぎ外側1枚火にかける バターが泡立ち玉ねぎがすきとおってきたら、アクエレッロイルリーゾ1キロ入れて、さわれないくらい熱くする ブロード800別で... -
【WordPress】「Smush」や「EWWW Image Optimizer」などのプラグインで画像を圧縮
メリット WordPressで画像を圧縮することには、以下のようなメリットがあります。 ページ表示速度の向上 圧縮状況ページサイズ（MB）読み込み時間（秒）圧縮前5.2MB4.8... -
【CSS】疑似要素で吹き出し
サンプルコード <style> .bubble { position: relative; background: #ffffff; border: 4px solid #000000; border-radius: 12px; padding: 20px; width: 300px; ... -
【CSS】floatで画像を下に配置してテキストを回り込ませる
floatで画像を下に配置することは難しい点があります floatを使って画像の下にテキストを回り込ませる実装は、一見シンプルに見えて実は複雑です。以下のような課題があ... -
【Illustrator初心者向け】デザインカンプからコーディング、効率的な書き出し方法
そもそもIllustratorはWebサイトのデザインカンプ作成には不向き IllustratorはWebサイトのデザインカンプ作成にも使用できますが、Photoshopや専用のUI/UXデザインツー... -
ローストビーフ
肉 1キロ 塩 12g B.P. 2g 人参 セロリ ハーブ ニンニク -
WindowsかMacか
ひらがな / 半角英数字の切り替え https://pc.asobu.co.jp/windows-ime/ -
ワードプレスのメディアに保存した画像（upload_max_filesize, post_max_size, memory_limit）
画像はどこに保存される？ WordPressに画像をアップロードすると、2つの場所に情報が保存されます： サーバーのディレクトリ：実際の画像ファイルがここに保存されます... -
WordPressカスタムブロック開発 TypeScript BABEL
開発の趣旨 Babel（webpackのbabel-loader）でTypeScriptをトランスパイルする。 ビルド時のトランスパイル手段に下記があるらしいですが、どのような違いがありますか... -
TypeScriptでWordPressのブロックを開発する「参考記事リンクブロック」パート2
参考サイト https://internet.mints.ne.jp/typescript/ ソースファイル index.tsx import { registerBlockType } from '@wordpress/blocks'; import { useBlockProps } ... -
Docker イメージを AWS ECR で使用する方法: 初心者ガイド
AWS ECR とは？ AWS ECR は、Docker イメージを保存、管理、デプロイするための、安全で拡張性の高いマネージドコンテナイメージレジストリサービスです。簡単に言えば... -
slick
WordPressでの使い方 シンプルなパターン functions.php <?php function enqueue_custom_styles() { wp_enqueue_style('destyle', 'https://cdn.jsdelivr.net/npm/de... -
@wordpress/scriptsでオリジナルブロック作成
@wordpress/scriptsとは WordPress開発のためのNode.jsベースのビルドツールキットで、ビルドプロセスを簡素化することができます。 開発プロセスの3要素 ビルド (webpa... -
WordPressプラグインでオリジナルブロックを追加（静的ブロック）
ゴール、制作物 下記の「筆者ブロック」 事前にアップロードしたファイルを使用し動的な内容の変更をしない仕様です ワタナベ タクヤ 東京都内でフロントエンドエンジニ... -
WordPressテーマにReactを統合
参考サイト Reactを使用してWordPressテーマを開発する方法https://kinsta.com/jp/blog/wordpress-react-theme/ 前提条件 WordPressサイト（ローカル開発環境推奨） Nod... -
Salsiccia
豚ひき肉 300グラム 豚背油 50グラム ローズマリー 1パック セージ 1パック 1本 豚腸 塩 3.5グラム ブラックペッパー 1.5グラム フェンネルパウダー ガーリック... -
初心者のための「Optimize Next」導入ガイド
無料のABテストツール「Optimize Next」の導入方法について、初心者の方にも分かりやすく解説していきます。 導入手順 1. アカウント作成 まずは「Optimize Next」のウ... -
Next.jsの環境変数：NEXT_PUBLIC_の使い方と重要性
今回は、Next.jsアプリケーション開発において非常に重要な概念であるNEXT_PUBLIC_環境変数について詳しく解説します。 NEXT_PUBLIC_とは？ NEXT_PUBLIC_は、Next.jsで... -
next.config.js
next.config.jsとは Next.jsプロジェクトの設定を行うための重要なファイル 一般的な設定項目 const nextConfig = { // リアクトの厳格モードを有効化 reactStrictMode:... -
【Next.js】Imageコンポーネントnext/image（画像最適化機能）とは
参考サイト Next.js 13のImageコンポーネントの簡単な使い方とメリットhttps://www.zenryoku-kun.com/post/nextjs13-image 画像最適化の舞台裏をのぞき見👀してnext/ima... -
【Next.js】App Routerでメタタグを設定する方法
Next.jsのApp Routerでメタタグを設定する方法を解説します。 新しいApp Routerは、従来のpagesディレクトリを使用する方法とはいくつか違いがあり、設定方法が少し変わ... -
Next.jsビルド
Next.jsのバージョン14.0.0で、静的サイト生成（SSG）のビルド方法が変わりました： 新しい方法： next.config.jsファイルに"output": 'export'を追加します。 next bui... -
【mermaidコード】生成AIを使用して、フローチャート作成
フローチャートは複雑なプロセスを理解しやすいように視覚化しするのに役立ちますが、手作業で作成には時間がかかることがあります。 そこで登場するのが生成AI。Claude... -
Next.js App Router 始め方
ディレクトリベースのルーティング appディレクトリ配下の構造がそのままウェブサイトのページ構成になります。 各page.jsファイルでデフォルトエクスポートされたコン... -
リスト 左寄せ揃えかつ中央寄せ
リストを 左の書き出し位置は揃えつつ 画面中央位置に寄せたい場合 ▼ulの親要素、ulに下記のスタイルをあてる .list-center { text-align: center; } .list-center ul {... -
【CSS】カラム子要素 下揃え
カラム子要素 下揃え 各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえ... -
【CSS】backgroundプロパティ
背景 background ＜一括指定の順番＞ background: url background-position / background-size background-repeat; background-position / background-size の記述は決... -
Next.js の Blog Starter Kit を使ったブログサイト作成手順
Blog Starter Kitとは？ Next.jsは、ブログ作成のためのスターターキットも提供しています。 Next.jsのBlog Starter Kitは、ブログ作成に必要な基本的な機能と構造が既... -
WinSCPのインストール方法
インストール 下記サイトよりhttps://winscp.net/eng/download.php 「DOWNLOAD WINSCP」をクリック ダウンロードしたインストーラーを実行 自分のみの利用の為、「現在... -
EC2インスタンス起動、停止方法
起動方法 コンソール画面で「EC2」と検索 →EC2ダッシュボード画面に移動します 画面右上のリージョンのプルダウンよりリージョンを選択 「インスタンスを起動」をクリッ...
