コードタグを使う

先日、友人の作ったサイトを拝見しました。
人が作ったサイトを見るのは勉強になりますね。

グーグルクロムで、右クリックから
「ページのソースを表示」
でHTMLが見られるので、本当に勉強になります。

まあ、なかなかに集中力が必要ですけどね。

で、その中で知らないタグを見つけました
<code>タグです。

早速調べました。
ここのサイトがわかりやすかったです。

codeタグとは？HTML文にコードを解りやすく書く方法を解説

なるほど、文章の中に文字としてコードを表示させたい時に、

誤動作させないために必要なタグ、ということですな。

このブログを書いていて、コードを表示することは多々ありますから、
私には必要不可欠なタグですね。

でも、ワードプレスではどうやるんだろ？

・・という訳でCHATGPTセンセーの力を借りました

質問：
ワードプレスで投稿の文章の中に<code>タグを入れたいときはどうする？

ChatGPTの答え：

WordPressで投稿の文章内に <code> タグを入れるには、以下の手順を参考にしてください。

テキストエディタを使用する方法:
投稿を編集する際に、ビジュアルエディタではなくテキストエディタを使用します。以下の手順で タグを挿入できます。

WordPressのダッシュボードにログインし、投稿を編集します。

ビジュアルエディタからテキストエディタに切り替えます。通常、「テキスト」または「Text」タブをクリックします。

ここで、HTMLコードを直接入力できるエディタが表示されます。 <code> タグを入力します。

修正が完了したら、再びビジュアルエディタに切り替えるか、投稿を更新します。

Gutenbergエディタを使用する方法:
GutenbergエディタはWordPressの新しいエディタです。タグを挿入するには、以下の手順を実行します。

WordPressのダッシュボードにログインし、投稿を編集します。

投稿コンテンツ内で、<code> タグを挿入したい位置にカーソルを置きます。

Gutenbergエディタのツールバーで、「コード」ブロックを追加します。これにより、コードブロック内に <code> タグを挿入できます。

コードブロック内に <code> タグとコードを入力します。

これらの方法を使用すると、WordPressの投稿内に <code> タグを正しく挿入してコードを表示できます。選択したエディタに合わせて、適切な手順を選んでください。

あ、なるほど、引用で囲んでいるのと同じようにやれば良い訳ね。
これは良いことを知りました。
今まで、直でコピペしてそのままでしたから、
正しいやり方を知って良かったです。

しかも、ＣＳＳで、code{}のセレクターで、
コードの部分だけ装飾できるらしいので、便利ですね。

これで、人も、ブラウザもコード部分の識別が
しやすくなるということですな。

これは今までのページも直さなきゃいけませんね。
ちょっと手間ですが（笑）

ちなみに、友人のサイトでは、
インラインで日本語の文を囲っていましたから、
これ、使い方間違ってんじゃね？（笑）
たぶん、<span>で囲うところだと思うのですが・・
ま、後で確認してみます。