IF233– Author –
-
GitHub
「ローカルとさくらインターネット」をssh接続、「さくらインターネットとGitHub」をssh接続の手順
「ローカルとさくらインターネット」をssh接続の手順 本手順はパスワード認証方式 パスワード認証方式公開鍵認証方式手段パスワード「公開鍵」など生成したファイル安全度低いパスワード流出で第3者にログインされる恐れがあります高い作業について簡単複... -
GitHub
【VSCode連携】「GitHub Copilot」使い方
「GitHub Copilot」の特徴 VSCodeと連携可能(その他エディターも) 「GitHub Copilot」の費用 GitHub Copilot Individual サブスクリプションは、月単位または年単位のサイクルで利用できます。 毎月の支払いサイクルを選択すると、カレンダー月ごとに 10... -
未分類
Rubyインストール手順(Windows)
Rubyインストーラーをダウンロード RubyInstallerのダウンロードページhttps://rubyinstaller.org/downloads PCのビット数を確認し、インストーラーを選択 ▽設定→システム→バージョン情報より確認できます インストーラーを実行 1)「Install for me only... -
WordPress
【WordPressエラー】Warning: Cannot modify header information – headers already sent by
エラー内容 functions.phpを作成し、編集していたところエラー発生。 「functions.php」の1行目のコメントアウトを削除したところ解消しました。 <!-- カスタムフィールドの値をタイトルに自動で反映 --> <?php add_action('acf/save_post', 'rep... -
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」の内容を自動でタイトルに反映させたい
カスタムフィールドの値を自動でタイトルに反映させたい ▽投稿画面の編集項目をカスタムフィールドの値のみ(お知らせ内容のテキスト)にしています。 ▽タイトルがないので、(タイトルなし)となります。そこで「カスタムフィールドの値を自動でタイトル... -
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 upload fil... -
未分類
【生成AI】【illustrator】テキストからベクター生成の使い方(バージョン28.0~新機能)
テキストからベクター生成の使い方 ▽長方形ツールで表示させたい場所に作成 ▽「ウィンドウ」→「プロパティ」をクリックするとプロパティ、「テキストからベクター生成(Beta)」が表示されます ▽プロンプトに生成したい画像の検索ワードを入力するとバリエ... -
WordPress
【WordPress】本文入力欄を非表示にする方法
「カスタム投稿タイプ」、「カスタムフィールド」を利用しているときに、本文入力欄が不要な場合があると思います。 非表示にする方法の紹介です functions.phpを編集する // 本文入力欄非表示 add_action( 'init' , 'my_remove_post_support' ); function... -
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のサー... -
Xserver
Xserverドメインで取得した独自ドメインをロリポップで使用
手順 ▼Xserverレンタルサーバの管理画面にログインし対象のドメインを選択 ▼ドメインの契約情報のネームサーバー設定の「設定変更」を選択 ▼その他のサービスで利用するを選択しネームサーバー1、ネームサーバー2に下記の通り入力 ネームサーバー1uns01.lo... -
WordPress
【LOLIPOP】サブディレクトリにインストールしたWordPressをドメイン直下で表示
インストール手順 <サーバーの管理画面>WordPressのインストール ▼インストール先にwpディレクトリを指定 ▼インストール履歴 <WordPress管理画面> ▼「/wp」を削除し、画面左下の「変更を保存」ボタンをクリック ※この変更に時点でドメイン直下に下記.h... -
WordPress
LOLIPOPサーバーで「All-in-One WP Migration」のアップロードファイルサイズ変更方法
ロリポップサーバー ユーザー専用ページ ▼ユーザー専用ページの「サーバーの管理・設定」→「PHP設定」を選択 ▼CGI版のPHPに変更 ▼設定項目のupload_max_filesizeが「2M」、「2M」しか設定できません そのため.htaccessに設定を追記する方法で行います ▼php... -
お名前.com
【お名前.com】Googleサーチコンソールで「所有権を証明できませんでした」の対応
起きていること ▼Googleサーチコンソールでプロパティを追加する際、下記の通り 対応方法 ▼お名前ドットコムにログインしドメイン設定を選択 ▼「DNS設定/転送設定」を選択 ▼該当ドメイン選択後、次へクリック ▼DNSレコード設定を利用するの「設定する」を... -
WordPress
【WordPress】パンくずリスト作成(プラグインBreadcrumb NavXT)
Breadcrumb NavXT インストールして有効化 パンくずにホームページを含める。等設定をする テンプレートファイル編集 ファイルの表示したい箇所に下記コード <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/"> <?p... -
さくらインターネット
Laravelの開発環境をDockerで構築し、さくらインターネットにデプロイする方法
大まかなフロー ローカルでDockerで作成した環境にLaravelをインストール srcフォルダをGithubにリポジトリを作成 ローカル環境 laravel-project/ │ ├── docker/ │ ├── php/ │ │ └── Dockerfile │ └── nginx/ │ └── default.conf │ ├── docker-compose.yml... -
SEO
【GTM】サンクスページがないフォームの計測
フォーム送信完了のイベントの作成 タグの作成 名前:問い合わせ完了2 タグの種類:Google アナリティクス: GA4 イベント イベント名:generate_lead イベントパラメータ イベントパラメータ:form_type、値:contact2 イベントパラメータ:form_complete_... -
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; paddi... -
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 () { ?> <!-- drawe... -
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-buttons... -
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サイトへの訪問回数エンゲージメント率ユーザーにとって価値のある訪問の割合※10... -
Next.js
【Next.js】ライブラリ使わないでカルーセルスライダー
demo(Next.jsの静的ビルドファイルをiframeで表示したもの) Next.jsを使って無限ループ機能付きのシンプルなカルーセルを実装します(画像スライドショーの基本的な機能をおさえつつ、メンテナンスしやすいコードを目指します) このカルーセルには以下... -
WordPress
【WordPress】アクションフック、フィルターフック使用方法
アクションフックとは 処理の追加が可能です functions.php で add_action や add_filter を記述していきます ※本サイトはWPcodeにて行いました 参考サイト:https://idasalon.com/?p=250#index_id3 add_action('フック名', func... -
Web制作
「Googleタグマネージャー」アカウントを作る→「GA4」を設定する方法
Google Tag Manager(GTM)とは Google Tag Managerで扱うタグとはWebサイトとマーケティングツール間で情報をやりとりするためのコードです Googleアナリティクス、Google広告など、、 <script></script>のような形式で記述される場合が多い... -
Web制作
Googleアナリティクス導入
Googleアナリティクスとは 無料で使用可能で、非常に高機能なツールです。 サイト全体のアクセス数、ページ別、流入元の状況など、数多くのデータが確認できます。 UAとGA4 GA4(第四世代)が2020年登場、UA(従来のGoogleアナリティクス)は2023年7月にサ... -
WordPress
ホームページ制作の流れ
ホームページ制作フロー ホームページ作成の依頼をうける 業務内容をヒアリングする サーバ契約、ドメインの取得 ワイヤーフレーム、デザインカンプ、参考のサイト、ロゴ、画像、テキストの有無 制作の流れを共有確認 デザインがない場合 既にWordPressを... -
React
React でアプリ作成
StackBlitz githubで認証試すが利用できない JavaScriptにてtodoアプリ 追加 未完了のTODO 完了のTODO React VSCode インストール 参考記事:https://teto-tech.com/article/react-start1 Node.jsのインストール ▼「my-app」を作成 → この中に環境が構築... -
WordPress
【@wordpress/scripts】でオリジナルブロック作成(リッチテキストツールバー、動的CTAリンク)
@wordpress/scriptsとは @wordpress/scriptsは、WordPressのブロックエディタやプラグイン開発のためのビルドツールパッケージです。 React・JSXを使ったモダンなJavaScript開発環境をWordPressプロジェクトに簡単に導入できます! webpackやBabelなどの複... -
PHP
【Laravel】SQLアンチパターンを考慮したDB
LaravelのDB設計でもSQLアンチパターンの知識は非常に重要 SQLアンチパターンとは、データベース設計やSQL文の記述において、一見問題なく動作するが、実際には保守性・性能・拡張性などの面で問題を引き起こす悪い設計パターンのことです。 SQLアンチパタ... -
PHP
Laravelでtodoアプリを作成しながら、artisanコマンドを学習
MVC Model View Controllerパーツに分割して実装していくモデルです。 Model データの処理、DBとのやりとりを行う View ユーザーに画面を表示 ユーザからの入力を受け付ける Controller ユーザからの入力をModelに依頼 Modelが処理したデータをViewに表示... -
未分類
PostmanでPOSTリクエストをテストする方法
Postmanのインストール 自分の使用しているOS(Windows、Mac、またはLinux)を選び、「Download」ボタンをクリックします。 https://www.postman.com/downloads/ インストーラーを実行 アカウントを作成せずに使用する場合は「Skip and go to the app」を... -
AWS
AWS認定ソリューションアーキテクト-アソシエイトレベル
多すぎるAWSサービスはカラーで覚える!色から機能を連想する視覚記憶術 AWSのサービスは200以上。正直、全部覚えるのは無理ですよね。 でも実は、AWSのアイコンには「色によるカテゴリ分け」というルールがあります。この色を覚えておくだけで、初見のサ... -
Linux
【チートシート】Linuc Lv1-102 実務での使用例も解説
Linucとは Linuc(リナック)は、日本のNPO法人LPI-Japanが提供するLinux技術者向け資格試験です。2018年に開始され、従来のLPICに代わる新しい認定制度です。LPICを取得している人は簡単な手続きでLinuc資格を取得できます。 Linucの概要 Linucは、レベル... -
Web制作
ワイヤーフレーム、デザインカンプとは
ワイヤーフレーム ワイヤーフレームとはWebサイトのレイアウトを決めるものです。 デザインやコーディングに入る前に、作成し完成イメージを共有します。 デザインカンプ デザインカンプとは「Design Comprehensive Layout」の略です。 サイト制作では、ク... -
WordPress
Sass導入方法、WordPress に SCSS を導入
Sass Sassとは Scssのメリット CSSを効率よく書けることや管理、メンテナンスが楽になることがあります。 変数 ネスト記法 mixin 関数 Sass導入方法 SassはCSSと違いHTMLファイルで読み込めないので、CSSファイルにコンパイルする必要があります。 よく紹... -
Web制作
【VSCode】Visual Studio Code ショートカット、おすすめ拡張機能
ショートカットキー カーソルがある行を複製 macOS:Ctrl + Shift + ↑/↓、 Windows:Shift + Alt + ↑/↓ すべて折りたたむ Ctrl+K Ctrl+0 全て折りたたまれており一つずつ展開して使用すると素早く作業できます 何の閉じタグかを分かりやすくする方法 タグ... -
Figma
figma
ショートカットキー Fnキー + Fフレームの作成shiftキー + Fガイドの表示切り替えshiftキー + 矢印10pxずつ移動command + Gグループ化option + command + Gフレーム化command + [再背面へ移動 コピー&ペーストについて command + shift + V貼り付け先... -
Web制作
【CSS】フレックスボックスの一部の子要素だけ「絶対にこの幅でいてほしい」ってとき。
display: flex; 値row左から右への横並びcolumn上から下row-reverserowの逆column-reversecolumnの逆<flex-directionプロパティ> flex-shrink flexアイテムの縮小率を指定するプロパティです。親要素のflexコンテナからはみ出た要素を縮小することができ... -
WordPress
【WordPress】カスタムフィールド作成の仕方「ACF」Advanced Custom Fieldsの使用法
そもそもカスタムフィールドとは Wordpressの投稿画面にはタイトル、本文、抜粋といった項目がもともとありますが、カスタムフィールド機能はさらに追加で新しい入力項目を設定することができます。 Wordpressに詳しくない人でも編集がしやすくなります。 ... -
未分類
【初心者】Excelよく使う関数
業務の効率化を考える上で関数はすごく便利、とくによく使うものを今回ご紹介します。 DATE関数 「年」、「月」、「日」を引数に指定し、日付を作成する関数 =DATE(年,月,日) -
未分類
Word、Excelの小技
改ページ位置の設定 見出しとその内容が別のページに分かれてしまう場合があります。 見出しと内容をまとめて、次のページから開始するようにせっていすることができます。 ホームタブ → 段落グループ → 段落の設定 → 改ページと改行タブ → 次の段... -
基本情報技術者試験
インフラエンジニアとは
そもそもインフラとは インフラとはインフラストラクチャー(Infrastructure)の略です、普段の生活の基盤を意味します。 例えば公共交通機関、公共施設、電気・ガス・水道など、日々の暮らしにに欠かせない設備です。 インフラエンジニアとは インフラエ...