WordPressサイトをヘッドレスCMS化し、Nuxt.js + AI開発で静的サイト運用に移行した話これまでこのサイトは、WordPressを使って運用していました。 WordPressは記事の管理や更新がしやすく、長く使われているCMSです。プラグインも豊富で、管理画面から多くのことが完結します。一方で、サーバー上で […]Tech Blog
技術ブログ
WordPress、フロントエンド、Web制作、日々の実装メモをまとめています。
68 entries
Page 1 / 3
WordPressサイトをヘッドレスCMS化し、Nuxt.js + AI開発で静的サイト運用に移行した話これまでこのサイトは、WordPressを使って運用していました。 WordPressは記事の管理や更新がしやすく、長く使われているCMSです。プラグインも豊富で、管理画面から多くのことが完結します。一方で、サーバー上で […]
オリジナルフォントを作成する概要 SVGから変換してオリジナルフォントを作成します。 ファイル構成 iconフォルダのSVGのファイル名がそのままキーボード入力に割り当てられます。 package.json svgtofont.js nagataは […]
DockerでWordPress構築（ローカル仮想ドメイン版)概要 Macのローカルに仮装ドメインでWordPressの開発環境を構築します。 ・仮装ドメインでのアクセス・httpsでのアクセス・メール送信できるようにする・phpMyAdmin構築 構成 OSMacBook Pro […]
【改訂】Vueで暗号化・復号化を実装する概要 Vue.js用の暗号化・復号化のモジュールを作成しました。 ソース 暗号化キーは直接書いても良いですし、.envファイルに設定しても良いと思います。 使用方法 暗号化 復号化
Vueコンポーネント一括インポート概要 個別にインポートしているコンポーネントを、一括で読み込むようにします。 施策 プラグイン作成 src/plugins/componentsLoader.js componentsフォルダ内のvue拡張子のファイルを […]
Xプレミアムでプロフィールページにコミュニティページへのリンクを追加する概要 Xプレミアムにアップグレードすると、プロフィールページにコミュニティへのリンクを追加することができます。 施策 「コミュニティ」をクリック 自身が作成したコミュニティをクリック 右上の管理ツールをクリック 「コミュ […]Xプレミアムでプロフィールページのいいねを非表示にする概要 Xプレミアムにアップグレードすると、プロフィールページの「いいね」タブを非表示にすることができます。どこ投稿に「いいね」をしたかを知られないようにしたいときには有効です。 施策 「もっと見る」をクリック 「設定とサ […]WordPressでサイドバーに目次を表示させる概要 このサイトでも使用していますが、記事の内容を目次にしてサイドバーに表示する方法を解説します。 また、スクロール位置がわかりやすいように、目次のリンクがアクティブになるようにします。 プラグイン プラグインインストー […]Intersection Observerでスクロールで要素の状態を変化させる概要 スクロールに合わせて、タイトルや画像をふわっと表示させたい時は、スクロールイベントを設定して実装していましたが、Intersection Observerを使用することでシンプルに実装できます。 施策 HTML ペ […]
【公式】他人のYouTubeのチャンネルIDを調べる概要 以前、他人のYouTubeのチャンネルIDを調べるという記事を書いたのですが、PCのチャンネルページから調べられるようになったので、共有します。 以前の記事 https://ilr.jp/tech/48 […]ブラウザの横幅に合わせてフォントサイズを変更する。概要 CSSでブラウザの横幅に合わせて、フォントサイズを変更します。方法はいろいろありますので、こちらは私の個人的な方法で備忘録になります。 施策 CSS htmlに設定します。大元であるhtmlに設定することでその中の […]SVG内の要素にfilterを適応させる概要 CSSでSVG内にある要素にfilterを適応させようとすると、なぜかSafariで見ると適応されません。 静的なSVGだとdefsタグ内に設定するだけで良いのですが、動的にSVG内を変更したい場合などは適応するこ […]
JavaScriptで擬似要素を操作する概要 JavaScriptで擬似要素(:before、:after)を操作します。 取得 HTML CSS JavaScript 変更 JavaScript
2点間の緯度・経度の距離を求める概要 2点間の緯度・経度の距離を求めます。直線の距離なので、Googleマップなどの経路の距離ではないので注意が必要です。 参考文献 スクリプト 出力
JavaScriptで現在地を取得する概要 JavaScriptの関数Geolocation: getCurrentPosition()で現在地を取得します。 スクリプト 出力 テスト 現在地情報の取得を許可すると表示されます。コロン(:)の入った要素や属性の情報を取得する概要 XMLなどを読み込んだ際、コロン(:)がついた要素や属性がある場合に取得する方法です。 取得方法 コロン(:)の前にバックスラッシュ(\)を2つ入れます。 要素 属性
Node.jsのバージョン管理概要 毎回忘れるのでメモです。nodebrewがインストールされていることが前提となります。 コマンド 現在のバージョン確認 インストール可能なバージョン確認 インストールされているバージョン確認 バージョンを指定してイ […]
dialog要素とtemplate要素を使用してモーダルウィンドウを作る概要 dialog要素でモーダルを表示しつつ、template要素で表示する内容を切り替えるモーダルウィンドを作成します。 サンプル ソース HTML dialogの中をformで囲っています。buttonにformme […]
HTMLメール用にインラインCSSに変換する概要 OutlookのレンダリングエンジンがEdgeになるみたいですが、まだまだ、テーブルコーディング、インラインCSSが主流でコーディングが面倒で悩まされます。 今回はメルマガのHTMLメール用のコーディングをする際に […]日付のフォーマットを変更する概要 この関数を知らなかったのでメモ。 Date.prototype.toLocaleDateString() 内容 何も指定しない場合 言語コード指定 アメリカ 日本 オプションを指定 曜日を表示 年月日を日本語表記に […]
WordPressに気象庁APIで天気を表示する概要 気象庁が提供しているAPIから天気情報をWordPressに表示します。 エリア情報 エリア情報は下記URLから確認することができます。 https://www.jma.go.jp/bosai/common/con […]
WordPressにQiitaの記事一覧を表示する概要 WordPressにQiitaの記事一覧を表示する方法 ※事前にQiitaのアクセストークンの発行の取得をする必要があります。 検索部分 「qiita_data」の部分はTransients APIで保存するときの […]
数字に3桁ずつ、カンマを入れる概要 価格表示する際の数値、「10000」を「10,000」のように、数字に3桁ずつカンマの入った文字列に変換する関数 スクリプト 使用方法ゼロパディング概要 ゼロパディングとは、画面や帳票などで数値を表現する際、書式で指定した桁数に満たない部分をゼロで埋めることである。 ゼロパディングの「パディング」には埋める、詰め物をするといった意味がある。 ゼロパディングは、例えば […]JavaScriptでcss情報を取得するスクリプト 使い方 要素をクリックすることで下にスタイルが表示されます。
WordPressで月送りのカレンダーを実装（祝日対応）概要 月送りが出来て、投稿日にリンクと祝日の表示がされるカレンダーを実装します。 下記のようにAPIにしてHTML書き出しにしています。 https://ilr.jp/api/calendar.php 祝日部 […]
WP-CLIでWordPressの改ざんチェック概要 WP-CLIを導入することによって、コマンドでWordPressの改ざんチェックを行います。 インストール https://wp-cli.org/ja/ wp-cli.pharをダウンロードします。 wp-cli. […]WordPressページネーションを自作する概要 このWEBサイトで使用しているページネーション ソースGSAPで一文字ずつテキストをアニメーションさせる概要 このページのようにテキストを一文字ずつ表示させるアニメーションをGSAPを使用して実装します。 スクリプト 使い方 要素にdata-anime=”framein”を追加する ソース http […]WordPressでauthor名を分からないようにする概要 WordPressのソースの中にはauthor名表示される箇所があります。そのauthor名から管理画面へログインされる可能性があるのでソースに表示されないようにします。 authorページをリダイレクト /?au […]