ホームページ運用

「Google プラットフォーム プログラム ポリシーの更新について」のメールが届いた(2024年12月) とりあえずのメモ

「Google プラットフォーム プログラム ポリシーの更新について」のメールが届いた(2024年12月)

Googleは2025年2月16日からパブリッシャー向けポリシーを更新します。新しいポリシーでは、プライバシー技術の進歩への対応と、広告配信プラットフォームの多様化に対する対応が含まれています。データ収集と使用に関する開示義務が強化され、特にCookieやウェブビーコン、位置情報などの取り扱いについて、より詳細な説明と同意取得が必要になります。「Google プラットフォーム プログラム ポリシーの更新について」というメール今日、Google AdSenseから「Google...
AIの話題

AIプログラミングでタイピング練習ゲームを作った

HTMLとCSS、JavaScriptでシンプルなタイピング練習ゲームを作りました。インストール不要でブラウザから動作し、シンプルで読み込みが早いことを目指しました。(公開サイト)AIプログラミングで工夫した点(仕様書とファイル構成)Claude 3.5 Sonnetで作成していったのですが、すぐにチャットの文字数上限になってしまいます。続きをプログラムしようにも、一からやり直しになってしまいます。そこで、チャット上限に近づいたら、「プログラム仕様書とファイル構成」を.mdで...
「QRコードは登録商標」という表記は必要? とりあえずのメモ

「QRコードは登録商標」という表記は必要?

「QRコード」は株式会社デンソーウェーブの登録商標です。登録商標は、製品やサービス名の一部に使うのには許可が必要ですが、非商用の一般的な文章内に使うのは問題ありません。ただし、登録商標は、一般名詞とは違って商標権者への配慮が必要な名前。無用な争いを避けるためにも登録商標表記をすることが推奨されています。デンソーウェーブは、QRコードの仕様を公開してJIS規格化を進め、一般利用できるようにしています。一方、「QRコード」という「ブランド」は企業の権利でもあり、その保護とのバラン...
アカウント登録の練習用ダミーページを作った(PHP) とりあえずのメモ

アカウント登録の練習用ダミーページを作った(PHP)

アカウント登録の練習用ダミーページをPHPで作成しました。このページでは、データを実際に送信せずにローカルで処理し、パスワード入力やフォーム検証の練習ができます。アカウント登録の練習用ダミーページを作ったブラウザで開いてパスワード入力を練習するためのページを作りました。練習用ページでは、実際のデータは送信されず、ローカルで処理されます。データの非保存:フォームのsubmitイベントをJavaScriptで制御し、実際にはデータを送信せず、ローカルで処理しています。フォーム検証...
WordPress創設者とWP Engineの対立(OSSの難しさ) とりあえずのメモ

WordPress創設者とWP Engineの対立(OSSの難しさ)

WordPressの共同創設者マット・マレンウェッグ氏とWP Engineの間で、商標使用と貢献度をめぐる対立が起きています。WordPress.orgはWP Engineからのアクセスを遮断しました。オープンソースと商業利用のバランス、コミュニティへの影響など、多くの課題を提起しています。「OSSで大きな利益を出したなら還元しろ」ってことなのかな。OSSはコミュニティで運営しているから個人開発より盤石だと思っていたけど、リーダーの一存であっという間に変質してしまうんだね。O...
やっとLinkedInで「会社ページ」を作れた SNS

やっとLinkedInで「会社ページ」を作れた

LinkedInで5か月前に「会社ページ」の作成に失敗しましたが、今回再挑戦して成功しました。会社ページは個人アカウントに紐づいて管理されます。アカウントの切り替えはプロフィールアイコンのメニューから行うことができます。ちなみに「会社ページ」という和訳ですが、必ずしも「法人」である必要はありません。個人事業の選択肢もあり、取得可能になっています。会社ページを再度作ってみた以前(5か月ほど前)、LinkedInのアカウントを作成し、「会社ページ」を作成しようとしたところ、エラー...
ブロックエディタを狭い画面で表示するときの文字サイズを小さくした とりあえずのメモ

ブロックエディタを狭い画面で表示するときの文字サイズを小さくした

ブロックエディタを狭い画面で表示する際の文字サイズを小さくしました。画面幅1080px以下の時に、文字や余白を調整するカスタムCSSを追加しました。これにより、AI画面を表示させた狭い画面でも、文章の全体像が見やすくなりました。ブラウザにサイドバーを表示すると「狭い」ブラウザのサイドバーにAI画面などを表示させると作業がスムーズになるものの、表示画面は狭くなります。特に、WordPressのブロックエディタを使っているときに、文章の全体像が見えにくく感じます。一時的にサイドバ...
WordPressにSVG画像をアップロードできるようにした(functions.php) とりあえずのメモ

WordPressにSVG画像をアップロードできるようにした(functions.php)

WordPressではセキュリティ上の理由からSVGファイルのアップロードが制限されています。functions.phpにカスタム関数を追加すれば、ブログエディタでのSVGアップロードを許可できます。ただし、アップロードを許可する場合、リスクも認識しておくことが大事です。「このファイルタイプ(SVG)をアップロードする権限がありません」WordPressにSVGファイルをアップロードしようとしたらエラーになりました。このファイルタイプをアップロードする権限がありません。fun...
CSVをShift-JISにするためのオンラインツールを作った(sjis-csv) とりあえずのメモ

CSVをShift-JISにするためのオンラインツールを作った(sjis-csv)

生成AIで作成したCSVファイルをExcel(オンライン版)で開いたら、文字化けしてしまいました。そこで、文字列をShift-JISにエンコードして sjis.csvとしてダウンロードし直すためだけのオンラインツールを作りました。ExcelはCSVの文字コードをShift-JISと過程する生成AI(Claude)が出力した csvファイルをそのまま オンライン版のExcelで開いたら、文字化けしてしまいました。これは、UTF-8のテキストファイルをShift-JISとして開い...
[Cocoon] ブログカードのHTML構造でCSSを整理した(style.css) とりあえずのメモ

[Cocoon] ブログカードのHTML構造でCSSを整理した(style.css)

Cocoonテーマのブログカードの追加CSSを整理しました。ブログカードのHTML階層構造とメディアクエリで順序立ててまとめました。スタイルを追加するときは、はじめから構造を意識しておけばよかったね。style.cssに追加コードを整理したいstyle.cssに追加コードが増えて来たので、整理したいと思います。ただし、優先順位の問題があるので、並び順やCSSクラスの重ねた修飾の仕方も重要です。ブログカードの階層構造Cocoonテーマのブログカードは、HTMLの階層構造になって...
Google Workspaceで独自ドメインのメールを作るには?(DNS) とりあえずのメモ

Google Workspaceで独自ドメインのメールを作るには?(DNS)

Google Workspaceは、Googleのビジネス向けサービスです。このサービスを利用すると、独自ドメインのメールアドレスでもGmailの便利な機能が使えます。ただし、ドメインのDNSレコードの設定、ユーザーアカウントの作成などの手順が必要です。Google Workspaceの管理者になって、Google Workspaceアカウントを作成する、とも言えます。独自ドメインでGmailを使う「独自ドメイン(カスタムドメイン)」とは、独自のウェブサイトのアドレスのことで...
[WordPress]ランダムな記事へのボタンを追加した(functions.php) とりあえずのメモ

[WordPress]ランダムな記事へのボタンを追加した(functions.php)

過去の記事を「掘り起こして」読んでもらう仕掛けとして「ランダムな記事へのボタン」を追加しました。WordPressブログにランダムな記事へのボタンを追加するカスタムウィジェットを作成しました。きっかけは、ブログの「アーカイブ」としての機能を強化したいと思ったからです。カスタムウィジェットを作成するPHPコード前の記事、ランダムな記事、次の記事へのリンクを表示するカスタムウィジェットを作りました。WordPressテーマのfunctions.phpファイルの末尾に追加したら、ウ...
LINEビジネスIDが自動的に2段階認証に切り替わる(LINE公式アカウント) とりあえずのメモ

LINEビジネスIDが自動的に2段階認証に切り替わる(LINE公式アカウント)

「もうすぐ LINE ビジネスIDが2段階認証でないとログインできなくなる」という通知が表示されました。2024年9月3日に、メールアドレスを登録しているすべてのLINEビジネスIDで2段階認証が有効に切り替わります。あらかじめ2段階認証に変更しておくと、ログインコードが届くか確認できます。今日が 8月31日だから4日後。かなり急なお知らせだね。「LINEビジネスIDの2段階認証の有効化」LINE公式アプリを開いたら、「LINE ビジネスIDが2段階認証でないとログインできな...
[CSS]Amazonリンクをnote風に画像を大きくした とりあえずのメモ

[CSS]Amazonリンクをnote風に画像を大きくした

Amazonリンクをnoteのデザインを参考に、画像を大きくして説明文を省略しました。CSSを更新して、デスクトップとモバイル両方での表示を変更し、商品名、画像、ボタンのレイアウトを調整しました。Amazonリンクのスタイルを変更Amazonリンクのスタイルを変更しました。今回は noteを参考にして、画像を大きくし、説明文を省略するようにしました。Amazonリンクの例↓更新後のCSS/** amazon リンク * ブログカードに寄せた * * 2024-08-31 no...
[JavaScript]目次の開閉状態をCookieで記憶させた とりあえずのメモ

[JavaScript]目次の開閉状態をCookieで記憶させた

JavaScriptを使用して目次のチェックボックス状態をCookieに保存するようにしてみました。ページ再読み込み後も状態を維持するためにイベントリスナーで設定しています。ちらつき防止のためのCSSも設定しました。JavaScriptコード前回は、サイドバーに目次を追加しました。チェックボックスの状態をJavaScriptを使ってCookieに保存し、ページを再読み込みした後もその状態を維持するようにしてみました。/** 2024-08-30 チェックボックスの状態を保存す...
[CSS]モバイル版の記事一覧ページを見やすくした(style.css) とりあえずのメモ

[CSS]モバイル版の記事一覧ページを見やすくした(style.css)

記事一覧ページのモバイル表示を改善するためにCSSを調整しました。サムネイル画像を左側に配置し、正方形にすることで視認性を向上させました。記事間の余白を増やし、背景色を変更することで各記事の区切りを明確にしました。記事一覧ページのサムネイルを大きくした記事一覧ページを見やすくしたいと思いました。そこで、サムネイル画像を左にして正方形にしました。記事一つ一つのかたまりを意識できるように余白も増やしました。記事一覧ページのHTMLタグの構造記事一覧ページのHTMLタグの構造は、#...
[WordPress] H2タグの文字の前に番号を追加するカスタムスクリプト(functions.php) とりあえずのメモ

[WordPress] H2タグの文字の前に番号を追加するカスタムスクリプト(functions.php)

H2タグの前に番号を付けるために、WordPressの functions.php にカスタムスクリプトを追加しました。H2タグを検出し文字列を置き換える処理を、フィルターとして 'the_content'に追加します。H3タグでも同様に階層的な番号付けができます。
[WordPress] ウィジェットエリアを転用して左サイドバーにした(CSS) とりあえずのメモ

[WordPress] ウィジェットエリアを転用して左サイドバーにした(CSS)

WordPressサイトで、ワイド画面の左側の空きスペースを活用し、目次を左サイドバーとして表示するカスタマイズを行いました。このカスタマイズは、使っていないウィジェットエリアを、CSSで転用して実現しています。画面幅に応じて表示を切り替える仕組みも導入し、小さな画面では従来の記事内目次を表示するようにしました。すぐに見出しに飛びたいパソコンで記事を読んでいるときに、スムーズに見出しに移動できるように、左サイドに目次を追加しました。従来の目次は、導入文の後(1つ目の見出しの前...
「広告インテント チップ」とは?(Google AdSense) とりあえずのメモ

「広告インテント チップ」とは?(Google AdSense)

ニュース記事やブログなどを読んでいて、段落末尾に小さな検索リンクボタンが表示されていたら、それは「広告インテントチップ」かもしれません。Google AdSenseのこの機能は、記事を読んでユーザーが気になった商品にすぐにたどり着けるようにするための広告機能です。Googleは、ユーザー行動ではなくページ内容から効果的な広告が表示できないか模索してしているみたいです。「広告インテント チップ」とはGoogle AdSenseから、まもなく「広告インテント チップ(ad int...
[Cocoon] アイコンリストで二項対立のスライドを作るCSS とりあえずのメモ

[Cocoon] アイコンリストで二項対立のスライドを作るCSS

2つの事柄を対比して説明することが多いです。毎回、Keynoteで図解を作るのは大変。テキスト入力だけでかんたんに作成できると便利です。そこで、Cocoonテーマのアイコンリストを二項対立のスライドにするCSSを作りました。追加CSSクラスにslide dichotomyを入れるアイコンリストの追加 CSS クラスに「slide dichotomy」を入力すると、二項対立(dichotomy)のスライドになります。追加されたCSSポイントは、 display: flex; j...
[WordPress]画像キャプションをalt属性を自動設定するカスタムスクリプト(functions.php) とりあえずのメモ

[WordPress]画像キャプションをalt属性を自動設定するカスタムスクリプト(functions.php)

WordPressの画像ブロックにおいて、キャプションをalt属性に自動設定するカスタムスクリプトを作成しました。このスクリプトは、figcaptionタグ内のテキストを優先的にalt属性に設定します。functions.phpに追加することで、画像のアクセシビリティを向上させることができます。画像のキャプションをalt文字列に活用したいWordPressの画像ブロックには、キャプションを付けることができます。画像にAlt文字列が設定されていないときに、もしキャプションがあれ...
ブログカード抜粋の先頭に「関連」を付けた プログラミング

ブログカード抜粋の先頭に「関連」を付けた

Cocoonテーマの「ブログカード」のカスタムCSSクラス「simple」の先頭に「【関連】」という文字を自動的に追加するようにしました。コードを整理して、よりスッキリとしたデザインに改善しました。「関連」という文字を先頭に追加したCocoonテーマのブログカードにCSSクラス「simple」を追加すると、文字リンクにするようにしています。このまえに「【関連】」という文字を自動的に追加するようにしました。.wp-block-cocoon-blocks-blogcard.sim...
[WordPress]ブロックエディタに「書式のクリア」のショートカットキーを追加した(functions.php) とりあえずのメモ

[WordPress]ブロックエディタに「書式のクリア」のショートカットキーを追加した(functions.php)

WordPressのブロックエディタに「書式のクリア」のショートカットキーを追加しました。functions.phpとcustom-editor.jsを使用して、Command+Jで「書式のクリア」をできるようにしました。「書式のクリア」のショートカットキーを追加したいWordPressのブロックエディターにControl+Spaceでテキストの書式をクリアするショートカットキーとして「Command+J」を追加しようと思います。ブロックエディタの「書式のクリア」は、そのほか...
[WordPress] メディアライブラリの「添付」されたり、されなかったり? ホームページ運用

[WordPress] メディアライブラリの「添付」されたり、されなかったり?

WordPressのメディアライブラリには「添付」という概念があり、画像と投稿・固定ページの関連付けを管理します。画像の挿入や削除により添付状態が変化しますが、URLリンクでの指定は技術的に「添付」にはなりません。メディアライブラリから画像を選択することで、管理の効率化やSEO対策、セキュリティ向上などの利点があります。WordPressのメディアライブラリにおける「添付」の意味WordPressのメディアライブラリには「添付」という概念があります。メディアライブラリでは、各...
「プロブロガー」という現象とプラットフォーム とりあえずのメモ

「プロブロガー」という現象とプラットフォーム

「プロブロガー」は2010年代初頭に流行しましたが、固定ファンの獲得や収益の安定化が難しい問題がありました。2010年代後半には、プラットフォームによる収益化が整備され、クリエイターは個性を活かしつつ収益を上げやすくなりました。しかし、プラットフォーム依存にはアルゴリズム変更による露出減少などのリスクもあります。ゆるコンピュータ科学ラジオさんの「プロブロガーって何だったの?いま何してるの?」というYouTube動画が面白かったので、個人的にまとめておきます。個人だと「収益化」...
[WordPress]記事内の画像のalt属性を見出しから自動設定した(functions.php) とりあえずのメモ

[WordPress]記事内の画像のalt属性を見出しから自動設定した(functions.php)

WordPressのアイキャッチ画像にalt属性を自動設定する方法を紹介します。functions.phpにカスタム関数を追加することで、空のalt属性に記事タイトルを設定します。この機能により、SEOとアクセシビリティの向上が期待できます。
WordPressサイトに二要素認証を追加した(Two-FactorプラグインとGoogle Authenticator) とりあえずのメモ

WordPressサイトに二要素認証を追加した(Two-FactorプラグインとGoogle Authenticator)

WordPressの安全性を高めるために、二要素認証を導入しました。Two-Factorプラグインを使用し、Google Authenticatorアプリと連携させて設定しました。ログイン時には、IDとパスワードの入力後に、アプリで生成されたコードも入力する必要があります。(参考)Two-Factor – WordPress プラグイン | WordPress.org 日本語WordPressに二要素認証を導入する最近、WordPressプラグインの改ざん被害に間一髪で逃れま...
Bingの更新情報サービスとIndexNowを追加した とりあえずのメモ

Bingの更新情報サービスとIndexNowを追加した

せっかく書いた記事が Bingの検索結果に表示されないことでちょっと困っています。前回は…そこで、「更新情報サービス」への通知設定を追加しました。更新情報サービス「更新情報サービス」は、あなたが新しい記事を公開したときに、検索エンジンなどの外部サイトに「新しい記事がありますよ」と教えてくれるサービスです。更新情報サービスを使うと、検索エンジンに「今すぐ見に来てください」とお知らせすることができます。これにより、検索エンジンが新しい記事を素早く見つけて、検索結果に反映させやすく...
ドメインを変更したのにBingの検索結果に反映されない?(Bing Webmaster Tools) ホームページ運用

ドメインを変更したのにBingの検索結果に反映されない?(Bing Webmaster Tools)

サイトのドメインを変更しましたが、Bingの検索結果に新ドメインが反映されていません。Bingウェブマスターツールで新ドメインの追加やサイトマップの提出を行いましたが、インデックス登録に問題があるようです。Bingウェブマスターガイドラインに従って対策を行い、インデックスNow APIの使用を検討する必要があります。ドメイン変更がBingに反映されていないサイトのドメインを変更しましたが、Bingの検索結果に反映されません。 過去のドメインが検索結果に表示されています。 Bi...
WordPressのカスタムプラグインのエラー(get_postsのメモリ不足) とりあえずのメモ

WordPressのカスタムプラグインのエラー(get_postsのメモリ不足)

自作プラグインが動かなくなった原因は、サーバー処理のメモリ不足でした。 $posts = get_posts( array( 'post_type' => 'post', 'post_status' => array( 'publish', 'pending', 'draft', 'future'), 'orderby' => 'modified', /* date, modified */ 'numberposts' => -1 ) ); $count = 0; forea...
[WordPress] スラッシュインサータ用にブロックキーワードをJavaScriptで追加した(change-block-keywordsプラグインの代わり) とりあえずのメモ

[WordPress] スラッシュインサータ用にブロックキーワードをJavaScriptで追加した(change-block-keywordsプラグインの代わり)

WordPress 6.6のアップグレードにより、ブロックの検索キーワード設定機能が使えなくなりました。JavaScriptを使用して、子テーマに直接スラッシュインサータの機能を追加する方法を実装しました。add-block-keywords.jsというJavaScriptを追加して、functions.phpから読み込むようにしました。WordPress 6.6にしたらプラグインが動かなくなったWordPress 6.6にアップグレードしました。すると、ブロックの「高度な設...
[WordPress]Ad Invalid Click Protectorのマルウェア感染と修復(バージョン 1.2.9) とりあえずのメモ

[WordPress]Ad Invalid Click Protectorのマルウェア感染と修復(バージョン 1.2.9)

WordPressプラグイン「Ad Invalid Click Protector 1.2.9」で不正アクセスの被害があったそうです。開発者のアカウントがハッキングされ、一時的にではありますが「悪意のあるコード」を埋め込まれたことが原因です。すでに問題は最新バージョンでは修正されています。たまたまプラグイン更新のタイミングで被害を免れましたが、すぐに更新していたり、プラグインレビューチームの迅速な対応がなかったらと思うとゾッとします。「Ad Invalid Click Pro...
[WordPress]管理者ログインしていないときだけ実行するJavaScriptを追加した(分離) ホームページ運用

[WordPress]管理者ログインしていないときだけ実行するJavaScriptを追加した(分離)

以前に、下にスクロールするとヘッダーメニューを半透明にするスクリプトを入れました。しかし、自分がログインしているときは不要なのでオフにすることにしました(画面録画するときに撮影範囲がわかりにくい)。環境:WordPress, Cocoon, Cocoon子テーマいったん javascript.jsの以下のコードを削除して、管理者ログインしていないときに限定します。/** * 2024-07-04 管理者ログインしていないときのスクリプトを分けた * 下にスクロールするとヘッダ...
[Cocoon] ブログカードを2列に並べるCSS とりあえずのメモ

[Cocoon] ブログカードを2列に並べるCSS

メッセージ動画の一覧を並べるために、Cocoonのブログカードに「thumbnail-only」のCSSクラスを追加しました。style.cssに以下のコードを追加しました。ポイントは、「display: flex」と「flex-wrap: wrap」です。/** 2024-07-01 ブログカードを2列に並べるCSS */.blogcard-type.thumbnail-only .blogcard-snippet{ display: none;}.blogcard-typ...
LINE公式アプリで通知が来ない(通知の受信に必要な端末の情報) Android

LINE公式アプリで通知が来ない(通知の受信に必要な端末の情報)

LINE公式アプリをインストールしたが、通知の受信テストでエラーが発生しました。LINEサポートに問い合わせたところ、翌日には不具合が修正されました。「通知の受信に必要な端末の情報」の処理はLINEサーバ上で行われていたようです。環境:Galaxy A20, Android 11, LINE Official Account 5.2.0、SIMなし(Wi-Fiのみ)。LINE公式アプリのテスト通知が受信できない古いスマートフォンを連絡確認用に使おうと、「LINE公式(管理アプ...
【断念】WordPressでタイトルからアイキャッチ画像を自動生成したい(Auto Post Thumbnailプラグイン) とりあえずのメモ

【断念】WordPressでタイトルからアイキャッチ画像を自動生成したい(Auto Post Thumbnailプラグイン)

WordPressでタイトルからアイキャッチ画像を自動生成したかったのですが、結局 断念しました。ざっと調べたものは、$55の有料版限定であったり、日本語の文字化けがあったりしたからです。この記事のアイキャッチ画像は、結局 Keynoteで作りました。Auto Post Thumbnailのダウンロード数が最多はてなブログなど、記事のタイトルがそのままアイキャッチになるサービスが便利そうです。SNSで見かけたときに、読みたくなります。WordPressでも同じようにできないか...
[CSS]ラベルボックスをスライド画像風にした プログラミング

[CSS]ラベルボックスをスライド画像風にした

ふだんは、説明用の画像スライドを用意しているのですが、WordPress上で簡易版の文字スライドを作れるようにしました。まず、このようなラベルボックス(Cocoon汎用ブロック)を作ります。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素の幅を内容に合わせて自動的に調整要素の左右の余白を自動的に調整これをカスタムクラス「slide」に追加します。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素...
cPanelの迷惑メールフィルターを強化した(Apache SpamAssassin) とりあえずのメモ

cPanelの迷惑メールフィルターを強化した(Apache SpamAssassin)

仕事用のメールアドレスに届く迷惑メールが、うまく振り分けられていないことに気づいたので、メールサーバーの設定を変更することにしました。cPanelのスパムフィルタ私が使用しているレンタルサーバーでは、「cPanel」の管理メニューから「スパムフィルタ」が設定できました。このスパムフィルタは、「Apache SpamAssassin」が搭載されていました。スパム閾値スコアを下げる関係するのは、「スパム閾値スコア(Spam Threshold Score)」。この値を調整すると、...
[CSS] 一行目以外にスタイルを設定するには?(否定擬似クラスには擬似要素を入れられない) とりあえずのメモ

[CSS] 一行目以外にスタイルを設定するには?(否定擬似クラスには擬似要素を入れられない)

:not(::first-line)は無効になるtitle-listクラスのリスト要素(li)の各一行目を太字にしています。このCSSセレクタは、.title-list li::first-line 二行目以降にスタイルを設定したいと思いました。一見、::first-line 擬似要素を :not() 否定擬似クラスに入れれば、リスト項目の最初の行以外を選択するセレクタになりそうです。.title-list li:not(::first-line) しかし、これはうまくいきま...
リスト内の項目の1行目だけを太字にする(::first-line 疑似要素) とりあえずのメモ

リスト内の項目の1行目だけを太字にする(::first-line 疑似要素)

CSSを使って要素内の最初の行だけを太字にできます。/** title-listクラスのリスト 2024-06-02*/.title-list li { font-size: 80%;}.title-list li::first-line { font-weight: 900; font-size: 120%; }li セレクターを使って、全ての <li> 要素のフォントウェイトを normal に設定しています。これにより、デフォルトでは <li> 要素内のテキストは太字に...