ツールバー2段目の各機能

このブログの構成について、まずは「準備」→「記事の書き方」と進み、一旦「コラム」という形で「HTML」に関する基礎的な内容の解説に入りました。

今回からは再度「記事の書き方」に戻りますが、ここからは「応用編」として、ツールバーの2段目以降の解説をしていきます。「基礎編」では「HTML」に関しては極力触れないようにしていましたが、この後の記事では、「ビジュアルエディター」と「テキストエディター」を切り替えながら、HTML部分がどうなっているかという説明も挟んでいきます。

打ち消し線

記事本文中、一部の文字列に打ち消し線を入れたい場合は、その文字列を選択して「打ち消し線」ボタンを押します。過去の記事ではその内容で記述していたものの、その後、事情が変わったというような場合に使用します。

サンプル
Windowsの標準Webブラウザは、Internet Explorer です。
2022年現在、Microsoft Edge です。

上のサンプルのように、過去に書かれていた記事内容に変更が生じて、そこに打ち消し線を入れて、最新の情報を追記するような場合に使用されます。

「打ち消し線」HTML部分の解説

ビジュアルエディターで「打ち消し線」ボタンを押した場合、HTMLは以下のように記述されます。（テキストエディターで表示されない段落の<p>や改行の<br>は省略しています）

Windowsの標準Webブラウザは、<del>Internet Explorer です。</del>
2022年現在、Microsoft Edge です。

この<del>タグが「打ち消し線」なのですが、属性「datetime」を使用すると、その記述に打ち消し線を入れた日付を記述できます。

また、追記した部分には<ins>タグを使うというのが、HTMLとしては正しい記述となります。

Windowsの標準Webブラウザは、<del datetime="2022-12-16">Internet Explorer です。</del>
<ins datetime="2022-12-16">2022年現在、Microsoft Edge です。</ins>

サンプル
Windowsの標準Webブラウザは、Internet Explorer です。
2022年現在、Microsoft Edge です。

このように記述することで、追記した部分には下線が入ります。

ただし、実際はそこまで厳密に記述しなくても、表示上は（下線の有無以外）変化がありません。主に検索エンジンに「その日に記述を削除して、その日に記述を追記した」ということを知らせるのが目的のため、厳密な記述が必要な記事（論文やニュースなど）でなければ、なくても問題ないでしょう。

なお、<del>タグ以外に、<s>タグも「打ち消し線」を表示しますが、<s>は「訂正」のような意味合いで、<del>は「削除」という意味をもちます。

繰り返しますが、このブログはHTMLを正しく記述するための解説を目的としていないため、あまり詳しい説明はしませんが、ビジュアルエディターで「打ち消し線」ボタンを押したときに入るタグは、<s>ではなく<del>だという点だけは押さえておきましょう。

また、ビジュアルエディターの「スタイル」→「インライン」にも「打ち消し線」がありますが、これを選択した際に入るタグは、<del>でも<s>でもなく、次の<span>タグです。

Windowsの標準Webブラウザは、<span class="strike">Internet Explorer です。</span>
2022年現在、Microsoft Edge です。

サンプル
Windowsの標準Webブラウザは、Internet Explorer です。
2022年現在、Microsoft Edge です。

<span>タグの「class」属性に、属性値「strike」と記述していて、CSSで打ち消し線を入れています。CSSで表示を変える場合、HTMLとしては何の意味も持ちませんので、単純に見た目だけ打ち消し線を入れたいのであれば、「打ち消し線」ボタンを押して<del>タグを入れるのではなく、ビジュアルエディターの「スタイル」→「インライン」→「打ち消し線」を選択するのが正しい方法です。

横ライン

文章に区切りを入れたい場合など、横ライン（区切り線）を入れることができます。

これはもう、そのままですねｗ
上の図のように、横ライン（区切り線）を入れたいところでボタンを押せばOKです。

「横ライン」HTML部分の解説

ビジュアルエディターで「横ライン」ボタンを押した場合、HTMLは以下のように記述されます。

この下に区切り線を入れます
<hr />

サンプル
この下に区切り線を入れます

---

このように、横幅いっぱいに横ライン（区切り線）が入ります。

この<hr>タグが区切り線です。WordPressで入力した場合は、自動的に<hr />という記述になりますが、<hr>だけでも問題はありません。

この横ラインの色や幅、高さを変更したい場合は、CSSで指定できます。

色がピンク（#ffc0cb）で、高さが10ピクセル、横幅いっぱいでなく200ピクセルの区切り線を入れる
<hr style="background-color: #ffc0cb; width: 200px; height: 10px;" />

サンプル
色がピンク（#ffc0cb）で、高さが10ピクセル、横幅いっぱいでなく200ピクセルの区切り線を入れる

---

個人的にはあまり使用していない<hr>タグですが、使いどころによって記事を見やすくすることができますので、活用していきましょう。

テキスト色

これもそのままですが、テキスト（文字）に任意の色をつけます。

色をつけたい文字を選択した状態で「テキスト色」ボタン右にある▼を押して、色を選択します。

「テキスト色」HTML部分の解説

文字色のHTMLは次のように記述されます。色をつける実体はCSSです。

<span style="color: #0000ff;">この文字の色を青色（#0000ff）にします。</span>

サンプル
この文字の色を青色（#0000ff）にします。

ここでは、<span>タグの属性「style」に「color: #0000ff;」という属性値のCSSで色を指定しているのですが、この「#」で始まり6文字の英数字で表記する色指定を「ウェブカラー」と呼びます。

6文字の英数字は、0～9の数字とa～fのアルファベットで計16パターンとなり、最大16⁶＝16,777,216色まで表現できます。#ffffffが「白」、#000000が「黒」です。

テキストとしてペースト

これはちょっと特殊なボタンです。

ビジュアルエディターでは、ある部分をコピーして貼り付け（ペースト）を行うと、通常はそのスタイルも一緒にコピーされます。他のWebサイトからコピーした場合であっても、たとえばそこが<h2>タグで囲まれた部分であれば、<h2>タグも同時に貼り付けされますし、リンクが設定されているテキストなら、<a>タグも同時に貼り付けされます。

「テキストとしてペースト」ボタンを一度押した状態にすると、コピーした内容にHTMLタグやスタイルが含まれていても、それらを無視して文字部分のみが貼り付けされます。

この「テキストとしてペースト」ボタンは、再度クリックして無効にするまで、有効状態が続きます。

Windows10＋Chromeの場合、コピーした後に右クリックすると「プレーンテキストとして貼り付ける」という項目が出てきますが、これと同等のものだとお考えください。

書式設定をクリア

これは画像で実例をご紹介します。

特殊文字

「特殊文字」ボタンは、キーボードから入力しづらい特殊な文字を入力する際に使います。

よくあるケースでいえば、著作権を示す「©」などですね。これは「しー」とか「こぴーらいと」で変換しても出てきますので、そのまま使って問題ありませんが、顔文字なんかで使われる「∀」などは、どうやって出すのかわからないこともあります（ちなみに機種環境によっては「たーんえー」で変換できます）。そんなときに「特殊文字」ボタンを使います。

ちなみに、特殊文字とは少し話がずれますが、HTMLでそのまま使ってはいけない文字を挙げておきます。（いずれも全角記号で記述するなら問題ありません）

• <
  Shift + ね で入力するこの記号は、HTMLタグなどに使うため
• >
  Shift + る で入力するこの記号は、HTMLタグなどに使うため
• &
  Shift + お で入力するこの記号は、エンティティ文字（後述）の1文字目に使うため

でも、この記事でしっかり使ってるじゃん！と思ったあなた、するどいですねｗ

ビジュアルエディターで書く場合は問題ありません。なぜならエンティティ文字というものに、自動的に置き換えてくれるからです。

ビジュアルエディターで < > & と書き、テキストエディターに切り替えてみてください。

< > &

上のように表示されているはずです。

ここでの「エンティティ文字」とは、HTMLでは表示できない文字を表示するために文字をコード化したもの、というような意味で考えてください。使えない文字の3番目として挙げた「&」は、この「エンティティ文字」の1文字目が「&」だから、というのがその理由です。

なお、「特殊文字」ボタンで入力する文字の中には、実際のHTMLとして出力される際には「エンティティ文字」に変換されるものも含まれています。（テキストエディターで「エンティティ文字」にはならないものも、ブラウザで見る際に「エンティティ文字」に置き換わっていることもあります。）

また、「エンティティ文字」は特殊な文字のみではなく、たとえばテキストエディターで「&#12354;」と入力して、ビジュアルエディターに戻ると「あ」と表示されます。再度テキストエディターに戻ると「&#12354;」と入力した部分は「あ」に置き換わります。（エンティティ化の必要がないため）

このように、英数字以外のあらゆる文字をエンティティ文字化することができるのですが、記事の書き方という本題から外れすぎるので、ここまでにしておきますｗ

インデント

インデントは、そのまま字下げ機能です。

「インデントを増やす」を押すごとに40ピクセル分、その段落での文字の開始位置が右にずれます。

逆に「インデントを減らす」を押すと、今度は40ピクセル分、左にずれます。（インデントされていない状態で押しても効果はありません）

「インデント」HTML部分の解説

この部分のHTMLは以下の通りで、段落を表す<p>タグに、属性「style」を設定し、その属性値（CSS）を「padding-left: 80px;」としています。

<p style="padding-left: 80px;">この段落では「インデントを増やす」を2回押したので、左から80ピクセル分、文字の開始位置が右にずれています。</p>

サンプル
この段落では「インデントを増やす」を2回押したので、左から80ピクセル分、文字の開始位置が右にずれています。

元に戻す、やり直す

何か操作を失敗してしまった場合、直前の操作を取り消すのが「元に戻す」、その取り消した操作を再度実施するのが「やり直す」です。

わたしもですが、間違えたときに Ctrl + Z を押すクセがある方は、それを使えばOKです。

キーボードショートカット

WordPressは、その都度ボタンを押さなくても、キーボード操作で実行できるショートカットが多数用意されています。その一覧を表示するのが「キーボードショートカット」ボタンです。

背景色

一部の文字に背景色をつける場合は、この「背景色」ボタンを使用します。

以前の記事で「ブロック要素」と「インライン要素」という話をしましたが、ここでいう「背景色」は「インライン要素」にあたります。つまり、その文字部分のみの背景色です。

色の指定方法、ウェブカラーなどについては「テキスト色」と同じなので省略します。

「背景色」HTML部分の解説

背景色のHTMLは次のように記述されます。これも色をつける実体はCSSです。

<span style="background-color: #ffc0cb;">この文字の背景色をピンク（#ffc0cb）にします。</span>

サンプル
この文字の背景色をピンク（#ffc0cb）にします。

フォントサイズ

一部の文字のサイズを変えるには、その文字を選択して「フォントサイズ」を選択します。

ここでは「ピクセル」（px）単位でフォントサイズを変更できます。

「フォントサイズ」HTML部分の解説

フォントサイズを指定するHTMLは次のように記述されます。これもサイズを設定する実体はCSSです。

<span style="font-size: 32px;">この文字のサイズを32pxにします。</span>

サンプル
この文字のサイズを32pxにします。

HTML挿入

ビジュアルエディターを使っているとき、ここにHTMLを挿入したいと思うことがあります。

まあ、そういう場合はテキストエディターに切り替えれば良いのですがｗ

たとえば、Googleのツイートをブログに貼り付けたいとします。

ツイートの右上にある「…」をクリックして「ツイートを埋め込む」を選択します。

次のような画面が開くので「Copy Code」をクリックして、HTMLタグをコピーします。

次にビジュアルエディターで「HTML挿入」ボタンを押します。

入力欄が表示されたら、先程コピーしたHTMLタグを貼り付けます。

すると、ビジュアルエディターでは次のような表示になります。

実際にブラウザで記事を開くと、次のようにツイートが埋め込まれます。

今年は、世界中の人々が「変えられるか」について検索。
転職や新しい人生観など、自分と周囲の世界を再構築する方法に注目が集まりました。

Google 検索から振り返る 2022 年のムービーを、ぜひ設定から日本語字幕を ON にしてご覧ください🔍#YearInSearch

— Google Japan (@googlejapan) December 13, 2022

このように、ツイートの埋め込み、YouTube動画の埋め込み、あるいはアフィリエイトタグを記事に入れたい場合などに「HTML挿入」機能を使用する、との想定のようです。

まとめ：ツールバー2段目は多種多様！

ビジュアルエディターのツールバーは、大半はWordPress自体がもともと用意している機能で、スタイルやフォントサイズの変更などの一部機能のみ、Cocoonが独自のカスタマイズで提供しています。

今回は2段目を紹介しましたが、便利そうなものもあれば、これ使うの？というようなものもあったと思います。みなさんがWordやExcelなどのアプリを使う場合も、すべての機能を均等に使っているわけではないでしょう。使える機能は使い、そうでないものはスルー、WordPressも同じです。

次回からは、ツールバー3段目の機能を紹介していきますが、これは完全にCocoonオリジナルのものばかりです。中でも「吹き出し」は、使いこなせると、とても表情豊かなブログになります。

ちょっと最近記事アップが遅れ気味です。さすがに応用編になってくると、HTMLの解説なども挟んでいくことになるので、どこまで解説すべきか、どこは省略すべきか、悩みながら書いているためです。

このブログは一応、大まかなビジョンだけは持ってスタートしたのですが、実際の記事内容は、わりと行き当たりばったりだったりもしますｗ

100記事くらい書き溜めることができれば、調べものをしている方のお役に立てるようにもなるかもしれません。そう思ってやっているのですが、日暮れて道遠しですね…ｗ

ブログの内容はともかく←
イラストはとても好評を頂いています。

技術解説系なので、小難しい内容になりがちですが、イラストのおかげで全体に柔らかく仕上がっていると思います。あいり画伯には感謝しかありません。また無理難題を言います←

記事も負けないようにがんばっていきます！ｗ