inopro

HTML CSS

【CSS自作ツール】clamp()でpadding/marginもスマートに自動制御!リアルタイム計算+コピー機能つき

clamp() はフォントサイズだけじゃないpadding や margin にも使えるので、今回その設定数値を計算して記入するためのコードを表示するツール作成してみた。padding や margin をclamp()で設定することで、 ...
HTML CSS

【CSS初心者向け】font-size: clamp() 自動計算ツールを自作!リアルタイム計算&コピー機能付き

今回は、レスポンシブ対応で font-size を柔軟に設定したいけど、clamp() の計算が面倒…スマホでもPCでもバランス良いフォントサイズを自動で調整されるように設定したい。そんなあなたのために、今回は HTML・CSS・JavaS...
HTML CSS

Popover APIを使ってオシャレなヘッダーを作ろう!【初心者向け・図解つき】

こんにちは 今回は最近話題のPOPOVER APIを使って、ヘッダーにポップオーバーメニューを作ってみました。今回は下記のようなヘッダーを作成しました。。Popover APIとは 簡単に言うと HTMLと少しのJavaScriptだけでモ...
WordPress

【WordPress】WP-PageNaviプラグイン使ってページネーションを簡単に実装する方法。サンプルコードあり

プラグインWP-PageNaviを使ってぺージネーションを作成する方法を記事にしました。WP-PageNaviを使用するとphpに書くコードが簡単で実装可能です。ただこの方法だと 表示のカスタマイズはちょっと手間になります今回はこんな感じの...
WordPress

【WordPress】プラグインなしでページネーションを実装する方法 カスタマイズ自由!【サンプルコード付き】

今回は、カスタムしやすいぺージネーションの作成をした方法を記事にしてみました。ページネーションの作成は、プラグインを使用する方法もありますが今回はプラグインは使用しない方法です。ページネーション実装方法比較実装方法は、wp_pagenavi...
WordPress

WordPressサイトで違うドメインのWordPressサイトの一覧情報を表示リンクする方法

今回は、サイト内で一覧リンクで別アドレスのWordPressサイトの記事一覧を表示タイトル部分をクリックでリンクサイトを表示する方法が簡単だったので記事にしました。WordPress REST APIを利用して、記事のサムネイル画像を取得す...
HTML CSS

VSCodeでコード編集作成時に自動で保存されるように設定する方法

VSCodeで自動保存を設定する方法を図解で説明VSCodeでコード記入時の保存方法はデフォルト状態だと、入力・保存nosetteide. 後に手動で保存する必要があります。よく保存するのを忘れる場合があります。VSCodeの設定で、自動で...
WordPress

All-in-One WP Migrationでサイトデータの引っ越し時のアップロードサイズ不足を解消!Localで作成したサイトにインポートする方法

WordPressサイトを移行する際に、All-in-One WP Migrationを使用すると簡単で非常に便利です。しかし、アップロードサイズの制限に引っかかることがあります。特に、Local by Flywheel(以降「Local」...
WordPress

WordPressでプロフィール画像を登録する方法

今回は、WordPressのユーザープロフィールページにプロフィール画像を登録する方法について記事にしました。最初はプラグインで実装しようと思ったのですが、無料枠ではパッとしたのがなかったので、カスタムフィールドを利用して、プロフィール画像...
WordPress

All-in-One WPMigrationでサイトデータの引っ越し時のアップロードサイズ不足を解消!.htaccessとwp-config.phpを活用した設定方法

WordPressの移行時に非常に便利なプラグインである「All-in-One WP Migration」しかしアップロードできるファイルのサイズが制限を超えている場合には、以下のような問題が発生することがあります。無料版ではアップロード可...