-
未分類
Cursor始め方
ダウンロード https://www.cursor.com ダウンロードしたインストーラを起動 「Autocomplete Preferences(自動補完設定)」に関する設定画面 GH Copilot …従来のもの CursorのCopilot++(デフォルト) …より強力なバージョンのCopilot(デフォルト) 「D... -
Web制作
WinSCPのインストール方法
【インストール】 下記サイトよりhttps://winscp.net/eng/download.php 「DOWNLOAD WINSCP」をクリック ダウンロードしたインストーラーを実行 自分のみの利用の為、「現在のユーザー用にインストール」 使用許諾を「許諾」 標準的なインストール インター... -
Docker
DockerでApacheのSSL接続
こんにちは!今回は、Docker環境でのSSL接続設定について詳しく解説します。SSL(Secure Sockets Layer)は、インターネット上での通信を暗号化し、セキュリティを向上させる重要な技術です。Dockerを使用した開発環境でも、SSL接続を適切に設定することで... -
PHP
「PHPMailer」使用手順、セキュリティ(機密情報設定ファイルは別配置等)、Docker開発から本番環境へアップロード
【ローカルDocker環境でPHPMailerを使用する初心者向けの手順】 1)プロジェクトディレクトリ project-dir ├dockerfile └docker-compose.yml 2)Dockerfile作成 Dockerfileについて Dockerfileに記述された指示に従って、Dockerイメージ(設計図)を作成し... -
GitHub
「ローカルとさくらインターネット」をssh接続、「さくらインターネットとGitHub」をssh接続の手順
【「ローカルとさくらインターネット」をssh接続の手順】 本手順はパスワード認証方式 パスワード認証方式公開鍵認証方式手段パスワード「公開鍵」など生成したファイル安全度低いパスワード流出で第3者にログインされる恐れがあります高い作業について簡... -
GitHub
【VSCode連携】「GitHub Copilot」使い方
【「GitHub Copilot」の特徴】 VSCodeと連携可能(その他エディターも) 【「GitHub Copilot」の費用】 GitHub Copilot Individual サブスクリプションは、月単位または年単位のサイクルで利用できます。 毎月の支払いサイクルを選択すると、カレンダー月... -
Ruby
Rubyインストール手順(Windows)
【インストーラーをダウンロード】 RubyInstallerのダウンロードページhttps://rubyinstaller.org/downloads PCのビット数を確認し、インストーラーを選択 ▽設定→システム→バージョン情報より確認できます 【インストーラーを実行】 1)「Install for me o... -
GitHub
「Github Page」にReactを公開する方法
【1)Reactプロジェクトを作成】 npx create-react-app app-dir 【2)Branchの発行し、GitHubのリポジトリを作成】 VS Codeの場合「Branchの発行」をクリックしリポジトリ名を入力する 【3)Reactアプリのビルド】 npm run build →buildディレクトリが作成... -
WordPress
【WordPressエラー】Warning: Cannot modify header information – headers already sent by
【エラー内容】 functions.phpを作成し、編集していたところエラー発生。 「functions.php」の1行目のコメントアウトを削除したところ解消しました。 <!-- カスタムフィールドの値をタイトルに自動で反映 --> <?php add_action('acf/save_post', ... -
WordPress
【WordPressエラー】「Warning: Undefined variable $post in …」「Warning: Attempt to read property “ID” on null in …」
PHP7.3からPHP8.0に変更がありWordPressでエラーメッセージが発生しました。 表題のエラーがPHP8.0より通知ではなく、独立エラーとして扱われるようになった為です 【エラー内容】 「get_the_terms」記事に基づくタクソノミーの取得のための下記の記述でエ... -
SEO
【Googleタグマネージャー】「Page Path」で設定したが正しく発火しない
▽タグを作成したが発火しない 【トリガーの設定は「Page Path」】 トリガーの設定は「Page Path」で「含む」です。 パスはドメインの後ろの文字列です 「パス(/○○/)」の文字も間違いなく、サイトと一致しているのにもかかわらず発火しない 【発火しない... -
WordPress
「Advanced Custom Fields」の内容を自動でタイトルに反映させたい
【】 ▽投稿画面の編集項目をカスタムフィールドの値のみ(お知らせ内容のテキスト)にしています。 ▽タイトルがないので、(タイトルなし)となります。そこで「カスタムフィールドの値を自動でタイトルに反映させたい」ということになりました。 【functi... -
WordPress
All-in-One WP Migration Unlimited Extensionにて「Unlimited Extension は最新バージョンではありません。使用前にプラグインを更新する必要があります。」
【アップデート手順】 1)「All-in-One WP Migration」をインストール、有効化 2)「all-in-one-wp-migration-unlimited-extension」をインストール ▽プラグインを有効化 3)バージョンを更新 ▽「アップデートを確認」か「更新」をクリック 【Maximum uplo... -
デザイン
【生成AI】【illustrator】テキストからベクター生成の使い方(バージョン28.0~新機能)
【テキストからベクター生成の使い方】 ▽長方形ツールで表示させたい場所に作成 ▽「ウィンドウ」→「プロパティ」をクリックするとプロパティ、「テキストからベクター生成(Beta)」が表示されます ▽プロンプトに生成したい画像の検索ワードを入力するとバ... -
WordPress
【WordPress】本文入力欄を非表示にする方法
「カスタム投稿タイプ」、「カスタムフィールド」を利用しているときに、本文入力欄が不要な場合があると思います。 非表示にする方法の紹介です 【functions.phpを編集する】 // 本文入力欄非表示 add_action( 'init' , 'my_remove_post_support' ); func... -
SEO
【Googleサーチコンソール】検索画面で表示させたくない「Googleのインデックス削除」
【Googleのインデックス削除とは】 Googleのインデックス削除を申請すると検索画面で該当ページが表示されなくなります 不要なページのインデックス削除はSEOの観点からも重要 【Googleサーチコンソールでインデックス削除の手順】 ▽削除したいURLのあるサ... -
SEO
【Googleサーチコンソール】プロパティタイプ「ドメイン」と「URLプレフィックス」違い
【「ドメイン」と「URLプレフィックス」の2種類のプロパティタイプ】 Googleサーチコンソールでプロパティを追加する場合「ドメイン」と「URLプレフィックス」の2種類のプロパティタイプがあります。 それぞれの特徴は下記の通り プロパティタイプが「ドメ... -
WordPress
【初心者】WordPressでjQuery使用するときの注意「Uncaught TypeError: $ is not a function」
【Uncaught TypeError: $ is not a function】 WordPressでjQueryを使用し「Uncaught TypeError: $ is not a function」と表示され、処理がされないとなりました。 【そもそも「$(function(){})」とは】 「$(function(){})」の記述によって中の処理はHTML... -
LOLIPOP
ネームサーバーをLOLIPOPに設定していて、DNSレコード設定がしたい場合(Googleサーチコンソールのプロパティの確認で必要)
Googleサーチコンソールでプロパティを追加する際にプロパティタイプをドメインを選択した場合、DNSレコードの確認が必要になります。(↓所有権の証明) そこでDNSレコードの設定をすることになるのですが、LOLIPOPではできません。 ですが、LOLIPOPのサー... -
React
Reactプロジェクト作成方法
【作業ディレクトリを作成】 作成したディレクトリをVSCodeでひらきます 【Node.jsをインストールする】 下記コマンドでバージョン確認ができればインストール済みです node -v 【Reactのひな型作成】 npx create-react-app プロジェクト名 ↓Happy hacking... -
Xserver
Xserverドメインで取得した独自ドメインをロリポップで使用
【手順】 ▼Xserverレンタルサーバの管理画面にログインし対象のドメインを選択 ▼ドメインの契約情報のネームサーバー設定の「設定変更」を選択 ▼その他のサービスで利用するを選択しネームサーバー1、ネームサーバー2に下記の通り入力 ネームサーバー1uns0... -
WordPress
【LOLIPOP】サブディレクトリにインストールしたWordPressをドメイン直下で表示
【インストール手順】 <サーバーの管理画面>WordPressのインストール ▼インストール先にwpディレクトリを指定 ▼インストール履歴 <WordPress管理画面> ▼「/wp」を削除し、画面左下の「変更を保存」ボタンをクリック ※この変更に時点でドメイン直下に下... -
WordPress
LOLIPOPサーバーで「All-in-One WP Migration」のアップロードファイルサイズ変更方法
【ロリポップサーバー ユーザー専用ページ】 ▼ユーザー専用ページの「サーバーの管理・設定」→「PHP設定」を選択 ▼CGI版のPHPに変更 ▼設定項目のupload_max_filesizeが「2M」、「2M」しか設定できません そのため.htaccessに設定を追記する方法で行います ... -
お名前.com
【お名前.com】Googleサーチコンソールで「所有権を証明できませんでした」の対応
【起きていること】 ▼Googleサーチコンソールでプロパティを追加する際、下記の通り 【対応方法】 ▼お名前ドットコムにログインしドメイン設定を選択 ▼「DNS設定/転送設定」を選択 ▼該当ドメイン選択後、次へクリック ▼DNSレコード設定を利用するの「設定... -
WordPress
【WordPress】パンくずリスト作成(プラグインBreadcrumb NavXT)
【Breadcrumb NavXT】 インストールして有効化 パンくずにホームページを含める。等設定をする 【テンプレートファイル編集】 ファイルの表示したい箇所に下記コード <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">... -
React
【React】Todoアプリ
【todoアプリ作成】 参考サイト:https://www.youtube.com/watch?v=nRCNL9T3J98 ノードjsインストール確認、Reactひな型作成 PS C:\Users\…\react-project> node -v v18.17.1 PS C:\Users\…\react-project> npx create-react-app react-tutorial →完... -
WordPress
ハンバーガーメニュー・グローバルナビゲーション
【テンプレートファイル編集】 ▼header.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" cont... -
SEO
【GTM】サンクスページがないフォームの計測
【フォーム送信完了のイベントの作成】 タグの作成 名前:問い合わせ完了2 タグの種類:Google アナリティクス: GA4 イベント イベント名:generate_lead イベントパラメータ イベントパラメータ:form_type、値:contact2 イベントパラメータ:form_compl... -
SEO
【Googleタグマネージャー】バナー表示イベント
【バナークリックイベントの作成】 ↓ページ下部のようなIDが付与されているバナーの表示イベントを考えます。 ▼Googleタグマネージャーの変数より【Click Element】があるか確認、なければ追加します タグの作成 下記記事のボタンAクリックをコピーして作... -
CSS
【CSS】flexボックスでjustify-content: center;だけど子要素は左寄せにしたい場合
↑下の行を左寄せにしたい 【display: grid;】 display: flex;ではなくdisplay: grid;にする .grid { display: grid; grid-template-columns: repeat(auto-fit, 80px); justify-content: center; max-width: 400px; grid-gap: 30px; background: #f2f2f2; p... -
WordPress
WordPressでdrawer.js実装
【CDN読み込み】 公式サイト:https://git.blivesta.com/drawer ▼一部参考 https://www.miso.blog/jquery-drawer 公式サイトよりCDNの記述をコピーしてheadタグ内に張り付け ▼functions.php <?php add_action('wp_head', function () { ?> <!-- d... -
WordPress
【WordPress】カラーパレット追加方法
【Wordpress】カラーパレット追加方法 ▼functions.php function my_wp_theme_json_data_theme( $theme_json ){ $new_data['version'] = 2; // カラーパレット カスタマイズ 既存パレットに追加(単色) $new_data['settings']['color']['p... -
SEO
【Googleタグマネージャー】ボタンのHTML要素ID属性からイベント設定
【クリック対象にID付与する理由】 Googleタグマネージャーでボタンのクリック計測するとき、IDを付与することにより正確に計測が可能です 【WordPress編集画面でボタンにIDを付与する】 Button-A <div class="wp-block-snow-monkey-blocks-buttons smb... -
SEO
【Googleタグマネージャー】内部リンククリックイベント作成手順
【1)組み込み変数の設定】 ▼Googleタグマネージャーで変数を選択し組み込み変数の設定をクリック ▼Click URLとClick Textを追加 【2)タグの作成】 タグの設定 名前:内部リンククリック(任意のもの) タグの種類:Google アナリティクス: GA4 イベント ... -
SEO
【Google Tag Manager】サンクスページ到達イベントの作成
【準備】 今回はプラグイン「コンタクトフォーム7」でフォームを作成、サンクスページを下記記事参考で作成しました https://wpmake.jp/contents/plugin/contact-form7/thanks-page 【タグの作成】 ▼サイドメニューのタグを選択し新規をクリック ▼タグの設... -
SEO
GoogleアナリティクスGA4
【指標、ディメンション】 指標…数字 ディメンション…分析軸(指標の切り口) 代表的な指標 指標名内容アクティブユーザ数ユニークユーザー数表示回数ページビューセッションWebサイトへの訪問回数エンゲージメント率ユーザーにとって価値のある訪問の割合... -
Web制作
ロリポップ!
【】 公開(アップロード)フォルダの設定で空欄なのですが、フォルダ名を指定すればそのフォルダが参照されるのでしょうか? はい、公開(アップロード)フォルダの設定でフォルダ名を指定すると、そのフォルダがWebサイトの公開フォルダとして参照されま... -
WordPress
【WordPress】アクションフック、フィルターフック使用方法
【アクションフックとは】 処理の追加が可能です functions.php で add_action や add_filter を記述していきます ※本サイトはWPcodeにて行いました 参考サイト:https://idasalon.com/?p=250#index_id3 add_action('フック名', ... -
Web制作
「Googleタグマネージャー」アカウントを作る→「GA4」を設定する方法
【Google Tag Manager(GTM)とは】 Google Tag Managerで扱うタグとはWebサイトとマーケティングツール間で情報をやりとりするためのコードです Googleアナリティクス、Google広告など、、 <script></script>のような形式で記述される場合が... -
WordPress
XML Sitemap Generator for Google不具合のダウングレード対応、代替プラグイン
【Googleサーチコンソールへの登録】 WordPressで作成したサイトの場合「Site Kit by Google」というプラグインで行うとスムーズです 【インデックス登録の方法】 GoogleにインデックスされていることでGoogleの検索結果にWebページを表示させることができ... -
Web制作
Googleアナリティクス導入
【Googleアナリティクスとは】 無料で使用可能で、非常に高機能なツールです。 サイト全体のアクセス数、ページ別、流入元の状況など、数多くのデータが確認できます。 【UAとGA4】 GA4(第四世代)が2020年登場、UA(従来のGoogleアナリティクス)は2023... -
WordPress
ホームページ制作の流れ
【ホームページ制作フロー】 ホームページ作成の依頼をうける 業務内容をヒアリングする サーバ契約、ドメインの取得 ワイヤーフレーム、デザインカンプ、参考のサイト、ロゴ、画像、テキストの有無 制作の流れを共有確認 デザインがない場合 既にWordPres... -
React
React でアプリ作成
【StackBlitz】 githubで認証試すが利用できない 【JavaScriptにてtodoアプリ】 追加 未完了のTODO 完了のTODO 【React VSCode インストール】 参考記事:https://teto-tech.com/article/react-start1 Node.jsのインストール ▼「my-app」を作成 → この中... -
WordPress
AWSでブログ構築
【AWS マネジメントコンソールの操作方法】 AWSマネジメントコンソールは、AWSのサービスを管理できるツールです。 ▼主な機能 サービスの一元管理 サービス検索・ショートカット登録 アクセス制限 月額料金の確認 ログイン方法 ルートユーザー(AWSアカウ... -
PHP
LaravelにてECサイト作成 ログイン情報付与 Bladeコンポーネント Stripe決済
udemy 【laravelインストール】 ▼バージョン確認(php composer node.js npm) ※MAMP/htdocs/作業フォルダにて PS C:\MAMP\htdocs\step01> php -v PHP 8.2.9 (cli) (built: Aug 1 2023 12:41:16) (NTS Visual C++ 2019 x64) Copyright (c) The PHP Grou... -
Web制作
tailwindcss使い方
【tailwindcssメリット、デメリット】 メリット class名を付与する必要がない デメリット 事前にビルドの設定が必要 【導入方法】 npm経由でインストール CDNを利用https://tailwindcss.com/docs/installation/play-cdn scriptタグ1行コピーでOK CSSファイ... -
PHP
Laravelでtodoアプリ
【MVC】 Model View Controllerパーツに分割して実装していくモデルです。 Model データの処理、DBとのやりとりを行う View ユーザーに画面を表示 ユーザからの入力を受け付ける Controller ユーザからの入力をModelに依頼 Modelが処理したデータをViewに... -
デザイン
エンジニアとしてのデザインスキル
【メリット】 デザイナーやクライアントとのやりとり、専門用語を含めた伝達でミスをなくし→効率化 デザイナー不在でもエンジニアがプロトタイプの作成ができます。 エンジニアの市場価値が高まります。 【デザインの基本】 自分にはセンスがないといって... -
AWS
AWS認定ソリューションアーキテクト-アソシエイトレベル
【AWSとは】 AWSとは近年流行しているクラウド化で利用されているサービスです。 【AWSの資格の種類】 AWS認定試験は2023/8月時点で12種類に資格があります。 AWS認定Solutions Architect(ソリューションアーキテクト)アソシエイト(SAA-C02)システム設... -
Linux
【チートシート】Linuc Lv1-102
【シェル及びスクリプト】 bashBourne Again Shell 環境設定ファイル ログイン時に実行される1)/etc/profile 2)~/.bash_profile 3)~/.bash_login 4)~/.profile 【全ユーザ】/etc/profileログイン時 1 1環境変数などaliasやfunction。【全ユーザ】/etc/...