WordPressのプラグイン無しでも簡単！文字装飾のやり方を解説【コピペ素材あり】

このブログでは、

• WordPressでブログを始めたけど、もっと読みやすくしたい
• でも、プラグインを入れるのは、不具合のリスクが心配なので避けたい
• コードをコピペして、楽に装飾したい。目次を入れてみたい

という初心者の悩みを解決出来るように、難しい単語無しで、すぐに実践できるように、スクショやコピペ素材を入れながら紹介します。

1.ブログ初心者なので勉強したい、けど、ラクしたい

ブログの記事を書いていると、ついつい言葉が多くなってしまい、いつの間にか文字だけの長文！なんてことになっていませんか？

私は2020年1月からブログを始め、間もなく1ヶ月が経ちます。
初めてのブログはあえてリライトせず、記念に残しておこうと思っていますが、これを見るたびに自分の知識や技術が少しずつ上がってきていると実感します。（まだまだ初心者ですが・・・）

恥ずかしいですが、よろしければご覧下さい。
リンク→2020年　挑戦開始

WordPressでブログを作成していると機能を拡張するための「プラグイン」という便利なツールがたくさん存在している事がわかってきます。

自分がブログの中でやりたい事をググると、いろいろな「プラグイン」の使い方が紹介されています。
そして、良さがわかると、つい何でも使いたくなってしまいますよね？

しかし「プラグイン」をたくさんインストールすると、WordPressテーマとの互換性やプラグイン同士で不具合が出る可能性も！
一番困るのは、私もそうですが、初心者はどこに問題があるのか全く見当もつかず、ググりまくり、時間を浪費してしまうという事だと思います。

今回はプラグインを使わずに、テキストエディタにコピペするだけで使える、目次や囲み枠などをご紹介します。
プラグインを使うと便利ですが、私の目標はプログラミングのスキルをつける事でもあるので、コードに慣れるためにも出来るだけテキストエディタを使用していこうと思っています。

では、ここからは余計なコメントを控え、最速で文字装飾、文章装飾が出来るサンプルをまとめて紹介しますので、一つでもお役に立てばうれしいです。

テーマについてはこちらの記事で詳しく解説しています。

2.改行と段落わけの違い

↓テキストエディタに下記をコピペしてみて下さい。

1. この行は改行しています。</br>
2. この行も改行しています。</br>
3. <p>この行は段分けです。上下に１行ずつ空きます。</p>
4. この行の下の行は途中で改行しています。</br>
5. 改行すると、行間は狭いです。

↓プレビューするとこんな感じになります。

改行と段分けを使い分けて、見やすくレイアウトしていきましょう。

3. 文字や広告を横や縦に並べる

↓このような感じに並べたい時は

↓このコードをコピペしてください。

1. <table>
2. <tbody>
3. <tr>
4. <td>あいう</td>
5. <td>かきく</td>
6. <td>さしす</td>
7. </tr>
8. <tr>
9. <td>たちつ</td>
10. <td>なにぬ</td>
11. <td>はひふ</td>
12. </tr>
13. </tbody>
14. </table>

4. 目次をつくる

目次から、各見出しへリンクもされます。

こんな目次を作りたいときは、下記をコピペしてください。

1. <div style="padding: 10px; border: solid 1px #DFDFDF; background-color: #F5F5F5;">■もくじ
2. <a href="#i1">1.記事トップ</a>
3. <a href="#i2">2.２番目の記事</a>
4. <a href="#i3">3.３番目の記事</a></div>
6. <h3 id="i1">1.記事トップ</h3>
7. あいうえお
8. あいうえお
9. <h3 id="i2">2.２番目の記事</h3>
10. かきくけこ
11. かきくけこ
12. <h3 id="i3">3.３番目の記事</h3>
13. さしすせそ
14. さしすせそ
15. <div style=border:5px dashed #f90; padding>

5.カラーコードを知る

文字や線などに色をつける時はカラーコードで、色の指示ができます。
カラーコード表で好きな色をクリックすれば、簡単にコードがわかり便利ですよ。

カラーコード表→　https://html-color-codes.info/japanese/

6.囲み枠をつくる（サンプル８種類）

ここからは、完成イメージの下にコピペ素材を貼り付けています。
自分の使いたい囲み枠のコードをコピペしたあと、色やサイズを変えて、自分好みのものをつくりましょう。

囲み枠①

下記の赤文字の部分を、さきほど４で紹介したカラーコード表をもとに変更すれば、好きな色が表示されます。

1. <div style="background:#ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;">ここに文章</div>

囲み枠②　文章の大きさに合わせた枠

1. <div style="display:inline-block;background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all; ">ここに文章</div>

囲み枠③　背景の色と枠線の太さ

赤文字の部分にあるカラーコードや数値を変えて、好みのスタイルを見つけてみましょう。

1. <div style="background: #ffffea;padding: 15px; border: 5px solid #99cc00; border-radius: 10px; word-break: break-all; ">ここに文章</div>

囲み枠④　丸めの2重線

1. <div style="background:#ffffea;padding:15px;border: double 4px #99cc00; border-radius: 10px; word-break: break-all; ">ここに文章</div>

囲み枠⑤　点線

1. <div style="background:#ffffea; padding:15px;border:dotted 3px #99cc00; border-radius: 10px; word-break: break-all; ">ここに文章</div>

囲み枠⑥　エッジがある2重線

1. <div style="background: #ffffff; padding: 10px; border: double 10px #0099ff; ">ここに文章</div>

囲み枠⑦　帯のある枠（角）

1. <div style="background: #ff9900; padding: 5px 10px; color: #ffffff; "><strong>見出し文字</strong></div>
2. <div style="background: #ffffff; padding: 10px; border: 2px solid #ff9900; ">ここに文章</div>

囲み枠⑧　帯のある枠（丸）

1. <div style="background: #ff6666; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0; "><strong>見出しタイトル</strong></div>
2. <div style="background: #ffffff; padding: 10px; border: 2px solid #ff6666; border-radius: 0 0 10px 10px; ">ここに文章</div>

まとめ

プラグインは便利ですが、勉強のためにも、WordPressの不具合に合わないためにも、この記事のコピペが少しでもお役に立てば幸いです。

コードを見るといろいろな英単語が出てくるので、本当は単語の意味も理解しながら覚えた方が良いかも知れませんが、「まずはやってみる」ことを優先してみました。

私としては「考えてから走る」よりも「走りながら考える」タイプなので、走って、壁に当たる事もありますが、この記事を見ていただいている方の壁が、少しでも取り除ける事が出来れば何よりです。