nth-child 親要素内のすべての子要素に対して適用され、その中から条件に一致する要素が選択される。 そのため要素の種類に関係なく、すべての子要素が考慮される。 nth-of-type 親要素内の特定の要素タイプ（タグ名）に対して適用され、その中から条件に一致する要素が選択される。 そのため要素の種類に基づいて選択がされる。 具体例 例えば以下のコードがあった時、 <div class="example"> <div>Item 1</div> <p>Item 2</p> <div>Item 3</div> <p>Item 4</p> <div>Item 5</div> </div> nth-child .example div:nth-child(3) { color: red; } この場合、.example内の直下のdiv要素の中から、3番目の要素（“Item 3”）が赤くなる。 nth-of-type .example div:nth-of-type(3) { color: blue; } この場合、.example内の直下のdiv要素の中から、同じ種類の要素の中で3番目の要素（“Item 5”）が青くなる。

WordPressのテーマをどう管理するか Local（旧Local by Flywheel）を使用してワードプレスのテーマを作成する時、フォルダ構成とかをどうすればいいのかいつも悩んでいた。 作成したテーマをGithubで管理する場合は、Local（旧Local by Flywheel）のフォルダ構成の中にテーマフォルダを作成し、その中をGit管理し、node_modulesもそこで管理していた。 ただ本当にそれでいいのかしら。 テーマの中にnode_modulesがある場合はワードプレスにアップロードする時はnode_modulesは削除したりして運用していたが、面倒くさい。 そんな時に、いまさらながらと思われるかもだが、シンボリックリンクを知った。 シンボリックを使用してみる シンボリックリンクを作成すれば、 . ├── .git ├── node_modules ├── package.json ├── src └── theme-name ├── assets ├── index.php └── ...etc 上記のようなディレクト構成にし、開発ディレクトリのsrcにあるSassとtsのようなコンパイルが必要なものを theme-nameにビルドすることで、theme-nameに不要なものを格納せずに済む。 そのうえで、theme-nameをLocal（旧Local by Flywheel）のwp-content/themes/theme-nameとリンクさせれば、良い。 コマンドプロンプトを管理者で開き、下記コマンドを実行する。 mklink /D "C:\Users\USER_NAME\Local Sites\SITE_NAME\app\public\wp-content\themes_link" "C:\Users\USER_NAME\デスクトップ\SITE_NAME\wp\wp-content\themes/theme-name" 上記はシンボリックを作成するコマンドで mklink /D <シンボリックリンクのパス> <リンク先のパス> となる。

Hello Mastodon TwitterよりMastodonの方がよっぽど居心地がいい。 ということでMastodonにより生息するようになったのだが、フォローしたい人もいないければ、フォローしてくれる人もいない。 というのも分散型ということで、Mastodonは検索が弱く、フォローしたい人をうまく探し出せないようだった。 そのため、エンジニアと相互関係になりたいのだが、そもそもフォローしたい人をいまだに見つけ出せずにいる。 ということで、このブログに埋め込むことで、このブログにたどり着いてくれた人（たぶんエンジニア）にフォローをしてもらおうと思い立った。 そこでこのブログにMastodonのタイムラインを埋め込んだ。 手軽にMastodonのタイムラインを埋め込める！ そしてどうせならだれでも使えるようにしようということで、公開することにした。 mastodon-timeline アクセストークン等を使用せず、お手軽にMastodonのタイムラインをWebページに読み込むことができますので、ぜひ使ってみてください。 そしてFediverseで繋がりましょう。

ステルスアフェリエイト広告の規制強化 よくわからないけど、ステルスマーケティングは景品表示法違反ということで、令和5年10月1日から規制されることになるらしい。 ということでPR表記がないアフェリエイト広告（多くの場合PR表記なんてない）も規制の対象になるとのこと。 なので、今後ステレスアフェリエイト広告は撲滅するかもしれないけれど、ニュースに疎いのでそんなことは知らなかった。 知らなかったうえで、アフェリエイト広告に嫌気がさしたので、ブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能を作ってみた。 アフェリエイト広告に嫌気がさし、Chrome拡張機能開発 アフェリエイト広告を自身もブログでやっていたことがあるので、何も知らずに騙されることはないが、やっていたので、どれがアフェリエイト広告なのか判断がつく。 分かってしまうが結果、世の中アフェリエイト広告だらけという現実に嫌気がさしてきた。 また見分けがつくとは言え、マウスオーバーしないと判断ができない。 なので地雷原を歩くように最新の注意をはらってきた。 まあ、別にアフェリエイト広告を踏んだところでどうでもいいんだけど、なんとなく気になる。 そういった経緯で前述したようにブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能を作った。 アフェリエイトリンクを赤枠で囲む拡張機能 ブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能 使用すると、 のようにアフェリエイトリンクが赤枠で囲まれ、リンク文字列の前に💰マークが付く。 これで一目でアフェリエイトリンクが判断でき、快適なブラウザ生活を送れるようになった。

過去にBottom Tabs Navigatorを作成したので、今回は、Stack Navigatorを導入する。 実装に期待する動きは、 タブ移動が可能 タブ移動後に詳細ページへの遷移が可能 上記の通りなので、Bottom Tabs NavigatorとStack Navigatorを併用する必要がある。 その前提で進めていく。 必要なパッケージをインストールする npm install @react-navigation/stack npm install react-native-gesture-handler インストール後、必要なファイルを作成する。 実装していく mkdir src mkdir src/stack touch src/screens/SampleStackScreen.tsx SampleStackScreen.tsxは下記の通りになる。 import React from 'react' import Sample from '../screens/Sample' import { createStackNavigator } from '@react-navigation/stack' import SampleDetail from '../screens/SampleDetail' const Stack = createStackNavigator() const SampleStackScreen = () => { return ( <Stack.Navigator screenOptions={{ headerShown: false }}> <Stack.Screen name="Sample" component={Sample} /> <Stack.Screen name="SampleDetail" component={SampleDetail} /> </Stack....