【WordPress】CSSをHTMLのテキストエディタ上で簡単に適用する方法（投稿記事のみで編集）

WordPressでCSSをHTMLのテキストエディタ上で適用する方法をご紹介します。

投稿の下書きに直接書いて作ることができます。

functions.phpやテーマエディターなどをいじることなく簡単にできるので、初心者や初学者でも取っ付きやすいのではないでしょうか。

この記事を読んで方法・手順どおり進めていただければ、CSSを投稿記事のみで編集できます。

必要なプラグイン

まず、Classic Editorというプラグインを「新規追加」→「インストール」→「有効化」しておきましょう。

 

このClassic EditorというWordPressプラグインをインストールした状態で話を進めていきます。

ビジュアルエディタで文字の入力ができ、テキストエディタでソースコードのプログラミングやコーディングができます。

 

WordPressには、他にも便利で使いやすいプラグインがたくさんあります。

とりあえず先に進みましょう。

【WordPress】CSSをHTMLのテキストエディタ上で簡単に適用する方法

はじめに「投稿一覧」から「投稿記事」の「新規追加」ボタンから下書きの記事を作ります。

先ほどClassic EditorというWordPressプラグインをインストールしたので、テキストエディタをクリック（選択・押下）しましょう。

CSSを入れるための前提となる<style type=”text/css”></style>を冒頭に記述しましょう。

このように、CSSの編集やコーディング、プログラミングなどは必ずテキストエディタ上で行います。

試しにプチ・プログラミングをしてみましょう。

 

CSSには、classでHTMLの場所を指定してあげます。

例えば、以下の文字を赤色にしたい場合は、文字のどこからどこまで赤色にしたいかという範囲をCSSで指定してあげます。

説明はこれくらいにして、簡単に文字を赤色にしてみましょう。

以下のソースコードをコピペします。

<style type=”text/css”>.font{color: red;}</style>
<p class=”font”>これは赤色です。</p>

次に、実装されているかどうかライブプレビューで確認してみましょう。

ここで注意したいのが、絶対にビジュアルエディタを押さないでください。

ビジュアルエディタを押すと、せっかく編集してプログラミングしたソースコードが、自動的に改変されて修正するのが面倒になります。

 

赤色にしたはずのテキスト（文字）がもとの黒色に戻ってしまいます。

 

テキストエディタを編集したらひとまず一回「プレビュー」でちゃんと反映・適用されているかどうか確認しましょう。

 

無事に、CSSをHTMLのテキストエディタ上でも簡単に反映・適用することができました。

テキストエディタのまま「下書き保存」をしましょう。万が一、編集したデータを失わないようにも、ほかのテキストファイツなどにコピーして保存し、取っておくと良いでしょう。

いちいちfunctions.phpやテーマエディタなどで高度なプログラミングをすることなく、投稿記事のみでCSSまで反映・適用させることができました。

WordPressで文字にラインマーカーを引く

CSSで文字におしゃれなラインマーカー（下線、ボーダー）を引いてみましょう。

やはり使うのは投稿記事のテキストエディタのみなので簡単ですね。

 

<p><span class=”marker1″>普通の下線</span>を引きました。</p>

.marker1 {
text-decoration : underline;
}

 

<p><span class=”marker2″>赤色の文字と赤色の下線</span>を引きました。</p>

.marker2 {
color: red;
text-decoration : underline;
}

 

 

<p><span class=”marker3″>赤色の下線だけ</span>を引きました。</p>

.marker3 {
border-bottom: solid 3px red;
}

 

 

<p><span class=”marker4″>赤色の点線（破線）</span>を引きました。</p>

.marker4 {
border-bottom: dotted 2px red;
/* border-bottom: dashed 1px red; */
}

 

 

<p><span class=”marker5″>赤色の二重線</span>を引きました。</p>

.marker5 {
border-bottom: double 6px red;
}

 

 

<p><span class=”marker6″>黄色のマーカー</span>を一部にだけ引きました。</p>

.marker6 {
background: linear-gradient(transparent 70%, yellow 70%);
}

 

 

<p><span class=”marker7″>黄色のマーカー</span>を全部に引きました。</p>

.marker7 {
background: linear-gradient(transparent 0, yellow 0);
}

 

もっと多くの多彩な色を編集したい場合はこちらからコピーしてきましょう。

 

 

WordPressで文字を囲む線（ボックス）を作る

WordPressで文字を囲む線（ボックス）を作る場合です。

 

<div class=”point1″>
<p>丸い囲み線をプログラミングしてみましょう。</p>
</div>

.point1 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: green;/*文字色*/
background: #ffffff;
border: solid 3px green;/*線*/
border-radius: 10px;/*角の丸み*/
}
.point1 p {
margin: 0;
padding: 0;
}

 

 

<div class=”point2″>
<p>丸い囲み線に影をつけてみましょう。</p>
</div>

.point2{
padding: 0.5em 1em;
margin: 2em 0;
color: #ffc06e;
background: #fff8e8;
border-bottom: solid 6px #ffc06e;
border-radius: 9px;
}
.point2 p {
margin: 0;
padding: 0;
}

 

 

<div class=”point3″>
<p>二重の囲み枠を表示してみましょう。</p>
</div>

.point3 {
padding: 0.5em 1em;
margin: 2em 0;
border: double 5px #95ccff;
}
.point3 p {
margin: 0;
padding: 0;
}

 

<div class=”point4″>
<p>付箋のような囲み線をプログラミングしてみましょう。<H1>〜<H6>などのタイトルの装飾にも使えて便利です。</p>
</div>

.point4 {
padding: 0.5em 1em;
margin: 2em 0;
color: #232323;
background: #f0f7ff;
border-left: solid 10px #5b8bd0;
}
.point4 p {
margin: 0;
padding: 0;
}

 

<div class=”point5″>
<p>点線・破線の囲み線（ボックス）をプログラミングしてみましょう。</p>
</div>

.point5 {
padding: 0.5em 1em;
margin: 2em 0;
background: #fff8e8;
border: dashed 2px #ffc06e;/*点線*/
}
.point5 p {
margin: 0;
padding: 0;
}

 

 

<div class=”point6″>
<span class=”point-title”>まとめ</span>
<p>外側にタイトル（見出し）をつけます。</p>
</div>

point6 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #ffc107;
}
.point6 .point-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #ffc107;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.point6 p {
margin: 0;
padding: 0;
}

 

 

<div class=”point7″>
<span class=”point-title”>まとめ</span>
<p>外側にタイトル（見出し）をつけます。パート2。第2段。</p>
</div>

.point7 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px red;
border-radius: 8px;
}
.point7 .point-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #ffffff;
color: red;
font-weight: bold;
}
.point7 p {
margin: 0;
padding: 0;
}

 

 

<div class=”point8″>
<span class=”point-title”>まとめ</span>
<p>内側にタイトル（見出し）をつけます。</p>
</div>

.point8 {
position: relative;
margin: 2em 0;
padding: 25px 10px 7px;
border: solid 2px #95ccff;
}
.point8 .point-title {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #95ccff;
color: #ffffff;
font-weight: bold;
}
.point8 p {
margin: 0;
padding: 0;
}

 

まとめ

WordPressでCSSをHTMLのテキストエディタ上で簡単に適用する時に注意したいのが、ビジュアルエディタ上で編集しないことです。

ビジュアルエディタ上で編集してプログラミングすると、勝手にHTMLで自動的に<span>タグや<br />タグが付いたりして、「下書き保存」や「公開」を押した際に、CSSが反映されなくなってしまうので面倒です。

ですので、CSSでデザインや見た目を編集するのは最後の工程でプログラミングするのがよろしいでしょう。